标记的Css< body>未显示适当的输出

mefy6pfw  于 2023-01-06  发布在  其他
关注(0)|答案(2)|浏览(146)

超文本标记语言

<!DOCTYPE html>
<html>
  <head>
    <title>Time</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  </head>
  <body>
    <div id="clock"></div>

    <script src="script.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
  </body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto');

body{
    background-color: #141516;
}

#clock {
    font-family: 'Roboto', sans-serif;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 60px;
    font-weight: bold;
    text-align: center;
    color: rgb(168, 11, 134);
}

@media (max-width: 600px) {
    #clock {
        font-size: 40px;
    }
}

@media (max-width: 400px) {
    #clock {
        font-size: 30px;
    }
}

我希望整个页面都变成主体css中提到的特定背景色
我想指出的是,#clock和其他css的东西是工作的,但不是身体的css
我想先道歉,如果我的方式张贴我的问题是不专业的。这是我第一次张贴的东西堆栈溢出

x6yk4ghg

x6yk4ghg1#

background-color被此导入覆盖:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  • !important设置为背景
  • 或尝试其他引导导入
nukf8bse

nukf8bse2#

我尝试了您的代码,您需要放置!important,因为引导导入覆盖了样式:

body{
    background-color: #141516!important;
}

相关问题