CSS基础
CSS样式表
内联样式表
内联样式表又称为行内样式表，通过使用style属性为各种HTML元素标签添加样式，其作用范围只在指定的HTML元素内部。
基本语法格式如下：
<元素名 style="属性名称:属性值">
如果有多个属性需要同时添加，可用分号隔开，显示如下：
<元素名 style="属性名称1:属性值1; 属性名称2:属性值2; ... 属性名称N:属性值N">
例如，为某个标题标签<h1>设置样式：
<h1 style=”color:blue; background-color:yellow”>标题一</h1>
该声明表示设置当前<h1>和</h1>标签之间的文本字体颜色为蓝色，背景色为黄色。
内部样式表
内部样式表通常位于<head>和</head>标签内部，通过使用<style>和</style>标签标记各类样式规则，其作用范围为当
前整个文档。
语法格式如下：
<style>
选择器{属性名称1:属性值1; 属性名称2:属性值2; ... 属性名称N:属性值N }
</style>
这里的选择器可用于指定样式的元素标签，例如body、p、h1-h6等均可
例如：
h1{color:red }
该语句可以作用于整个文档，因此文档中所有的h1标题都将变为红色字体。
注：在HTML4.01版本中会看到将<style>首标签写成<style type=”text/css”>的形式，在HTML5中已简化为<style>。
如果属性内容较多，也可以分行写：
<style>
选择器{
属性名称1:属性值1;
属性名称2:属性值2;
...
属性名称N:属性值N
}
</style>
其中最后一个属性值后面是否添加分号为可选内容。一般来说属性之间的分号用于间隔不同的属性声明，因此最后一个属性值无需添加分号。但是为了方便后续添加新的属性，也可以为最后一个属性值添加分号，这种做法不影响CSS样式表的正常使用。
外部样式表
外部样式表为独立的CSS文件，其后缀名为.css或.CSS，在网页文档的首部<head>和</head>标签之间使用<link>标签对其进行引用即可作用于当前整个文档。
在HTML5中，对于独立CSS文件的引用语法格式如下：
<link rel="stylesheet" href="样式文件URL">
例如，引用本地css文件夹中的test.css文件：
<link rel="stylesheet" href="css/test.css">
外部CSS文件中的内容无需使用<style></style>标签进行标记，其格式和内部样式表<style>标签内部的内容格式完全一样。
样式表层叠优先级
内联样式表、内部样式表和外部样式表可以在同一个网页文档中被引用，它们会被层叠在一起形成一个统一的虚拟样式表。如果其中有样式条件冲突，CSS会选择优先级别高的样式条件渲染在网页上。
CSS选择器
元素选择器
在CSS中最常见的选择器就是元素选择器，即采用HTML文档中的元素名称进行样式规定。元素选择器又称为类型选择器，可以用于匹配HTML文档中某一个元素类型的所有元素。
例如，匹配所有的段落元素<p>，并将其背景颜色声明为灰色：
p{background:gray}
ID选择器
ID选择器使用指定的id名称匹配元素。如果需要为特定的某个元素进行样式设置，可以为其添加一个自定义的id名称，然后根据id名称进行匹配。
ID选择器和元素选择器语法结构类似，但是声明时需要在id名称前面加#号。其语法规则如下：
# id名称{属性名称1:属性值1; 属性名称2:属性值2; ... 属性名称N:属性值N }
例如，为某个段落元素<p>添加id="test"：
<p id="test">这是一个段落</p>
然后匹配上述id="test"的段落元素<p>，并将其字体颜色声明为红色：
#test{color:red}
类选择器
类选择器可以将不同的元素定义为共同的样式。
类选择器在声明时需要在前面加“.”号，为了和指定的元素关联使用，需要自定义一个class名称。
其语法规则如下：
.class名称{属性名称1:属性值1; 属性名称2:属性值2; ... 属性名称N:属性值N }
例如，设置一个类选择器用于设置字体为红色：
.red{color:red}
将其使用在不同的元素上，可以显示统一的效果：
<h1 class="red">这是标题，字体颜色是红色</h1>
<p class="red">这是段落，字体颜色也是红色</p>
类选择器也可以将相同的元素定义为不同的样式。
例如，设置两个类选择器，分别用于设置字体为红色和蓝色：
.red{color:red}
.blue{color:blue}
将其使用在相同的段落元素<p>中，可以显示不同的样式效果：
<p class="red">这是段落1，字体颜色是红色</p>
<p class="blue">这是段落2，字体颜色是蓝色</p>
类选择器也可以为同一个元素设置多个样式。
例如，设置两个类选择器，分别用于设置字体为红色和设置背景颜色为蓝色：
.red{color:red}
.bgblue{background-color:blue}
将其使用在同一个段落元素<p>中，可以同时应用这两种样式效果：
<p class="red bgblue">本段落的字体颜色是红色，背景颜色是蓝色</p>
属性选择器
从CSS2开始引入了属性选择器，属性选择器允许基于元素所拥有的属性进行匹配。
其语法规则如下：
元素名称[元素属性]{属性名称1:属性值1; 属性名称2:属性值2; ... 属性名称N:属性值N }
例如，只对带有href属性的超链接元素<a>设置CSS样式：
a[href]{
color: red;
}
上述代码表示将所有带有href属性的超链接元素<a>设置字体颜色为红色
也可以根据具体的属性值进行CSS样式设置，例如：
a[href= "http://www.baidu.com"]{
color: red;
}
上述代码表示将href属性值为http://www.baidu.com的超链接设置为红色字体样式。
如果不确定属性值的完整内容，可以使用[attribute~=value]的格式查找元素，表示在属性值中包含value关键词。例如：
a[href~="baidu"]{
color: red;
}
上述代码表示将所有href属性值中包含baidu字样的超链接设置为红色字体样式。
如果不确定属性值的完整内容，可以使用[attribute~=value]的格式查找元素，表示在属性值中包含value关键词。例如：
a[href~="baidu"]{
color: red;
}
上述代码表示将所有href属性值中包含baidu字样的超链接设置为红色字体样式。
注意：属性值部分匹配需要将需要选择的关键字用空格分开
还可以使用[attribute|=value]的格式查找元素，表示属性值中以单词value开头。例如：
img[alt|="flower"]{
border:1px solid red;
}
上述代码表示为所有alt属性值以flower字样开头的图像元素设置1像素宽的红色实线边框效果。
语法规则
注释语句
在内部样式表和外部样式表文件中均可以使用/*注释内容*/的形式为CSS进行注释，注释内容不会被显示出来。该注释以“/*”开头，以“*/”结尾，支持单行和多行注释。
例如：
p{
color:red; /*字体设置为红色*/
background-color:yellow; /*背景设置为黄色*/
}
/*
这是一个多行注释
注释可以存在于CSS样式表的任意位置
*/
@charset
该语法在外部样式表文件内使用，用于指定当前样式表使用的字符编码。
例如：
@charset "utf-8";
该语句表示外部样式表文件使用了utf-8的编码格式，一般写在外部样式表文件的第一行，并且需要加上分号结束。
!important
!important用于标记CSS样式的使用优先级。
其语法规则如下：
选择器{样式规则 !important;}
例如：
p{
background-color: red !important;
background-color: blue;
}
上述代码表示优先使用background-color: red语句，即段落元素的背景颜色设置为红色。
但是需要注意的是该规则在同一对大括号内对IE6.0及以下的浏览器无效。如果需要IE6.0及以下浏览器兼容，需要将这两句样式代码分开写。修改后如下：
p{
background-color: blue;
}
p{
background-color: red !important;
}
CSS取值与单位
数字
数字取值是在CSS2中规定的，有三种取值形式
长度
长度取值<length>是在CSS2中规定的，表示方法为数值接长度单位。可用于描述文本、图像或其他各类元素的尺寸。
长度取值的单位可分为相对长度单位和绝对长度单位。相对单位的长度不是固定的，是根据参照物换算出实际长度，又可分为文本相对长度单位和视口相对长度单位。绝对长度单位的取值是固定的，例如厘米、毫米等，该取值不根据浏览器或容器的大小发生改变。
角度
角度取值<angle>是在CSS3中规定的，可用于描述元素变形时旋转的角度。
时间
时间取值<time>是在CSS3中规定的，可用于描述元素变形时旋转的角度。
文本
文本常见有三种取值形式
颜色
CSS颜色可以用于设置HTML元素的背景颜色、边框颜色、字体颜色等。本节主要介绍了网页中颜色显示的原理—RGB色彩模式，和三种常用的颜色表示方式。
1. RGB色彩模式
RBG色彩模式是一种基于光学原理的颜色标准规范，也是目前运用最广泛的工业界颜色标准之一。颜色是通过对红、绿、蓝光的强弱程度不同组合叠加显示出来的，而RGB三个字母正来自于红（Red）、绿（Green）、蓝（Blue）三个英文单词首字母组合而成，代表了这三种颜色光线叠加在一起形成的各式各样的色彩。
目前的显示器大多是采用了RGB色彩模式，是通过屏幕上的红、绿、蓝三色的发光极的亮度组合出不同的色彩。因此网页上的任何一种颜色都可以由一组RGB值来表示。
RGB色彩模式规定了红、绿、蓝三种光的亮度值均用整数表示，其范围是[0, 255] 共有256级，其中0为最暗，255为最亮。因此红、绿、蓝三种颜色通道的取值能组合出256X256X256=16,777,216种不同的颜色。目前主流浏览器能支持其中大约16000多种色彩。
2. 常见颜色表示方式
在CSS中常用的颜色表示方式有：
使用RGB颜色的方式：例如rgb(0,0,0)表示黑色、rgb(255,255,255)表示白色等；
RGB的十六进制表示法：例如#000000表示黑色、#FFFFFF表示白色等；
直接使用英文单词名称：例如red表示红色、blue表示蓝色等。
CSS常用样式
CSS背景
1. 背景颜色background-color
background-color属性的默认值是transparent（透明的），因此如果没有特别规定HTML元素的背景颜色，那么该元素就是透明的以便使其覆盖的元素为可见。
2. 背景图像background-image
CSS中的background-image属性用于为元素设置背景图像。例如：
p{background-color:gray} /*将段落元素的背景颜色设置为灰色*/
如果引用本地其他文件夹中的图片，给出对应的文件夹路径即可。例如：
p{background-image:url(image/flower.jpg)}
如需要更改整个网页的背景图像，则对<body>元素应用background-image属性。例如：
body{ background-image:url(image/flower.jpg)}
3. 背景图像平铺方式background-repeat
CSS中的background-image属性用于设置背景图像的平铺方式。如果不设置该属性，则默认背景图像会在水平和垂直方向上同时被重复平铺（如例3-10的运行效果）。该属性有四种不同的取值,如表3-10所示。
4. 固定/滚动背景图像background-attachment
CSS中的background-attachment属性用于设置背景图像是固定在屏幕上还是随着页面滚动。该属性有两种取值，如表3-11所示。
5. 定位背景图像background-position
默认情况下，背景图像会放置在元素的左上角。CSS中的background-position属性用于设置背景图像的位置，可以根据属性值的组合将图像放置到指定位置上。该属性允许使用两个属性值组合的形式对背景图像进行定位。其基本格式如下：
background-position: 水平方向值 垂直方向值
水平和垂直方向的属性值均可使用关键词、长度值或者百分比的形式表示。
(1) 关键词定位
在background-position属性值中可以使用的关键词共有5种，如表3-12所示。
使用关键词组合的方式定位图像，需要从表示水平方向和垂直方向的关键词中各选一个组合使用，例如background-position:left top表示背景图像在元素左上角的位置。
关键词指示的方向非常明显，例如left和right就是水平方向专用，而top和bottom是垂直方向专用。因此关键词的组合可以不分先后顺序，例如left top和top left就表达完全相同的含义。关键词center既可表示水平居中也可表示垂直居中，组合使用时取决于另一个关键词是水平还是垂直方向，center则用于补充对立方向。
关键词定位的方式也可以简写为单个关键词的形式，这种情况会默认另一个省略的关键词为center。例如简写形式left就等价于left center或center left，表示水平方向左对齐、垂直方向居中显示。
(2) 长度值定位
长度值定位方法是以元素内边距区域左上角的点作为原点，然后解释背景图像左上角的点对原点的偏移量。例如background-position: 100px 50px指的是背景图像左上角的点距离元素左上角向右100像素同时向下50像素的位置上。
(3) 百分比定位
百分比数值定位方式更为复杂，是将HTML元素与其背景图像在指定的点上重合对齐，而指定的点是用百分比的方式进行解释的。
例如background-position: 0% 0%指的是背景图像左上角的点放置在HTML元素左上角原点上。
而background-position:66% 33%指的是HTML元素和背景图像水平方向2/3的位置和垂直方向1/3的位置上的点对齐。
一般来说使用百分比定位方式都是用两个参数值组合定位的，第一个参数值表示水平方向的位置，第二个参数值表示垂直方向的位置。如果简写为一个参数值则只表示水平方向的位置，省略的垂直方向位置默认为50%。这种方法类似于关键词定位法简写时使用center补全省略的关键词。
6. 背景简写background
CSS中的background属性可以用于概括其它五种背景属性，将相关属性值汇总写在同一行。当需要为同一个元素声明多项背景属性时可以使用background属性进行简写。声明顺序如下：
[background-color] [background-image] [background-repeat] [background-attachment] [background-position]
属性值之间用空格隔开，如果其中某个属性没有规定可以省略不写。
例如：
p{
background-color:silver;
background-image:url(image/football.png);
background-repeat:no-repeat;
}
上述代码使用background属性可以简写为：
p{ background: silver url(image/football.png) no-repeat }
CSS框模型
CSS框模型又称为盒状模型（Box Model），用于描述HTML元素形成的矩形盒子。
每个HTML元素都具有元素内容、内边距、边框和外边距。CSS框模型的结构如图3-14所示。
1. 内边距padding
(1) 设置各边内边距
在CSS中，可以使用padding属性设置HTML元素的内边距。元素的内边距也可以被理解为元素内容周围的填充物，因为内边距不影响当前元素与其他元素之间的距离，它只能用于增加元素内容与元素边框之间的距离。
padding属性值可以是长度值或者百分比值，但是不可以使用负数。
例如，为所有的段落元素<p>设置各边均为20像素的内边距：
p{padding:20px}
使用百分比值表示的是该元素的上一级父元素宽度（width）的百分比。例如：
<div style="width:100px">
<p style="padding:20%">这是一个段落</p>
</div>
设置各边内边距（上、右、下、左）
padding属性也可以为元素的各边分别设置内边距。例如：
p{padding: 10px 20px 0 20%}
此时规定的属性值按照上右下左的顺时针顺序为各边的内边距进行样式定义。 因此本例表示上边内边距为10像素；右边内边距为20像素；下边内边距为0；左边内边距为其父元素宽度的20%。
(2)单边内边距
如果只需要为HTML元素的某一个边设置内边距，可以使用padding属性的4种单边内边距属性，如表3-14所示。
例如，设置段落元素<p>的上边内边距为20像素：
p{padding-top: 20px}
2. 边框border
使用CSS边框的相关属性可以为HTML元素创建不同宽度、样式和颜色的边框。和CSS边框有关的属性如表3-15所示。
(1) 边框宽度border-width
CSS中的border-width属性用于定义HTML元素边框的宽度。该属性有四种取值，如表3-16所示。
(2)边框样式border-style
CSS中的border-style属性用于定义HTML元素边框的样式。该属性有10种取值，如表3-17所示。
(3) 边框颜色border-color
CSS中的border-color属性用于定义HTML元素边框的颜色。其属性值为正常的颜色值即可，例如red表示红色边框等。关于颜色的写法可以参考本章3.4.6 节，这里不再赘述。
(4)边框简写border
CSS中的border属性可以用于概括其它3种边框属性，将相关属性值汇总写在同一行。当需要为同一个元素声明多项边框属性时可以使用border属性进行简写。属性值无规定顺序，彼此之间用空格隔开，如果其中某个属性没有规定可以省略不写。
例如：
p{
border-width: 1px;
border-style: solid;
border-color: red
}
上述代码使用border属性可以简写为：
p{ border: 1px solid red}
3. 外边距margin
(1)设置各边外边距
在CSS中，可以使用margin属性设置HTML元素的外边距。元素的外边距也可以被理解为元素内容周围的填充物，因为内边距不影响当前元素与其他元素之间的距离，它只能用于增加元素内容与元素边框之间的距离。
margin属性值可以是长度值或百分比，包括可以使用负数。
设置各边外边距（上、右、下、左）
例如，为所有的标题元素<h1>设置各边均为10像素的外边距：
h1{margin:10px}
和内边距padding属性类似，使用百分比值表示的也是当前元素上级父元素的宽度（width）百分比。例如：
<div style="width:300px">
<p style="margin:10%">这是一个段落</p>
</div>
magin属性同样也可以为元素的各边分别设置外边距。例如：
p{margin: 0 10% 20px 30px}
此时规定的属性值按照上右下左的顺时针顺序为各边的外边距进行样式定义。因此本例表示上边外边距为0像素；右边外边距为其父元素宽度的10%；下边外边距为20像素；左外外边距为30像素。
如果在设置外边距时各边有部分重复值，可以写成简写的方式。
简写为3个属性值的样式，则左右边外边距共用中间的属性值。例如：
p{margin: 10px 0 30px}
本例表示上边外边距为10像素；左右边外边距为0；下边外边距为30像素。
简写为2个属性值的样式，则上下边外边距共用第一个属性值、左右边外边距共用第二个属性值。例如：
p{margin: 20px 30px}
本例表示上下边外边距为20像素；左右边外边距为30像素。
(2)单边外边距
如果只需要为HTML元素的某一个边设置外边距，也可以使用margin属性的4种单边外边距属性，如表3-18所示。
例如，设置段落元素<p>的左边外边距为10像素：
p{margin-left: 10px}
需要注意的是，不同的浏览器对于HTML元素的边距设置虽然基本都是默认为8像素，但是有细微的差异。其中IE和Netscape浏览器是对<body>标签定义了默认外边距margin属性为8px；而Opera浏览器相反是把内边距padding的默认值定义成了8px。为了保证网页的HTML元素兼容各种浏览器，建议自定义<body>标签中的margin和padding属性值。
(3) 外边距合并
外边距合并又称为外边距叠加，指的是如果两个元素的垂直外边距相连接会发生重叠合并，其高度是合并前这两个外边距中的较大值。
因此外边距合并主要指的就是上下外边距的合并，存在以下三种可能：
a.当元素B出现在元素A下面时，元素A的下边距会与元素B的上边距发生重叠合并；
b.当元素B包含在元素A内部时，如果元素B的上/下内边距均为0，也会发生上/下外边距合并现象；
C.当空元素没有边框和内边距时，上下外边距也会发生合并。
a.当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
b.当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。
c.尽管看上去有些奇怪，但是外边距甚至可以与自身发生合并。假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：
如果这个外边距遇到另一个元素的外边距，它还会发生合并：
CSS文本
CSS文本有关的属性如表3-19所示。
1. 文本缩进text-indent
CSS中的text-indent属性用于为段落文本设置首行缩进效果。
例如，为段落元素<p>设置20像素的首行缩进：
p{text-indent: 20px}
2. 文本对齐text-align
CSS中的text-align属性用于为文本设置对齐效果。该属性有四种取值，如表3-20所示。
3. 文本装饰text-decoration
CSS中的text-decoration属性用于为文本添加装饰效果，例如下划线、删除线和上划线等。该属性有4种取值，如表3-21所示。
4. 文本转换text-transform
CSS中的text-transform属性用于设置文本的大小写。该属性有4种取值，如表3-22所示。
5. 字符间距letter-spacing
CSS中的letter-spacing属性用于设置文本中字符的间距，其属性值为长度值。
例如，将标题元素<h1>设置成字间距为10像素的宽度：
h1{letter-spacing:10px}
CSS字体
CSS字体有关的属性如表3-23所示。
1. 字体系列font-family
在CSS中，将字体分为两类：一类是特定字体系列（family-name），还有一类是通用字体系列（generic family）。特定字体系列指的是拥有具体名称的某一种字体，比如宋体、楷体、黑体、Times New Roman、Arial等；而通用字体系列指的是具有相同外观特征的字体系列。
除了常见的各种特定字体外，CSS规定了五种通用字体系列：
Serif字体
Sans-serif字体
Monospace字体
Cursive字体
Fantasy字体
2. 字体风格font-style
CSS中的font-style属性可以用于设置字体风格是否为斜体字。该属性有3种取值，如表3-24所示。
italic和oblique都是向右倾斜的文字, 但区别在于Italic是指斜体字，而Oblique是倾斜的文字，对于没有斜体的字属体应该使用Oblique属性值来实现倾斜的文字效果。
3.字体变化font-variant
CSS中的font-variant属性可以用于设置字体变化。该属性有两种取值，如表3-25所示。
如果当前页面的指定字体不支持small-caps这种形式，则显示为正常大小字号的大写字母。
4. 字体粗细font-weight
CSS中的font-weight属性用于控制字体的粗细程度。该属性有5种取值，如表3-26所示。
5. 字体大小font-size
在CSS中，font-size属性用于设置字体大小。font-size的属性值为长度值，可以使用绝对单位或相对单位。绝对单位使用的是固定尺寸，不允许用户在浏览器中更改文本大小，采用了物理度量单位：例如cm、mm、px等；相对单位是相对于周围的参照元素进行设置大小，允许用户在浏览器中更改字体大小，字体相对单位有：em、ch等。
例如：
p{font-size:30px}
h1{font-size: 2em}
h2{font-size:120%}
关于字体大小的设置，常见用法是使用px、em或百分比（%）来显示字体尺寸。
px：含义为像素，1px指的是屏幕上显示的一个小点，它是绝对单位。
em：含义为当前元素的默认字体尺寸，是相对单位。浏览器默认字体大小是16px，因此在用户未作更改的情况下，1em=16px。
%：含义为相对于父元素的比例，例如20%指的就是父元素宽度的20%，也是一个相对单位。
6. 字体简写font
CSS中的font属性可以用于概括其它五种字体属性，将相关属性值汇总写在同一行。当需要为同一个元素声明多项字体属性时可以使用font属性进行简写。
声明顺序如下：
[font-style] [font-variant] [font-weight] [ font-size] [font-family]
属性值之间用空格隔开，如果其中某个属性没有规定可以省略不写。
例如：
p{
font-style:italic;
font-weight:bold;
font-size:20px;
}
上述代码使用font属性可以简写为：
p{font: italic bold 20px}
CSS超链接
HTML中的超链接元素<a>和其他元素类似，有一些通用CSS属性可以设置，比如字体大小、字体颜色、背景颜色等。除此之外，超链接元素<a>还可以根据其所处的4种不同的状态分别设置CSS样式。
超链接的4种状态如表3-27所示。
为超链接设置不同状态的CSS样式时必须遵循两条规则：一是a:hover的声明必须在a:link和a:visited之后；二是a:active的声明必须在a:hover之后。否则声明有可能失效。
display的属性值，inline ， block， inline-block
inline（行内元素）:
1. 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.
2. 不能更改元素的height，width的值，大小由内容撑开.
3. 可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行.
block（块级元素）:
1. 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度.
2. 能够改变元素的height，width的值.
3. 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.
inline-block（融合行内于块级）:
结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.
用通俗的话讲，就是不独占一行的块级元素。
CSS列表
CSS对于HTML列表元素的样式设置主要在于规定各项列表前面的标志（marker）类型。在之前第二章HTML5基础中提到了三种列表类型：有序列表、无序列表和定义列表。其中有序列表默认的标记样式为标准阿拉伯数字（1，2，3，4，...）；而无序列表默认的标记样式是实心圆点。
和列表有关的属性如表3-28所示。
1. 样式类型list-style-type
CSS中的list-style-type属性可以用于设置列表的标志样式。该属性在CSS2版本已有21种取值内容，如表3-29所示。
2. 样式图片list-style-image
CSS中的list-style-image属性可以用于设置列表的标志图标。标志图标可以是来源于本地或者网络的图像文件。如果已使用list-style-image属性声明了列表的标志图标，则不能同时使用list-style-type属性声明列表的标志类型，否则后者将无显示效果。
3. 样式位置list-style-position
CSS中的list-style-position属性用于定义列表标志的位置，有3种属性值如表3-30所示。
4. 样式简写list-style
CSS中的list-style属性可以用于概括其它3种字体属性，将相关属性值汇总写在同一行。当需要为同一个列表元素声明多项列表属性时可以使用list-style属性进行简写。声明顺序如下：
[list-style-type] [list-style-position] [list-style-image]
属性值之间用空格隔开，如果其中某个属性没有规定可以省略不写。
例如：
ul{
list-style-type: circle;
list-style-position: outside
}
上述代码使用list-style属性可以简写为：
ul{ list-style: circle outside}
CSS表格
对网页上的表格进行修饰。和CSS表格有关的属性如表3-31所示。
除以上5种属性设置外，在CSS中一些通用属性设置同样也可以用于表格元素。例如字体颜色（color）、背景（background）、文本对齐（text-align）、边框（border）、内边距（padding）、宽度（width）和高度（height）等，这里不再展开详细说明。
- 折叠边框border-collapse
在默认情况下，表格的边框如果设置为实线则会显示为双层线条的样式效果。CSS中的border-collapse属性用于设置是否将表格的双层边框折叠为单一线条边框，该属性有3种属性值如表3-32所示。
- 边框距离border-spacing
CSS中的border-spacing属性用于定义表格中双线边框的分割距离，该属性有3种属性值如表3-33所示。
- 标题位置caption-side
CSS中的caption-side属性用于定义表格中标题的位置，有3种属性值如表3-34所示。
- 空单元格empty-cells
CSS中的empty-cells属性用于定义表格中空单元格边框和背景的显示方式。该属性有3种属性值，如表3-35所示。
- 表格布局table-layout
CSS中的table-layout属性用于规定表格的布局方式，包括固定表格布局和根据内容调整布局。该属性有3种属性值，如表3-36所示。
CSS定位
CSS定位可以将HTML元素放置在页面上指定的任意地方。CSS定位的原理是把页面左上角的点定义为坐标为(0,0)的原点，然后以像素为单位将整个网页构建成一个坐标系统。其中x轴与数学坐标系方向相同，越往右数字越大；y轴与数学坐标系方向相反，越往下数字越大。
绝对定位
绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素，基于绝对定位的元素不占据空间。
使用绝对定位需要将HTML元素的position属性值设置为absolute（绝对的），并使用4种关于方位的属性关键词left（左边）、right（右边）、top（顶部）、bottom（底端）中的部分内容设置元素的位置。一般来说从水平和垂直方向各选一个关键词即可。
例如，需要将段落元素<p>放置在距离页面顶端150像素、左边100像素的位置：
p{
position: absolute;
top:150px;
left:100px
}
需要注意的是，绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素。如果当前需要被定位的元素没有已定位的祖先元素做参考值，则相对于整个网页。
相对定位
使用相对定位需要将HTML元素的position属性值设置为relative（相对的），与绝对定位的区别在于它的参照点不是左上角的原点，而是该元素本身原先的起点位置。并且即使该元素偏移到了新的位置，也仍然从原始的起点处占据空间。
使用相对定位需要将HTML元素的position属性值设置为relative（相对的），并同样使用4种关于方位的属性关键词left（左边）、right（右边）、top（顶部）、bottom（底端）中的部分内容设置元素的位置。一般来说从水平和垂直方向各选一个关键词即可。
例如，需要将段落元素<p>放置在距离页面顶端150像素、左边100像素的位置：
p{
position: relative;
top:150px;
left:100px
}
层叠效果
在CSS中，除了定义HTML元素在水平和垂直方向上的位置，还可以定义多个元素在一起叠放的层次。使用属性z-index可以为元素规定层次顺序，其属性值为整数，并且该数值越大将叠放在越靠上的位置。例如，z-index属性值为99的元素一定显示在z-index属性值为10的元素上面。
浮动
- 浮动效果float
在CSS中float属性可以用于令元素向左或向右浮动。以往常用于文字环绕图像效果，实际上任何元素都可以应用浮动效果。该属性有4种属性值，如表3-37所示。
在对元素声明浮动效果后，该浮动元素会自动生成一个块级框，因此需要明确指定浮动元素的宽度，否则会被默认不占空间。元素在进行浮动时会朝着指定的方向一直移动直到碰到页面的边缘或者上一个浮动框的边缘才会停下来。
如果一行之内的宽度不足以放置浮动元素，则该元素会向下移动直到有足够的空间为止再向着指定的方向进行浮动。
在 CSS 中，我们通过 float 属性实现元素的浮动。
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
2. 清理浮动clear
CSS中的clear属性可以用于清理浮动效果，它可以规定元素的哪一侧不允许出现浮动元素。该属性有5种属性值，如表3-38所示。
例如，常用clear:both来清除之前元素的浮动效果。
p{
clear:both;
}
此时该元素不会随着之前的元素进行错误的浮动。
675
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
