1.6.1 CSS的定义
1. CSS的定义格式
CSS的定义主要有以下三种格式。
格式一 标签样式的定义：
标签名{属性1:值1; 属性2:值2; …… }
格式二 类样式的定义：
·类名{属性1:值1; 属性2:值2; …… }
格式三 ID样式的定义：
#ID名{属性1:值1; 属性2:值2; …… }
其中，格式一用于为已有的HTML标签定义显示样式，格式二用于定义一个可通用的样式类，格式三用于专为某个元素定义一个ID样式。
在CSS规范中，各种样式名、属性名和属性值以及标点符号都要采用半角ASCII字符(包括半角的英文字母、数字及其他ASCII字符)，font-family属性值是汉字字体名称(全角)例外。
当样式的某个属性的值为中文字符(譬如汉字字体"宋体")或多个英文单词(譬如英文字体"Times New Roman")时，要用半角双引号" "将属性值引起来。当样式里有多个属性时，为便于阅读，可以分行书写，多个属性不分先后。在样式定义里，可用“/* …… */”进行注释。
样式的属性有很多种，如表1-2所示，但常用属性却不多。这些属性可用来规范网页元素的显示样式，不同的属性有不同的属性值。
表1-2 CSS2样式属性分类
常用属性有：font-family属性用于定义中英文字体、font-size属性用于定义字的大小(值为n px)、font-weight属性用于定义字重(值为normal，bold，bolder，lighter，或一个数值)、font-style属性用于定义字型(值为normal，italic，obligue)、color属性用于定义颜色。background-color和background-image属性分别用于指定背景颜色和背景图片。
颜色属性值的指定，可任选以下三种方法之一来实现。
(1)使用3位(或6位)十六进制数字#rgb(或#rrggbb)，如#0f8 (或#00ff85)等；
(2)使用颜色的英文名称，如red、green、blue、black、white等；
(3)使用颜色十进制数rgb(0~255, 0~255, 0~255)，如rgb(0,127,255)等。
此外，text-align定义文本水平对齐属性(值为left，ritht，center，justify)，vertical-align定义文件垂直对齐属性(值为top，bottom，text-top，text-bottom，baseline等)，line-height定义行高属性(值为normal或数值)，text-indent定义文本缩进属性。
margin-top(-right，-bottom，-left)指定方框的顶部(右边、底部、左边)空白距离；boder-top(-right，-bottom，-left)指定方框的顶(右、底、左)边框宽度；padding-top(-right，-bottom，-left)指定方框内对象与方框的顶(右、底、左)边间隙。position指定位置属性(值为absolute，fixed，inhruit，relative，static)；width、height、left、right、top、bottom和z-index属性分别指定宽、高、左、右、顶、底和Z轴深度值；page-break-before和page-break-after定义分页；filter(滤镜)定义视觉效果。
注意：CSS的定义与应用，在HTML网页中，不区分大小写；在XHTML网页中，则严格区分大小写。初学CSS时，应按照XHTML严格方式编写CSS。
2. 网页内定义CSS
1)在网页内定义CSS的一般格式
当CSS只应用于当前网页时，CSS的定义就在当前网页的头部标签<head>里进行，一般定义格式如下：
<head>
<style type="text/css">
<!--
CSS1定义
CSS2定义
……
-->
</style>
</head>
注意：<style>标签里的“<!--”和“-->”,不是作注释，而是将本网页内定义的样式全部界定起来。在“<!--”和“-->”之间可定义多个样式。
2)在网页内按格式一定义标签样式
标签是HTML的标签符号，标签样式用于控制该标签元素的显示样式。在网页头部元素里定义标签样式的格式如下。
<head>
<style type="text/css">
<!--
标签名{
属性1:值l;
属性2:值2;
……
}
-->
</style>
</head>
下面是一个定义段落p标签样式的例子。
<head>
<style type="text/css">
<!--
p{ /∗ 定义HTML标签p的显示样式 ∗/
font-family:arial; /∗ font-family属性定义字体为arial ∗/
font-size:16px; /∗ font-size属性定义字大小为16像素 ∗/
color:red; /∗ color属性定义颜色为红色 ∗/
text-align:center; /∗ text-align属性定义文本水平对齐 ∗/
}
-->
</style>
</head>
p标签样式的这些属性都是可选项，还可给p的显示样式多增加一些其他类型属性。该CSS(样式)只对p标签元素的显示格式起作用，对别的HTML元素不起作用。
在网页主体(<body>……</body>)内应用段落标签p，如
<p>Hello,How do you do！</p>
时，浏览网页，p元素就会受到p标签显示样式的控制，效果如下：
当有多个标签要定义同样的样式时，可以并列在一起同时定义，标签之间用半角逗号隔开。以下是多个同类标准定义为相同样式的例子。
<head>
<style type="text/css">
<!--
h1,h2,h3,h4{ /∗定义多个标签具有相同样式 ∗/
font-family: "黑体";color:#00f;}
-->
</style>
</head>
在网页主体(<body>……</body>)内使用h1~h4标签，即
<h1>第一号标题</h1>
<h2>第二号标题</h2>
<h3>第三号标题</h3>
<h4>第四号标题</h4>
时，浏览网页，显示效果如图1-13所示。
也可采用类似的方式，同时定义多个不同的标签，
使之具有相同的样式，如下例所示。
图1-13 hn标签样式的应用效果
<style type="text/css">
<!--
body,td,th {
font-size: 14px;
color: #0000ff;
}
-->
</style>
这里将body、表格单元格td和th标签里的元素，定义为相同的显示样式。
3)在网页内按格式二定义类样式
在网页的头部元素内定义类样式，格式如下。
<head>
<style type="text/css">
<!--
·类名 {属性1:值l; 属性2:值2; …… }
-->
</style>
</head>
类样式定义的特点是类名前有一个“.”号。类名由用户自己定义，名称由英文字符、数字等半角字符组成，一般要选择较有意义的文字，能一看就明白，不能含空格，一般不要与已有的HTML标签名相同。类选择样式符，可应用于某一类标签元素中。
实际定义时，为便于阅读，可将每个属性单独写成一行。
在网页头部定义的一个类样式实例如下。
<head>
<style type="text/css">
<!--
·fontclass1{ /∗ 定义一个名为fontclass1的类样式 ∗/
font-family: "楷体"; /∗ font-family属性定义字体为楷体 ∗/
font-size:12px; /∗ font-size属性定义字大小为10像素 ∗/
color:rgb(0,0,255); /∗ color属性定义文字颜色为红色 ∗/
text-align:center; /∗ text-align属性定义水平居中 ∗/
}
-->
</style>
</head>
4)在网页内按格式三定义ID样式
在网页的头部元素内定义ID样式，格式如下：
<head>
<style type="text/css">
<!--
#ID名{属性1:值l; 属性2:值2; ……}
-->
</style>
</head>
ID样式定义的特点是ID名前有一个“#”号。ID名由用户自己定义，名称由英文字符、数字等半角字符组成，一般要选择较有意义的文字，能一看就明白，不含空格，一般不要与已有的HTML标签名相同。ID样式，只能应用于某一个标签元素里。
实际定义时，为便于阅读，可将每个属性单独写成一行。
在网页头部定义的一个ID样式实例如下。
<head>
<style type="text/css">
<!--
#fontid1{ /∗ 定义一个名为fontid1的ID样式 ∗/
font-family: "宋体"; /∗ font-family属性定义字体为宋体 ∗/
font-size:13px; /∗ font-size属性定义字大小为13像素 ∗/
color:rgb(0,255,0); /∗ color属性定义文字颜色为红色 ∗/
}
-->
</style>
</head>
3. CSS文件内定义CSS
将各种CSS编辑在一个特定的文件里，只要按照1.6.1节格式一、二、三进行CSS定义即可，文件内不含任何HTML标签。保存文件时，文件名也要用半角ASCII字符，扩展名规定为.css。这样保存的文件就是CSS文件。CSS文件内容的一般形式如下：
标签名1{属性1:值1; 属性2:值2; …… }
标签名2{属性1:值1; 属性2:值2; …… }
……
·类名1{属性1:值1; 属性2:值2; …… }
·类名2{属性1:值1; 属性2:值2; …… }
……
#ID名1{属性1:值1; 属性2:值2; …… }
#ID名2{属性1:值1; 属性2:值2; …… }
……
实际编辑时，为便于阅读，可将每个属性单独写成一行。
例如，有一个type1.css文件的内容如下。
p{ /∗定义标签p的样式 ∗/
font-family: "黑体";
font-size:16px;
color:rgb(255,0,0);
text-align:center; }
·fontclass1{ /∗定义一个名为fontclass1的类样式 ∗/
font-family: "楷体";
font-size:12px;
color:rgb(0,0,255);
text-align:center; }
#fontid1{ /∗定义一个名为fontid1的ID样式 ∗/
font-family: "宋体";
font-size:13px;
color:rgb(0,255,0); }
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
