个人中心
gpt4 book ai didi

html - 外部样式表不工作(但在内部工作)

转载 作者：行者123 更新时间：2023-11-28 15:13:03 26 4
gpt4 key购买 nike

当我使用内部样式时，CSS 可以工作，但是当我将它移动到外部文件时，某些属性将不起作用。

这是带有外部 CSS 的代码(我已经拥有并需要修复的部分): https://codepen.io/WittyKnee43/pen/vpGPQj

这是带有内部 CSS 的代码(视觉上看起来应该如何): https://codepen.io/WittyKnee43/pen/NXNJoV 

<html lang="en">

<head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!--Custom CSS-->
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <!--Icons-->
    <script src="https://use.fontawesome.com/7a7877aa6c.js"></script>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
        crossorigin="anonymous">
  <style>body {
    padding: 0 2em 0 2em;
    font-family: 'Poppins', sans-serif;
    min-height: 100vh;
}

@import url('https://fonts.googleapis.com/css?family=Poppins:300,600');
@font-face {
    font-family: 'Reglo';
    src: url('/FONTS/reglo-bold.otf');
}
/*=====  NAVIGATION ======*/

.navbar-brand small {
    display: block;
    font-size: 15px;
    text-transform: capitalize;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    color: black;
}

.navbar {
    padding: 0.5rem 0;
}

.navbar .navbar-brand {
    text-transform: uppercase;
    font-family: 'Reglo';
    font-size: 1.7rem;
    font-weight: bold;
}

.nav-link {
    color: #000 !important;
}

.navbar-light .navbar-toggler {
    border-color: #ffffff;
}
/*=====  End of Navigation  ======*/

/*=====  FOOTER  ======*/

.wit-pb-2 {
    padding-bottom: 2rem!important;
}

.flex-grow {
    flex: 1;
    padding: 0;
}

a.wit-footer {
    color: #000;
}
/*=====  End of Footer  ======*/
/*=====  PROJECT JUMBOTRON  ======*/

.wit-pj-jumbotron {
    min-height: 10vh;
    padding: 14.08rem 0!important;
    margin-bottom: 40px;
    background-size: cover;
}

.wit-pj-1 {
    background-image: url('https://78.media.tumblr.com/e334f432080b67cef944eeefca5302af/tumblr_oiwytwMDKF1tf8vylo1_1280.png');
}

.wit-pj-2 {
    background-image: url('/image/0ASXA.jpg');
}

.btn-outline-dark {
    margin-top: 4px;
    color: white;
    background-color: transparent;
    background-color: black;
    border-radius: 1px;
}

.btn-outline-dark:hover {
    background-color: white;
    color: black;
    border-color: black;
}

.btn-visit {
    margin-top: 4px;
    color: black;
    background-color: transparent;
    background-color: none;
    border: none;
}

.btn-visit:hover {
    color: white;
}
/*=====  End of Project Jumbotron  ======*/

/*=====  ABOUT  ======*/

/*=====  End of About  ======*/

</style>
</head>

<body class="d-flex flex-column">
    <nav class="navbar navbar-expand-lg navbar-light bg-faded">
        <a class="navbar-brand" href="index.html">Whitney
            <small>Multidisciplinary Designer</small>
        </a>
        <ul class="navbar-nav mr-auto">
            <span class="navbar-text"></span>
        </ul>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="info.html">About</a>
            </li>

            </li>
        </ul>
    </nav>
    <section class="container-fluid flex-grow">
        <!--PROJECT-->
        <div class="jumbotron jumbotron-fluid wit-pj-jumbotron wit-pj-1 parallax" title="An image of inside the Battle & Brew bar">
            <h1 class="text-center">The Other Project</h1>
            <p class="text-center">Creative Direction&mdash;Photography&mdash;Branding</p>
            <p class="text-center">
                <a href="#" class="btn btn-outline-dark text-center" target="_blank">Details</a>
                <a href="#" class="btn btn-visit text-center" target="_blank">Visit&nbsp;&nbsp;
                    <i class="fa fa-external-link" aria-hidden="true"></i>
                </a>
            </p>
        </div>
        <!--PROJECT-->
        <div class="jumbotron jumbotron-fluid wit-pj-jumbotron wit-pj-2 parallax" title="An image of inside the Battle & Brew bar">
            <h1 class="text-center">The Other Project</h1>
            <p class="text-center">Creative Direction&mdash;Photography&mdash;Branding</p>
            <p class="text-center">
                <a href="#" class="btn btn-outline-dark text-center" target="_blank">Details</a>
                <a href="#" class="btn btn-visit text-center" target="_blank">Visit&nbsp;&nbsp;
                    <i class="fa fa-external-link" aria-hidden="true"></i>
                </a>
            </p>
        </div>
    </section>

    <footer>
        <div class="container-fluid wit-pb-2 px-0">
            <div class="row">
                <div class="col-md-3"></div>
                <div class="col-md-3"></div>
                <div class="col-md-3"></div>
            </div>
            <div class="row">
                <div class="col-md-6">© 2017 wittyknee. All rights reserved.
                </div>
                <div class="col-md-6 text-right  align-self-end">
                    <a href="#" class="wit-footer">hello@email.com </a>&mdash;
                    <a href="#" class="wit-footer">Resume </a>&mdash;
                    <a href="#/" target="_blank" class="wit-footer">LinkdIn</a>
                </div>
            </div>
        </div>
    </footer>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
        crossorigin="anonymous"></script>
</body>

</html>

应该做哪些改变？

最佳答案 

In your external stylesheet, try adding the following functionalities.

.btn-outline-dark {
    margin-top: 4px;
    color: white !important;
    background-color: transparent;
    background-color: black !important;
    border-radius: 1px;
}
.btn-outline-dark:hover {
    background-color: white !important;
    color: black !important;
    border-color: black !important;
}


Changes: attach the attribute "!important" to background-color and color.
The "!important" overrides any style affecting it and lays emphasis on these

关于html - 外部样式表不工作(但在内部工作)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47898562/

26 4 0
文章推荐： swift - 将 UIPicker View 设置为选定的字符串 - Swift
文章推荐： html - 在 Bootstrap 中定位播放按钮和视频背景部分
文章推荐： html - CSS 表现异常
文章推荐： javascript - 在输入线下方堆叠 md 芯片
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com