CSS属性规则不能在HTML文件中工作

-1

请不要太意味着我只是想明白。好的，所以我精通C++，Java和C＃应用程序。我最近一直在努力理解网站的发展。现在我正在进行基本的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。但它没有按预期工作。CSS属性规则不能在HTML文件中工作

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
\t <style type ="text/css"> \t <!-- You need this in order to have CSS, it has --> 
 
\t \t p {color: blue; font-family:arial;} 
 
\t </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> 
 
\t  <style type ="text/css"> \t 
 
\t \t  p {color: blue;} 
 
\t  </style> 
 
     </head> 
 
     <body> 
 
\t  <p style="text-decoration: underline;">This is my body green</p> 
 
\t  <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样式，除非我特别声明它在括号中不在标题中。如果这是一个逻辑错误，请发表/评论文章阅读。

来源

2017-10-19 job villamil

@Kunok YUP是工作！评论如何/为何影响代码？ –

在第一个例子中的注释被错放到一个CSS声明，所以不要把HTML注释的CSS声明。

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

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
\t <style type ="text/css"> \t 
 
\t \t p {color: blue; font-family:arial;} 
 
\t </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> 
 
\t  <style type ="text/css"> \t 
 
      p {color: blue;} 
 
      .underlined { text-decoration: underline } 
 
      .blue { color: blue } 
 
\t  </style> 
 
     </head> 
 
     <body> 
 
\t  <p class="underlined">This is my body green</p> 
 
\t  <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>

来源

2017-10-19 20:50:40

-1

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

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
\t <style> 
 
\t \t p {color: blue; font-family:arial;} 
 
\t </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>

来源

2017-10-19 20:40:12

为什么downvote？我删除了注释以便它可以工作，并且也不需要定义样式类型。 –

有人猜测，也许是因为你的答案并没有真正增加任何其他答案？或者，也许这只是一个战术downvote？ – Brian

我的评论是第一个，所以是其他人加入我的评论。 –

CSS属性规则不能在HTML文件中工作

回答

相关问题