CSS 属性规则在 HTML 文件中不起作用答案

【问题标题】：CSS Properties rules are not working in HTML fileCSS 属性规则在 HTML 文件中不起作用
【发布时间】：2018-03-31 23:59:33
【问题描述】：

请不要太刻薄，我只是想理解。好的，所以我精通 C++、Java 和 C# 应用程序。我最近一直在尝试了解 Web 开发。现在我正在学习基本的 HTML 编码。查看http://www.westciv.com/style_master/academy/css_tutorial/introduction/how_they_work.html 并尝试重新创建https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works。但它没有按预期工作。

<!DOCTYPE html>
<html>
  <head>
	<style type ="text/css">	<!-- You need this in order to have CSS, it has --> 
		p {color: blue; font-family:arial;}
	</style>
  </head>
  <body>

    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>

    <ul>
      <li>This is</li>
      <li>a list</li>
    </ul>
  </body>
</html>

因此，当我将此代码输入 Codepen 时，它会按预期工作，每个段落都显示蓝色文本。但是，当我在记事本 ++ 中将其编码为 HTML 文件时，它不会添加 CSS 样式、格式、背景颜色等。在查看它时，我发现如果我直接在段落括号中添加样式它可以工作（如如下所示）

    <!DOCTYPE html>
    <html>
      <head>
	    <style type ="text/css">	
		    p {color: blue;}
	    </style>
      </head>
      <body>
	    <p style="text-decoration: underline;">This is my body green</p>
	    <p style = "color: blue;">this text should be blue!</p>
        <h1>Hello World!</h1>
        <p>This is my first CSS example</p>

        <ul>
          <li>This is</li>
           <li>a list</li>
        </ul>
       </body>
     </html>

添加像<meta charset="utf-8>和<link rel="stylesheet" href="style.css">这样的声明块也没有帮助。

我的问题是为什么这段代码在某些地方有效，而在其他地方无效？是否存在可能干扰的网络浏览器设置？我已经尝试过 IE、FF 和 Chrome，但它们中的任何一个都不会显示 CSS 样式，除非我在括号中而不是在标题中特别声明它。如果这是一个逻辑错误，请发布/评论文章以阅读。

【问题讨论】：

@Kunok YUP 成功了！！注释如何/为什么会影响代码？

标签： html css notepad++

【解决方案1】：

在第一个示例中，注释  被错误地放置在 CSS 声明中，因此不要将 HTML cmets 放在 CSS 声明中。

声明p {color: blue; font-family:arial;} 只影响<P></P> 标签。

<!DOCTYPE html>
<html>
  <head>
	<style type ="text/css">	
		p {color: blue; font-family:arial;}
	</style>
  </head>
  <body>

    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>

    <ul>
      <li>This is</li>
      <li>a list</li>
    </ul>
  </body>
</html>

如果您需要为特定标签添加特定格式，您可以使用 class 属性 (class="blue")，并在 CSS 中声明一个类，并在类名的开头附加一个点 (.blue)。

    <!DOCTYPE html>
    <html>
      <head>
	    <style type ="text/css">	
            p {color: blue;}
            .underlined { text-decoration: underline }
            .blue {  color: blue }
	    </style>
      </head>
      <body>
	    <p class="underlined">This is my body green</p>
	    <p class="blue" >this text should be blue!</p>
        <h1>Hello World!</h1>
        <p>This is my first CSS example</p>

        <ul>
          <li>This is</li>
           <li>a list</li>
        </ul>
       </body>
     </html>

【讨论】：

【解决方案2】：

您不需要声明样式类型，因为唯一的类型是 CSS。

<!DOCTYPE html>
<html>
  <head>
	<style>
		p {color: blue; font-family:arial;}
	</style>
  </head>
  <body>

    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>

    <ul>
      <li>This is</li>
      <li>a list</li>
    </ul>
  </body>
</html>

【讨论】：

为什么要投反对票？我删除了评论以便它可以工作，并且不需要定义样式类型。
猜测一下，也许是因为您的答案并没有真正在其他答案之上添加任何内容？或者这只是一个战术性的反对票？
我的评论是第一个，所以是其他人添加到我的。