1.3 CSS3
CSS（Cascading Style Sheet，层叠样式表或级联样式表）是一种专门用于控制网页内容的样式和布局的语言，目前最新的标准是CSS3。当前，采用CSS+DIV实现网页布局已经成为主流方式，因此Web前端开发人员掌握CSS3技术是十分必要的。
1.3.1 盒子模型
理解盒子模型是了解CSS工作方式的基础，尤其是在做内容布局时，盒子模型将起到十分重要的作用。盒子模型认为，任何一个视觉可见的html元素都包括内容（content）、内边距（padding）、边框（border）和外边距（margin）。其中内边距是指内容到边框的距离，外边距是指边框以外与其他相邻元素的距离。这种结构就好像我们在观察一组装有物品的盒子：内容是指盒子内放置的物品，内边距是指物品与盒子外壳之间的距离，边框是指盒子外壳的厚度，外边距是盒子外壳以外的空间。因此，这种结构被形象地称为盒子模型，如图1.2所示。
图1.2 盒子模型示意图
需要注意的是，内边距、边框和外边距可以被分别设置上、下、左、右四个方向的值；我们在计算标签的实际占位宽度或高度时，需要将内容、内边距、边框、外边距在垂直或水平方向的值进行累加，而对于两个相邻标签之间在水平方向上的实际间隔距离，不同浏览器有不同的解释，开发人员在做内容布局时一定要注意这一点。
1.3.2 CSS的基本语法
CSS的基本语法结构为：
选择器 {
样式名：样式值；
样式名：样式值；
…
}
根据CSS代码的位置不同，CSS样式可以分为三类：行内样式、内部样式和外部样式。
行内样式是指在＜html＞标签中通过使用＜style＞属性来设置样式内容，样式内容仅能修饰所在的＜html＞标签。如：
＜p style=＂font-size:14px; color:red; ＂＞＜/p＞
内部样式是把CSS代码放在＜head＞标签下的＜style＞标签中，代码的有效作用范围是整个页面。如：
＜head＞
＜style＞
p {
font-size:14px；
color:red；
}
＜/style＞
＜/head＞
外部样式是指将CSS代码放在一个独立的、扩展名为.css的文件中，任意一个html文档均可调用该文件，从而使用其中的样式。从提高代码利用率的角度看，我们推荐使用外部样式。如：
myStyle.css文件：
p {
font-size:14px；
color:red；
}
在index.html文件中调用上述样式文件：
＜head＞
＜link rel=＂stylesheet＂ href=＂myStyle.css＂＞
＜/head＞
1.3.3 样式选择器
在内部样式和外部样式中，样式选择器非常重要，它将直接决定着样式代码能够修饰哪些标签。基本的样式选择器包括ID样式选择器、类样式选择器、标签样式选择器和伪类选择器。
ID样式选择器的写法是“#某个标签的id属性值”，其样式内容仅可修饰有对应id值的标签，如：
#stuName {
font-size:14px；
color:red；
}
＜p id=＂stuName＂＞我的字是红色14像素。＜/p＞
类样式选择器的写法是“．某些html标签的class属性值”，类样式能够同时修饰多个标签。如：
.redFont {
font-size:14px；
color:red；
}
＜p class=＂redFont＂＞我的字是红色14像素。＜/p＞
＜div class=＂redFont＂＞我的字是红色14像素。＜/div＞
标签样式选择器的写法是“合法的html标签名”，标签样式可以同时修饰有效作用范围内的所有标签。如：
div {
font-size:14px；
color:red；
}
＜div＞我的字是红色14像素。＜/div＞
＜div＞我的字是红色14像素。＜/div＞
伪类选择器样式用于标签在不同状态下的样式，其写法是在上述三种样式选择器后加：“状态”。其典型应用是修饰一个文字链接在鼠标未经过和鼠标悬停时显示不同的样式，如：
.redLink {
font-size:14px；
color:black；
text-decoration:none；
}
.redLink:hover {
font-size:14px；
color:red；
text-decoration:underline；
}
＜a class=＂redLink＂ href=＂http://www.xynun.edu.cn＂＞兴义民族师范学院＜/a＞
我们可以发现，“兴义民族师范学院”文字原本是黑色、无下划线的，鼠标光标经过它时变为红色加下划线。
我们将上述四种基本选择器进行组合，可以得到更为复杂的选择器。如：
＜style＞
#nav li. linkStyle {
font-size:14px；
color:black；
text-decoration:none；
}
#nav li. linkStyle:hover {
font-size:14px；
color:red；
text-decoration:underline；
}
＜/style＞
＜ul id=＂nav＂＞
＜li＞＜a class=＂linkStyle＂＞首页＜/a＞＜/li＞
＜li＞＜a class=＂linkStyle＂＞简介＜/a＞＜/li＞
＜ul/＞
上述代码中，第一个样式选择器“#nav li. linkStyle”的含义是，在id属性值为nav的标签中找到所有后代标签li（可以是直接后代，也可以是间接后代），再从每个li标签中找到所有class属性值为linkStyle的后代标签，这才是最终的修饰对象。
除此之外，我们还可以将标签的其他属性值写入选择器中。如：
input [type=＂text＂]{
font-size:14px；
color:red；
}
＜input type=＂text＂ /＞
＜input type=＂text＂ /＞
当用户在上述两个文本框中输入内容时，文字为红色、14像素。
1.3.4 常用的CSS3样式名
如果说选择器用于确定要修饰的对象，那么样式名和样式值则决定着如何来修饰。完整的CSS样式名规模很大，但是常用的不多，可以分为文字修饰类、段落文本修饰类、背景类、表格类、定位类和弹性伸缩布局类等，下面逐一介绍。
（1）常用的文字修饰类样式名，见表1.6。
表1.6 常用的文字修饰类样式名
（2）常用的段落文本修饰类样式名，见表1.7。
表1.7 常用的段落文本修饰类样式名
（3）常用的背景类样式名，见表1.8。
表1.8 常用的背景类样式名
（4）常用的表格类样式名，见表1.9。
表1.9 常用的表格类样式名
（5）定位样式名position。
默认情况下，有些标签会独立占行显示（称为块级标签），有些标签则不会独立占行（称为行内标签），而是与左右相邻标签共在一行，如果需要打破这种默认布局则需要用到CSS中的position属性对标签进行重新定位。position属性的作用是设置标签的定位类型，其可选值及作用如下：
static：默认值，普通流定位，浏览器会根据元素的默认属性，自上而下（或自左向右）依次显示元素。
relative：相对定位，元素相对于其原来默认位置偏移一定值，原来所占空间仍然存在。
absolute：绝对定位，元素完全从文档流中脱离，并相对于其父元素偏移一定值，原来所占空间将被删除。
fixed：固定定位，元素完全从文档流中脱离，并相对于浏览器窗口来定位。
需要注意的是，relative、absolute、fixed这三种定位类型均需要配合top/right/bottom/left四个属性来设置具体偏移值。
（6）弹性伸缩布局类样式名，见表1.10。
弹性伸缩布局是CSS3的新特性，能够极大降低页面复杂布局的实现难度。在弹性伸缩布局中，我们仅需要对父标签进行设置，不需要关注子标签。
表1.10 弹性伸缩布局类样式名
1.3.5 CSS3中的颜色值写法
CSS3仍然采用RGB三色原理调节每种颜色的浓度，从而取得目标颜色值，或者直接使用颜色对应的英文单词。CSS3中共有四种颜色表示方法，分别为：
（1）#6位十六进制代码：从左至右每两位值分别表示红、绿、蓝三种颜色的浓度，00最淡，ff最深；每种颜色的值均相同，则表示不同深浅的灰色。如：#ff0000为红色；#ffff00为黄色；#00ffff为青色；#000000为黑色；#ffffff为白色等。
（2）rgb函数：该函数有三个参数，从左至右依次红、绿、蓝三种颜色的浓度，0最淡，255最深；每种颜色的值均相同，则表示不同深浅的灰色。如rgb（255,0,0）为红色；rgb（255, 255,0）为黄色；rgb（0, 255, 255）为青色；rgb（0,0,0）为黑色；rgb（255, 255, 255）为白色等。
（3）rgba函数：该函数有四个参数，前三个参数的意义与rgb相同，第四个参数表示透明度，值为0～1之间的小数，如rgba（255,0,0,0.5）表示透明度为0.5的红色，实际上它呈现出来的已经不再是纯红色。
（4）英文单词：如red、yellow、blue、green、white、black、pink、purple、brown等。
1.3.6 CSS3中的尺寸值写法
根据盒子模型的原理及上述知识我们不难发现，很多属性的值都为尺寸，如字号、高度、宽度、边框、内外边距、填充等。在CSS3中尺寸的写法有四种，分别为：
（1）px：像素，相对于用户屏幕的分辨率。
（2）em：相对长度，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（16px）。
（3）rem：相对长度，相对于根标签（＜html＞标签）中设置的字体大小来调整当前标签的某一尺寸属性值。如根标签设置font-size:14px，则
1rem=1×14=14px；
1.25rem=1.25×14=17.5px；
（4）%：百分比，指相对于父标签某一尺寸值的比例。
在实际应用中，rem单位值的写法在显示效果上更佳，推荐使用。