Question

我似乎无法为正文中的标记应用链接样式表属性，因为它似乎不会让我覆盖css文件中指定的正文标记属性，因此级联似乎不起作用情况。 id freeDeliveries保持与body标签相同的样式，除非我在内联添加样式属性。为什么？我甚至尝试给body标签一个id并引用它来代替样式而不是body元素本身它仍然无效。字体面仍然是freeDeliveries里面的Dosis，颜色仍然是白色。

编辑：我从p标签中删除了id =“freeDeliveries”属性并将p包装在具有该属性的div中，然后在样式表上添加#freeDeliveries，将实际的p标签本身引用为核心标记和后代选择器，而不是引用它的id，并以某种方式最终能够覆盖核心body标记上的值。所以它与实际的html标签和附加到标签的id之间的优先级有关，它需要引用p标签本身，因为它优先于id。这就是为什么内联工作，因为总是优先于一切。如果有人可以解释原因，那将是正确的答案，我可以标记它。注意我没有更改下面的代码，以便您可以看到我之前的内容，并将其与上述简单更改的描述拼凑在一起

这是我的链接

<link href='https://fonts.googleapis.com/css?family=Dosis:800' rel='stylesheet' type='text/css'/>
<link href='StyleSheets/stylesForms.css' rel='stylesheet' type='text/css'/>

我从谷歌导入一个字体并将其应用到body标签，我的样式表的路径是正确的，或者我根本看不到任何样式，我这样做。

样式表

body {
    color:#FFF;
    font-family: 'Dosis', sans-serif;
    background-color:rgb(255,204,153);
    padding:0;
    margin:0;
    overflow-y: scroll;
    min-width:300px;
}

header {
    color:#FFF;
    margin:0;
    padding:5px;
    background-color: rgb(0,176,80);
    background-image: linear-gradient(to top, rgb(0,109,42) 10%, rgb(0,189,79));
    display:-webkit-flex;
    display:flex;
}

header h1{
    font-size:24px;
    text-shadow: 2px 1px 2px #22542d;
    padding:0;
    margin:0;
}

header div{
    margin-right:10px;
}

#freeDeliveries {
    color:black;
    font-family:Arial;
    font-size:16px;
    padding:10px;
}

#logo{
    width:32px;
    height:32px;
    border-radius:16px;
    border:2px solid rgb(255,106,0);
    background-color:rgb(255,204,153);
    background-image:url(../images/hippo28.png);
    background-repeat:no-repeat;
    background-position:center;
}

HTML

<body>
    <header>
        <div style="width:42px">
            <section id="logo"></section>
        </div>
        <div style="line-height:36px;width:90%">
            <h1>Registration</h1>
        </div>
    </header>
    <p id="freeDeliveries">Register to get 100 free deliveries.</p>
    <p>other content</p>
</body>

Answer 1

只需添加！important到freeDeliveries font-family。这被body font-family覆盖了。

header {
    color:#FFF;
    margin:0;
    padding:5px;
    background-color: rgb(0,176,80);
    background-image: linear-gradient(to top, rgb(0,109,42) 10%, rgb(0,189,79));
    display:-webkit-flex;
    display:flex;
}

header h1{
    font-size:24px;
    text-shadow: 2px 1px 2px #22542d;
    padding:0;
    margin:0;
}

header div{
    margin-right:10px;
}

#freeDeliveries {
    color:black;
    font-family:Arial !important;
    font-size:16px;
    padding:10px;
}

#logo{
    width:32px;
    height:32px;
    border-radius:16px;
    border:2px solid rgb(255,106,0);
    background-color:rgb(255,204,153);
    background-image:url(../images/hippo28.png);
    background-repeat:no-repeat;
    background-position:center;
}

<body>
    <header>
        <div style="width:42px">
            <section id="logo"></section>
        </div>
        <div style="line-height:36px;width:90%">
            <h1>Registration</h1>
        </div>
    </header>
    <p id="freeDeliveries">Register to get 100 free deliveries.</p>
    <p>other content</p>
</body>

Answer 2

不确定您是否有错误拼写，但我在这里将#freedeliveries更改为CSS中的serif字体。查看片段。（我评论了我改变字体的地方）。我使用serif，因为它更容易看到与Arial字体的区别。但是，此规则适用于任何字体。

＆＃13;

body {
    color:#FFF;
    font-family: 'Dosis', sans-serif;
    background-color:rgb(255,204,153);
    padding:0;
    margin:0;
    overflow-y: scroll;
    min-width:300px;
}

header {
    color:#FFF;
    margin:0;
    padding:5px;
    background-color: rgb(0,176,80);
    background-image: linear-gradient(to top, rgb(0,109,42) 10%, rgb(0,189,79));
    display:-webkit-flex;
    display:flex;
}

header h1{
    font-size:24px;
    text-shadow: 2px 1px 2px #22542d;
    padding:0;
    margin:0;
}

header div{
    margin-right:10px;
}

#freeDeliveries {
    color:black;
    font-family: serif; /* changed to serif font. it works */
    font-size:16px;
    padding:10px;
    color: red;
}

#logo{
    width:32px;
    height:32px;
    border-radius:16px;
    border:2px solid rgb(255,106,0);
    background-color:rgb(255,204,153);
    background-image:url(../images/hippo28.png);
    background-repeat:no-repeat;
    background-position:center;
}

＆＃13;

<head>
  <link href='https://fonts.googleapis.com/css?family=Dosis:800' rel='stylesheet'>
  <link href='StyleSheets/stylesForms.css' rel='stylesheet'>
</head>
<body>
    <header>
        <div style="width:42px">
            <section id="logo"></section>
        </div>
        <div style="line-height:36px;width:90%">
            <h1>Registration</h1>
        </div>
    </header>
    <p id="freeDeliveries">Register to get 100 free deliveries.</p>
    <p>other content</p>
</body>

＆＃13;

Answer 3

在CSS中声明：
@ font-face：{font-family：Dosis; src：url（＆＃39; http://www.fonts.googleapis.com/css?family=Dosis:800＆＃39;）;

How do I install a custom font on an HTML site

除非内联，否则不应用样式表属性

3 个答案: