Question

我正在尝试为HTML <head>标记应用样式。但它没有用。

以下是代码：

<?php

?>

<!DOCTYPE html>
<html>
    <head>
        <link rel = "stylesheet" href = "css/style.css">
        home page
    </head>
</html>

这是css / style.css部分：

#head {
    font-size: 15 px;
    font-family: helvetica;
    font-color: blue;
    text-align: center;
};

Answer 1

你有四个问题。

该属性为color而非font-color
长度
您正尝试使用id="head"定位元素，但文档中不存在此类元素
head元素不能包含自由文本，因此HTML的解析规则将文档转换为此DOM：

<!DOCTYPE html>
<html>
    <head>
        <link rel = "stylesheet" href = "css/style.css">
    </head>
    <body>
        home page
    </body>
</html>

...所以内容不在head中：

如果元素是有效的HTML，您可以在元素中设置样式：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo title</title>
    <style>
        head { display: block; }
        head title { display: block; color: blue; }
    </style>
  </head>
  <body>
    <h1>Demo heading</h1>

这通常是一个糟糕的主意。您应该在正文中使用适当的语义HTML来显示要在主视口中显示的内容。

您还应该使用HTML validator和CSS validator。

Answer 2

您正在尝试修改head标记。 head标记是隐藏的，包含有关页面的信息，如元标记，标题，样式表等。

你想要做的是：

<!DOCTYPE html>
<html>
    <head>
        <link rel = "stylesheet" href = "css/style.css">
        <title>Home Page</title>

        <style>
            /* selecting the header tag*/
            header {
                font-size: 15 px;
                font-family: helvetica;
                color: blue;
                text-align: center;
            };

            /* Selecting the header id */
            #header {
                font-size: 15 px;
                font-family: helvetica;
                color: blue;
                text-align: center;
            };
        </style>
    </head>
    <body>
    <header id="header">
        This is the header
    </header>
    <div class="body-text">
    </div>
    <footer id="footer"></footer>
    </body>
</html>

这是30 CSS selectors的便捷列表。文章说你需要记住它们，但是当我使用非常具体的选择器时，我仍然会一直引用这个博客。

Answer 3

我认为这是你的目标，头部没有渲染： - ）

header {
  font-size: 15px;
  font-family: helvetica;
  color: blue;
  text-align: center;
}

<html>
  <head>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <header>
    home page
  </header>
</html>

为什么CSS样式不起作用？

3 个答案: