CSS属性规则不能在HTML文件中工作
请不要太意味着我只是想明白。好的,所以我精通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样式,除非我特别声明它在括号中不在标题中。如果这是一个逻辑错误,请发表/评论文章阅读。
在第一个例子中的注释<!-- You need this in order to have CSS, it has -->
被错放到一个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>
您不需要声明样式类型,因为唯一的类型是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>
为什么downvote?我删除了注释以便它可以工作,并且也不需要定义样式类型。 –
有人猜测,也许是因为你的答案并没有真正增加任何其他答案?或者,也许这只是一个战术downvote? – Brian
我的评论是第一个,所以是其他人加入我的评论。 –
@Kunok YUP是工作!评论如何/为何影响代码? –