核心提示：前言用户通过选择器对不同的HTML标签进行控制，并赋予各种样式声明，即可实现各种效果。style标记style标记用于为HTML文档定义样式信息。在style中，你可以规定在浏览器中如何呈现HTML文...
前言
用户通过选择器对不同的HTML标签进行控制，并赋予各种样式声明，即可实现各种效果。
style标记
style标记用于为HTML文档定义样式信息。在style中，你可以规定在浏览器中如何呈现HTML文档。type属性是必需的，定义style元素的内容。唯一可能的值是“text/css”。style元素位于head部分中。
标记选择器
一个HTML页面由很多不同的标记组成，而CSS标记选择器就是声明哪些标记采用哪种CSS样式。例如p选择器，用于声明页面中所有p标记的样式。
HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
p{
color:#CC0033;
font-size:25px;
text-align:center;
}
h1{
color:#0099CC;
font-size:36px;
text-align:center;
}
</style>
</head>
<body>
<h1>姓名</h1>
<p>琚建飞</p>
<p>倪 妮</p>
<p>斯嘉丽</p>
</body>
</html>
效果图
在后期维护中，如果希望所有h1标记换成另一种颜色（或大小），这时仅仅需要将属性color的值修改为blue即可全部生效。
类别选择器
标记选择器中，p标记被声明后，页面中所有p标记都将是一个样式。如果希望其中的某一个p标记不是红色，而是绿色，这时仅仅依靠标记选择器是远远不够的，还需要引入类别（class）选择器。类别选择器的名称可以由用户自定义，格式如下图所示。
html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.one{
color:green;
font-size:30px;
}
p{
color:#CC0033;
font-size:25px;
text-align:center;
}
h1{
color:#0099CC;
font-size:36px;
text-align:center;
}
</style>
</head>
<body>
<h1>姓名</h1>
<p >琚建飞</p>
<p class="one">倪 妮</p>
<p>斯嘉丽</p>
</body>
</html>
效果图
由图可知，如果类别选择器中的属性声明和标记选择器中属性声明重复的话，那么以类别选择器中的属性声明为准。其中.one也可以写成p.one，如p.one{color:green;}。
在HTML的标记中，还可以同时给一个标记运用多个class类别选择器，从而将两个类别的样式风格同时运行到一个标记中。这在实际制作网站时很有用，可以适当减少代码的长度。
HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.one{
color:green;
}
.two{
font-size:30px;
}
p{
color:#CC0033;
font-size:25px;
text-align:center;
}
h1{
color:#0099CC;
font-size:36px;
text-align:center;
}
</style>
</head>
<body>
<h1>姓名</h1>
<p class="one two">琚建飞</p>
<p class="one">倪 妮</p>
<p class="two">斯嘉丽</p>
</body>
</html>
效果图
