第二章 CSS
第一节 CSS基础
2.1.1 什么是CSS
CSS（Cascading Style Sheet，层叠样式表）技术是一种格式化网页的标准方式，它扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式。
2.1.2 CSS的两个作用
（1）它能够简化网页的格式设置工作
（2）它能够增强网页的表现力，因为相比HTML标记符而言，CSS样式属性提供了更多的格式设置功能。
第二节 在网页中使用CSS
2.2.1 在标记中直接嵌套样式信息
使用HTML语言标记的style属性可以直接在标记中嵌入样式定义，其格式如下：
<标记 style=“属性1：值1；属性2：值2；属性3：值3；..........”>
例题2-1：
1
黑夜给了我黑色的眼睛
我却用它寻找光明
2
2.2.2 在STYLE标记中定义样式信息
在HTML标记中直接指定样式信息显然没有简化网页设计的格式设置和维护工作，因为每一个style属性都必须单独设置。如果能将同类的样式都统一定义，然后再具体应用到网页中的元素，那么就能简化网页设计的格式设置和维护工作。这正是CSS应用于网页的最常用方式，即在HEAD标记内使用STYLE标记，然后在STYLE标记中定义样式。
定义样式的格式：
其中，selector1和selector2表示样式作用的对象，在style标记内的定义样式时，在样式信息周围加上注释标记可以确保不支持style标记和CSS的浏览器把其作为注释忽略掉；当前绝大多数浏览器都支持CSS，所以注释标记可以省略。
例题2-2：
黑夜给了我黑色的眼睛
我却用它寻找光明
5
2.2.3 链接外部样式表中的样式信息
在style标记中定义样式对于单独网页的格式设置和维护很有效，但如果在一个网站中，为每个页面都定义类似的样式，显然又是效率不高的，这时最好的办法是将重复在多个网页中使用的样式放在外部样式表文件中，然后通过连接的方式引用其中的样式。连接式样式的优点很明显，网页设计者可以在一个连接的CSS文件上作修改，然后所有引用他的网页都会自动更新。
连接外部样式表的方法是在head标记内使用link标记。连接外部样式表的格式：
创建样式表文件的方法是：将style标记与其中的样式定义一起放置到一个空白的文本文件中，然后将文件保存为.css扩展名即可。操作方法与用“记事本”保存.htm文件类似。
6
例题2-3：
（1） 样式表文件：文件名为mycss.css，与网页文件同目录
（2） 网页文件
7
黑夜给了我黑色的眼睛
我却用它寻找光明
第三节 CSS样式定义
样式表项的组成如下：
8
selector{属性1：值1；属性2：值2；属性3：值3；..........}
其中，selector表示需要应用样式的内容，它有5种：html标记，具有上下文关系的html标记，用户定义类，用户定义ID，虚类。
2.3.1 HTML标记selector
html标记是最典型的selector类型，我们可以为某个或某些具体的html标记应用样式定义。对于不同的标记，我们可以采用编组的方式简化样式定义。
例如：
h1{color:#ff0000}
h2{color:#ff0000}
h3{color:#ff0000}
可以转换成编组样式如下：
h1,h2,h3{color:#ff0000}
2.3.2 具有上下文关系的HTML标记selector
若需要为位于某个标记内的标记设置特定的样式规则，则应将selector指定为具有上下文关系的html标记。
9
例如：如果只想使位于h1标记内的B标记具有特定的属性，则应使用以下格式：
h1 B{color:blue}
注意：h1和B之间以空格分隔，这表示只有位于h1标记内的B标记具有指定样式，其他B标记不具有该样式。
2.3.3 用户定义的类selector
可以使用类来为单一html标记创建多个样式，将一个类包括到样式定义中有两种情况：
1.定义通用类：
通用类可以应用到所有html标记，其定义格式如下：
.类名{属性1：值1；属性2：值2；属性3：值3；..........}
其引用格式如下：
<标记名 class=\"类名\">…………
例如：
定义一个通用类如下：
10
.red{color:red}
引用该类如下：
本行文字为红色
此时，如果使用了h1和p标记但没有使用相应的class属性，则不应用所定义的样式，此处所定义的类在任何标记中都可以引用。
2.为html标记定义类：
其定义格式如下：
标记.类名{属性1：值1；属性2：值2；属性3：值3；..........}
其引用格式如下：
<标记名 class=\"类名\">…………
例如：
为h1标记定义如下类：
h1.color_red{color:red}
11
h1.color_yellow{color:yellow}
h1.color_blue{color:blue}
引用这些类如下：
此时，如果使用了h1标记但没有使用相应的class属性，则不应用所定义的样式,这里所定义的类最好在定义该类的标记中使用。
2.3.4 用户定义的ID selector
我们要想在网页中使用通用的样式，除了定义通用类之外，还可以使用ID定义样式，其定义格式如下：
#ID名称{属性1：值1；属性2：值2；属性3：值3；..........}
其引用格式如下：
<标记名 ID=\"ID名称\">…………
12
例如：
定义一个ID样式如下：
#red{color:red}
引用该样式如下：
本行文字为红色
2.3.5 虚类selector
对于A标记，可以用虚类的方式设置不同类型超连接的显示方式，所谓不同类型超连接，是指访问过的，未被访问的，正被访问的，鼠标指针悬停其上的这4种状态的超连接。
可以通过指定下列selector之一来设置超连接样式：
1.A:link或:link 当超连接没有被访问过时，所设置的样式应用于超连接。
2.A:visited或:visited 当超连接已被访问过时，所设置的样式应用于超连接。
3.A:active或:active 当超连接正在被访问过时，所设置的样式应用于超连接。
4.A:hover或:hover 当鼠标指针移动到超连接上时，所设置的样式应用于超连接。
13
例如：
该组定义可以使网页中的超连接文字在未访问过时以黑色显示，访问过和被选中时以灰色显示，鼠标悬停其上时以红色显示，除了鼠标悬停时有下划线，其他状态均没有下划线。
第四节 CSS的属性
2.4.1 字体与文本属性
1.字体属性
14
（1）font-family属性
该属性用来确定要使用的字体列表，取值可以是字体名称，也可以使字体族名称，值之间用逗号分隔。
例如：
h1{font-family:楷体_gb2312,黑体}
在使用字体或字体族时，他们中间的空格应用破折号进行替换。
（2）font-size属性
该属性用于控制字体的大小，其取值分为4种类型：绝对大小、相对大小、长度值以及百分数。其默认值是medium。
当使用绝对大小类型时，其取值为：xx-small、x-small、small、medium、large、x-large、xx-large，表示越来越大的字体。
当使用相对大小时，其取值为smaller、larger，分别表示比上一级元素中的字体小一号和大一号。
当使用百分比值时，表示与当前默认字体（即medium所代表的字体大小）的百分比。
当使用长度值时，可以直接指定。这是最常用的一种情况，他可以控制页面文字的绝对大小。其常用单位有pt和px，pt表示点数，px表示像素数。
15
例如：
font1{font-size:12px}
font2{font-size:12pt}
（3）font-style属性
该属性确定指定元素显示的字形，其取值包括：normal、italic、oblique三种。默认值是normal，表示普通字形；italic和oblique表示斜体字形。
例题2-4：
S1的测试，黑体，24像素，斜体
S2的测试，楷体，12像素，斜体
S3的测试，宋体，large，普通字形
17
18
2.文本属性
（1）letter-spacing属性
该属性决定了字符间距，其取值可以是normal或具体的长度，也可以使负值。默认值是normal，表示浏览器根据最佳状态调整字符间距。也可以为该属性指定具体的长度值，通常其长度单位为px或pt。
例如：
P{letter-spacing:6px}
P{letter-spacing:0.5pt}
19
（2）line-height属性
该属性决定了相邻行之间的间距，即行间距。其取值可以是数字、长度或百分比。
当以数字指定值时，行高就是当前字体高度与该数字相乘的倍数。
例如：P{font-size:10pt;line-height:1.5}表示的行高是15pt。
当指定具体的长度值时，则行高为该值。
当用百分比指定行高时，则行高为当前字体高度与该百分比相乘。
（3）text-align属性
该属性指定对齐方式，其取值为：left、right、center、justify，分别表示左对齐、右对齐、居中对齐和两端对齐。
（4）text-decoration属性
该属性对文本进行修饰，其取值为：none、underline、overline、line-through、blink，其默认值为none，表示不加任何修饰。Underline表示添加下划线；overline表示添加上划线；line-through表示添加删除线；blink表示添加闪烁效果（有的浏览器不支持）。
（5）text-indent属性
20
该属性可以对选定的文本进行首行缩进，取值可以是长度值或百分比，其默认值是0，表示无缩进。
（6）text-transform属性
该属性用来转换文本，取值为：capitalize、uppercase、lowercase、none，默认值是none。Capitalize选定文本的每个单词的首字母以大写显示；uppercase选定文本都以大写显示；lowercase选定文本都以小写显示。
例题2-5：
字符间距10px
行高4倍行距
文本居中
添加上划线和下划线
首行缩进0.75厘米
Idleness makes the wit rut.
22
2.4.2 颜色与背景属性
在CSS中，颜色属性可以设置元素内文本的颜色，背景属性可以控制元素的背景颜色以及背景图案。他的背景属性包括：background、background-attachment、background-color
、
background-image
、
background-position
和
background-repeat。
1. color属性
23
该属性用于控制文本的颜色，一般取值为6位16进制数，用来表示颜色。
例如：P.green{color:#00ff00}可以为p标记设置绿色的文本颜色。
2. background-color属性
该属性用来设置元素的背景颜色，一般取值为6位16进制数，用来表示颜色。其默认值是transparent，表示没有任何颜色。
3. background-image属性
该属性用来设置元素的背景图案，取值为url(imageurl)或none。默认值为none，即没有背景图案。
例如：.img1{background-image:url(bgimg.jpg)}
4. background-attachment属性
该属性控制背景图象是否随内容一起滚动，取值为scroll或fixed。默认值为scroll，表示背景图案随着内容一起滚动；fixed表示背景图案静止，而内容可以滚动，这类似于水印效果。
5. background-position属性
该属性指定背景图案相对于关联区域左上角的位置，通常指定由空格隔开的两个值，其取值有以下几种情况：
24
（1）left、center、right和top、center、bottom
（2）百分数
（3）标准单位计算的距离。
例如：50%表示将背景图象放在区域的中心位置，25px的水平值表示图像左侧距离区域左侧25px。如果只提供一个值而不是一对值，则相当于只指定水平位置，垂直位置自动设置为50%。指定距离时，也可以使用负值，表示图像可以超出边界。该属性的默认值是
“0% 0%”，表示图像与区域左上角对齐。
6. background-repeat属性
该属性表示使用背景图像时，背景图案是否重复显示，其取值可以是：repeat、repeat-x、repeat-y、no-repeat，默认值是repeat，表示在水平和垂直方向都重复，即平铺效果；repeat-x表示在水平方向上平铺；repeat-y表示在垂直方向上平铺；no-repeat表示不平铺，即只显示一幅背景图案。
7. background属性
该属性是一个组合属性，可用于同时设置background-color、background-image、background-attachment、background-position、background-repeat等背景属性，在指定他的属性时，各属性值的位置可以是任意的。
例题2-6：
25
26
古人学问无遗力，
少壮功夫老始成。
纸上得来终觉浅，
绝知此事要躬行。
2.4.3 定位和显示属性
1.定位属性和宽高属性
CSS的定位属性包括position、top、bottom、left、right和z-index，宽高属性包
27
括width和height。
（1）position属性：
该属性用来规定元素在页面上的定位方式，其取值为：static（默认值）、relative或absolute。
Static表示按照HTML格式规则正常定位；
Relative是指某元素将定位在相对于页面上前一个元素的尾端位置；
Absolute是指某元素将定位在框架或浏览器窗口本身的左上角绝对位置。
（2）top和left属性
该属性用来规定某个元素与其父或其他元素之间的距离。这两个属性按像素来设定元素位置往下或往右的距离，这里既包括与其父的左上角之间的距离，也包括相对于前一个元素尾端之间的距离。
（3）z-index属性
使用top和left属性可能会造成元素相互堆叠在一起，此时可以使用z-index属性，z-index属性对元素进行分层，值较高的元素在上面，将覆盖值较低的元素。如果使用值-1，则表示元素将置于页面默认文本的后边，这对于设置背景图案是很有用的。
（4）width和height属性
28
width和height属性控制元素的宽度和高度，此时position属性必须指定为absolute。他的取值可以是长度值，也可以是百分比。
例题2-7：
30
相见欢
相见欢
相见欢
林花谢了春红，太匆匆。无奈朝来寒雨晚来风。胭脂泪，留人醉，几时重？自是人生长恨水常东。
31
2.显示属性
控制元素显示与隐藏的属性有：display和visibility。
（1）display属性
该属性控制一个元素是否应绘制在页面上，他的取值有多个，在一般的浏览器中，只有一个none值可以使用。当使用该属性隐藏元素时，不但元素看不见，而且元素也将退出当前的页面布局层，不占用任何空间。
（2）visibility属性
该属性有时也被分类为定位属性，它控制定位的元素是否可见，其取值包括：visible（可见）、hidden（隐藏）和inherit（继承），默认值为inherit。与前一属性的不同之处在于：当隐藏元素时，仍然为元素保留原有的显示空间。
32
2.4.4 布局属性
1.页面元素周围的空白
在任何一个HTML元素的周围，都包含边框、边界和填充这三种空白。最接近元素内容的是填充，接下来是边框，最外围的是边界。边界区总是透明的，可以显示出背景色或背景图像；而填充总是采用标记的背景色和背景图像；边框则可以使用自己的颜色。
2.边框属性
边框的设置包括3项：颜色（color）、样式（style）和宽度（width），而边框又包括四个方向：上（top）、下（bottom）、左（left）、右（right）。将边框设置和方向组合起来，则构成了多种属性。
（1）border-bottom-color、border-left-color、border-right-color、border-top-color属性分别用于指定下、左、右、上边框的颜色，可以用border-color属性同时指定4个边框的颜色。如果分别指定，则必须按上、右、下、左的顺序指定；如果只指定了一个值，则所有边框颜色一样；如果指定了2或3值，则未指定颜色的边框采用相对边框的颜色值。
（2）border-bottom-style、border-left- style、border-right- style、border-top- style属性分别用于指定下、左、右、上边框的样式，其取值是：none、dotted、dashed、solid、double、groove、ridge、inset、outset，默认值是none。
None表示无边框；
33
Dotted表示边框由点线组成
Dashed使用划线表示边框
Solid边框由实现组成
Double使用双线
Groove和ridge利用元素的颜色属性值描出具有三维效果的边框
Inset和outset利用修饰元素的颜色值描出边框效果。
也可以用border-style属性同时指定4个边框的样式，如果分别指定，则必须按上、右、下、左的顺序指定；如果只指定了一个值，则所有边框样式一样；如果指定了2或3值，则未指定样式的边框采用相对边框的样式。
（3）border-bottom-width、border-left- width、border-right- width、border-top- width属性分别用于指定下、左、右、上边框的宽度，其取值是：thin、medium、thick、length，默认值是medium，其中length是可以使用的长度单位数值。
也可以用border-width属性同时指定4个边框的宽度，如果分别指定，则必须按上、右、下、左的顺序指定；如果只指定了一个值，则所有边框宽度一样；如果指定了2或3值，则未指定样式的边框采用相对边框的宽度。
（4）border-bottom、border-left、border-right、border-top属性分别用于指定下、左、右、上边框的宽度、样式和颜色，其取值可以是border-width、border-color、
34
border-style属性的取值，如果没有指定某个值，则该值采用默认值。当指定宽度、样式和颜色时，并没有顺序的要求。
（5）border属性可以用来一次性设置4个方向上边框的宽度、样式和颜色，它是指定元素边框各个边的简洁方式。用他指定边框时，4个边框都具有相同的设置。同样，指定宽度、样式和颜色时，也没有顺序要求。
例题2-8：
黑发不知勤学早，白首方悔读书迟。
36
莫等闲白了少年头，空悲切。
3.边界属性
边界属性包括：margin、margin-bottom、margin-left、margin-right、margin-top。margin-bottom、margin-left、margin-right、margin-top属性分别用来设置左、右、
37
上、下边界的宽度，margin属性可以同时指定4个边界的宽度（其使用规则同边框属性），其取值可以是长度、百分比或auto，使用百分比时，表示相对于父元素宽度的百分比，使用长度时，其单位可以是cm、px、pt等。
4.填充属性
填充属性包括：padding、padding-left、padding-right、padding-top、padding-bottom。padding-left、padding-right、padding-top、padding-bottom属性用于设置左、右、上、下填充区的宽度，取值是长度或百分数，不能取负值，使用长度时，其单位可以是cm、px、pt等。Padding属性可以同时指定4个填充的宽度（其使用规则同边框属性）。
38
因篇幅问题不能全部显示，请点此查看更多更全内容