css样式表---2

时间 2019-11-08

标签 css 样式栏目 CSS 繁體版

原文原文链接

3.5 CSS做用原理css

3.5.1优先级html

在3.4节中三种基本的HTML样式选择器，优先级最高的是ID样式选择器，其次是类样式选择器，最低的是HTML标签样式选择器。api

本章范例css_prior.htm演示了上述三种样式选择器的优先关系。下列代码中声明了分别以HTML列表标签名li做样式选择器、类名bold做样式选择器、ID做样式选择器的三个样式表。浏览器

li{ font-weight:normal;color:red; font-size:18px;}服务器

li.bold{ font-weight:bold;color:blue;font-size:14px;}框架

#li1{ font-style:italic; font-weight:normal;color:green;font-size:16px;} ssh

样式表li对页面中全部的HTML标签<li></li>起做用，将其文字显示成红色，字号为18px。ide

样式表li.bold对使用了class="bold"的<li></li>标签起做用，将其文字显示成加粗，蓝色，字号为14px。post

样式表#li1将页面中ID号为li1的标签文字显示成斜体，绿色，字号为16px。测试

在下面代码的列表标签中，第一行没有使用class和id属性，所以由样式表li起做用。

样式表li对页面中全部<li></li>标签都起做用，但因为优先级低于类样式表选择器的li.bold，所以，第二行的样式由li.bold控制。同理，第三行的样式由样式表#li1控制。

在第四行中，同时有class="bold" id="li1"两个属性，因为ID样式选择器的优先级最高，所以，该行受样式表#li1的样式控制。

<li class="bold">class为bold的列表文字2</li>

<li id="li1">id为li1的列表文字3</li>

上述代码的页面效果如图3-10所示。

图3-10　CSS优先级

3.5.2继承

HTML文档标签是一种树状嵌套形式的，样式表做用于标签时，下层标签能够继承上级标签的样式。

在本章范例css_inherit.htm中，网页中HTML标签代码以下。

<body>

<div >

<h1>这是网页的标题</h1>

<p>这是一个段落。<span>这是段落中的一个范围标记</span>，范围标记已经结束了。</p>

<ul>

<li>这是UL中的第一个列表</li>

<li>这是UL中的第二个列表</li>

　</ul>

</div>

</body>

上述代码中，HTML标签body、div、h1、p、ul和li是一种树形嵌套关系，层次关系如图3-11所示。

图3-11　css_inherit.htm页面中标签层次图

样式表的继承是依据HTML树形关系，外层的HTML标签CSS会传递到内层标签中（除非该标签不具备该样式属性，例如color属性不能被<br/>标签继承）。

上例网页中定义的样式表以下：

body{color:blue; }

div{font-size:18px; text-align:center; border-color:#F00;border-width:1px; border-style:dashed; }

p{color:red; font-size:18px; font-weight:normal; text-align:left;}

span.strong{color:black; font-size:25px; font-weight:bold; }

样式定义body的字体颜色为蓝色，根据继承原则，body标签内嵌套的div以及div下的h1、p和ul字体都显示成蓝色，只有当下层的标签另外设计字体颜色，字体的蓝色才被子标签的样式替换，如p标签设置字体为红色，此时就再也不使用body的蓝色。读者能够在p段落的内嵌标签span标签加上样式属性class="strong"，观察样式变化。

CSS继承原则决定HTML子标签会继承父标签的样式风格，并能够在父标签的基础上加以修改，产生新的样式，而子标签的样式风格不会影响父标签的样式。利用这一原则，能够将公共的样式写在父标签的样式中，从而节省CSS代码编写量。

3.5.3就近原则

当多个样式都对某个标签起做用时，若是多个样式中的属性互不冲突，则这些样式共同做用于标签，有些教材将这种现象称为样式的层叠性。若是定义的样式属性有冲突，在优先级相同的前提下，这些样式中发生冲突的属性按就近原则对标签做用，即离标签最近的样式中定义的样式属性直接起做用。

在本章范例css_recent.htm中，定义了两个段落标签样式p，第一个p样式设计了字体颜色为红色和字体粗细为普通，第二个p样式设计了字号为18px、字体粗细为加粗和文本对齐方式为居中，运行该页面，能够发现段落是红色、18px的粗体、文本居中。

p{color:red; font-weight:normal;}

p{font-size:18px; font-weight:bold; text-align:center;}

两个p样式中都有样式font-weight属性，一个值为normal，一个值为bold，最终段落显示成加粗的字号，这是由于第二个p样式离p标签距离更近。读者能够修改两个p样式的顺序，观察段落字号变化。

3.6 CSS属性

3.6.1 长度单位

在网页设计过程当中，相对单位与绝对单位是两个很是重要的概念，所谓相对单位，是以某个对象为参考基本，相对于该参考的单位尺度。所谓绝对单位，是以一个固定值来度量的单位尺度。

长度单位中的相对单位有px、em和百分比几种表示方法，绝对单位有in（英寸）、cm（厘米）、mm（毫米）、pt（点）、pc（皮卡）等。各单位的含义与表示方法如表3-1所示。

表3-1长度单位

类型	单位	含义	示例
相对长度	px	像素，根据显示设备的分辨率而肯定的一个长度单位，显然，分辨率都为800600的17寸显示器和52寸投影中，像素为10080的绝对长度是不一样的，但同一显示设备中px值是绝对的。	p{font-size:18px;} 将字号设置为18像素。
em	以目前字符高度为单位。	p{ text-indent:2em} 段落前空两个字符。
%	表示长度为参考标签的百分比，前面能够加“+”或“-”两个符号，若是参考对象没有肯定值，则为标准值。	table{width:80%;} 表示表格占父容器宽度的80%。
绝对长度	in	英寸，1 in = 2.54 cm，非国际单位，平时使用极少。	p{fline-height:1in;} 行高为1英寸。
cm	厘米，国际标准单位，使用较少。
mm	毫米，国际标准单位，使用较少。
pt	点数，1 pt = 1 / 72 in，基本的显示单位，较少使用。	p{font-size:15px;} 将字号设置为11点。
pc	印刷单位，应用在印刷行业中，1pc=16px。

3.6.2 颜色值

网页中可使用颜色名称、十六进制、或RGB份量等方式来表示颜色，各类表示方式如表3-2所示。

表3-2网页颜色

表示方法	含义	示例
颜色名	使用系统预先定义好的颜色名称表示颜色，如red/green/blue分别表示红绿蓝。	a:link{color:gray;} 活动超连接颜色为灰色
十六进制	使用十六进制表示颜色，格式为#RRGGBB，RR表示红色份量值，GG表示绿色份量值，BB表示蓝色份量值。	font-color:#ff0000 字体颜色为红色 background-color:#800080 背景色为紫色
RGB份量	rgb(RR,GG,BB)，RR表示红色份量值，GG表示绿色份量值，BB表示蓝色份量值，能够用数值或百分比形式表示。	color:rgb(255,0,0); 红色 color:rgb(80%,0,0); 暗红

通常状况下，网页的配置以不超过四种颜色为宜，过多的颜色反而会拔苗助长。可根据网站的功能肯定一种主基调色，例如用红色做为政治宣传活动的网站的基调色。

3.6.3 字体属性

1．font-family属性

用来设置HTML元素的字体列表，可设置多个值，浏览器由前向后依次选择字体，若是一个网站服务器中没有安装前一种字体，则显示下一个字体。

本章范例font-family.htm定义了三个字体样式：

h3 {font-family: “微软雅黑隶书”}

p {font-family: 黑体}

p.fonder {font-family:“ 方正姚体宋体”}

若是服务器中安装有“微软雅黑”，没有“方正姚体”，则h3显示的字体为“微软雅黑”，p.fonder显示的字体为宋体。效果如图3-12所示。

图3-12　 font-family属性

2．font-size属性

用来控制字体显示的大小，取值有相对取值和绝对取值几种方式，相对取值可以使用百分比或相对值larger、x-large、small、smaller等，绝对取值是指使用绝对长度单位，如px、pt等。

本章范例font-size.htm定义了下列几种字号：

h1.small{font-size:small;}

.size_a{font-size: 20px;}

.size_b{font-size: 27px;}

.size_c{font-size: 100%;}

页面效果如图3-13所示，从图中能够看出，相对值是根据系统默认值计算出来的，请读者观察h1系统默认值及p默认值差异，以及p和h1使用相对值的显示效果。

图3-13　 font-size属性

3．font-style属性

用来设置指定元素的显示字形样式，font-style属性有normal（普通）、italic（斜体）、oblique（倾斜）三种取值，默认值为normal。

例：font-style.htm

body{font-size:24px;}

p.italic {font-style: italic}

p.normal {font-style: normal}

p.oblique {font-style: oblique}

对应显示效果如图3-14所示。

图3-14　 font-style属性

4．font-weight属性

设置字体的粗细，属性取值可为normal、bold、bolder、light、lighter、100、200、…900，100至900依次从最细渐变到最粗。

例：font-weight.htm

p.normal {font-weight: normal;}

p.thick {font-weight: bold;}

p.thicker {font-weight: 900;}

5．font-variant属性

设置字型异体，具备nomal与small-caps两种取值。

例：font-variant.htm

p.normal {font-variant: normal;}

p.small {font-variant: small-caps;}

上例中small-caps将段落中的小写字母显示成大写字母。

请读者注意，small-caps只是将小字字母显示成大写格式，但不是字母转换，本质上还是小写字母，读者能够复制页面中的文字粘贴到其余地方进行检验。

6．font属性

设置字体属性的一种简略写法，设置时能够省略某些属性，应按font-weight、font-variant、font-style、font-size、font-family的顺序依次出现。

例：font.htm

p { font: italic small-caps 900 22px arial; }

3.6.4 文本属性

文本属性用于控制文本的段落格式，包括字符间距(letter-spacing)、文字间距(word-spacing)、行间距(line-height)、文本水平对齐(text-align)、文本垂直(vertical-align)、文本修饰(text-decoration)、文本缩进(text-indent)、文本转换(text-transform)等属性。

1． letter-spacing属性

设置字符间距，属性值可为具体长度，并可取负值，用来紧缩字符间距。

例：text_letter-spacing.htm

h1 {letter-spacing: -3px;}

h4 {letter-spacing: 12.5px;}

2．word-spacing属性

设置文本中单词(汉字)间的距离。

例：text_word-spacing.htm

p.normal {word-spacing: normal;}

p.length {word-spacing: 1.5 cm;}

3．line-height属性

控制标记符中文本行高。其取值能够是数字、长度或百分比，normal为默认值。如取值为数字，则表示行高为当前设置字号的倍数。例如，div{font-size:13px；line-height:2;}，则行高为13px*2=27px。

例：text_line-height.htm

div{font-size:16px;line-height:2;}

div.thin{font-size:16px;line-height:12px;}

4．text-decoration属性

文本修饰属性，包括none、下划线(underline) 、上划线(overline) 、删除线(line-through )以及闪烁(blink)等值，none为默认值，IE中不支持blink效果，在Firefox浏览器中能够看到h4标签的闪烁效果。

例：text-decoration.htm

h1 {text-decoration: overline;}

h2 {text-decoration: line-through;}

h3 {text-decoration: underline;}

h4 {text-decoration:blink;}

a {text-decoration: none;}

5．text-align/vertical-align属性

设置文本的水平对齐/垂直对齐，text-align取值为left、right、center、justify，默认值为left，vertical-align的取值为baseline、sub、super、top、text-top、middle、bottom、text-bottom等值，baseline为默认值。

6．text-transform属性

用来设置文本格式转换，取值有none(默认值)、capitalize(首字母大写)、uppercase(字母大写)、lowercase(字母小写)。与font-variant同样，text-transform并无真正将字母进行大小写转换，只是文本的显示形式上发生改变。

例：text-transform.htm

p.uppercase {text-transform: uppercase;}

p.lowercase {text-transform: lowercase;}

p.capitalize {text-transform: capitalize;}

7．text-indent属性

设置首行缩进，取值能够为数值或百分比，可取正值或负值，默认值为0，表示无缩进。

例：text-indent.htm

p {text-indent: 25px;}

p.Chinese{text-indent:2em; font-size:27px;}

3.6.5 颜色和背景

1．颜色属性

例：color.htm

h1 {color: #00ff00}

h2 {color: #dda0dd}

p {color: rgb(0,0,255)}

2．背景属性

网页中能够设置背景颜色background-color和背景图案background-image属性。

例：background-color.htm

div{background-color:blue; margin:10px; padding:10px; width:200px;}

span.highlight

{

background-color:yellow;

}

网页中的div背景设成蓝色，类样式highlight将span标签的背景设置成黄色，页面效果如图3-15所示。

图3-15　 background-color属性

background-image能够为HTML标签指定背景图片，url用来设置背景图片路径，通常来讲，网页背景不须要和页面等大，经过background-repeat实现图片在页面中的平铺，从而节省带宽，background-repeat有repeat(水平与垂直平铺)、repeat-x(水平方向平铺)、repeat-y(垂直方向平铺)、no-repeat(不平铺)等取值方式，其中repeat为默认值。

background-attachment属性控制指定的背景图案是否跟随内容一块儿滚动，取值为scroll、fixed，默认值为scroll。

background-position属性用于设置指定背景图案的最初位置。

例：background-image.htm

div

{

background-image:

url(images/bg01.jpg);

background-repeat:repeat-x;

background-attachment:scroll;

height:400px;

}

上例中设置div标签的背景图片为images/bg01.jpg，水平方向平铺，拉动滚动条时，背景图片随内容一齐滚动。页面效果如图3-16所示。

图3-16　 background-image属性

当同时设置background-color和background-image时，背景图案优先显示。

能够经过background属性一次性设置背景颜色和图案及其属性。

例：background.htm

body

{

background: #00ff00 url(images/eg_background3.jpg) no-repeat fixed center;

}

上述代码将页面背景设置成绿色，并设置居中、不平铺的背景图片，页面效果如图3-17所示。

图3-17　 background属性

3.6.6 定位属性

定位属性用于控制元素在页面上的位置，实现页面内元素之间的重叠。

1．position属性

设置元素在页面上的定位方式，取值能够是static(表示按HTML格式规则正常定位)、relative(相对定位，元素将定位在Web页上前一个元素的末端位置)、absolute(绝对定位，元素将定位在框架或浏览器窗口自己左上角的绝对坐标位置)，默认值为static。

2．top和left属性

设置某个元素与其余元素之间的距离，按像素来设定元素位置往下或往右的距离。

下面代码中样式类bigheight可把段落的顶部位置控制在上一级元素的边缘的右下方50像素处。

例：position-top_left.htm

p.bigheight{position:relative;top:100px; left:50px;}

3．z-index属性

解决元素的重叠问题，至关于某些图像处理软件中“层”的概念。取值为大于等于-1的天然数，z-index值设为-1能够实现<img>标签的背景效果。

例：z-index.htm

img.x

{

position:absolute;

left:0px;

top:0px;

z-index:-1

}

上例代码中img的z-index值为-1，并设置了起始坐标为(0,0)的绝对位置，图片将在其余元素标签的底层，能够做为背景。页面效果如图3-18所示，读者能够修改z-index值，理解z-index的标签重叠概念。

图3-18　 z-index定位属性

巧妙制做元素的定位属性，能够实现一些意想不到的效果，下例代码中使用段落postion与z-index属性实现一种阴影字效果。

例：position.htm

.s1{position:absolute;top:20px;left:30px;z-index:1;width:400;font-size:53px;color:blue}

.s2{position:absolute;top:23px;left:33px;z-index:2;width:450;font-size:53px;color:yellow}

.s3{position:absolute;top:26px;left:36px;z-index:3;width:400;font-size:53px;color:red}

页面效果如图3-19所示。

图3-19　定位属性实现的阴影文字

4．width和height属性

控制元素的宽度和高度。

5．overflow属性

溢出处理，设置当元素内容溢出其区域大小时如何对内容进行管理，取值可为visible、hidden、scroll、auto。

例：position-overfloa.htm

div

{

background-color:#00FFFF;

width:150px;

height:150px;

overflow: scroll

}

上例中，div的宽度与高度都设成150像素，overflow设成scroll，当区域内文本超过div的大小，div会出现滚动条。

3.6.7 浮动属性与文档流

CSS浮动属性容许网页制做者将文本放在一个元素的周围，浮动属性为float和clear两种。

1．float属性，将元素的内容浮动到页面的左边缘或右边缘，取值为left、right、none，默认值为none。

2．clear属性，指定一个元素是否容许有元素漂浮在它的旁边，取值为none、left、right、both，默认值none。

例：position-float.htm

img{float:left; width:60px; height:60px;}

img.right{float:right;}

p{font-size:18px; }

p.ss{clear:right;}

上述代码中，样式img浮动属性为left，浮动在页面的左边，若是跟在它后面的段落容许其余元素浮动在其旁边，能够实现一种图文混排的效果，如图3-20所示。

图3-20　float属性

文档流，Web页面使用流式页面，页面内的元素按顺序自动排列在文档流中。HTML标签在文档流内有两种基本的占位方式，级块占位和行内占位。

级块元素，单独在文档流中占一行。div标签是一种典型的级块占位，后面的div标签与前一个div处于不一样的行中，除非使用浮动样式使它脱离正常的文档流。

行内元素，与其余元素共同占用文档流的一行。span标签是一种典型的行内元素。

例：document-flow.htm

<span id="span1">行内元素span1<img src="images/left_arrow.gif"></span>

读者能够修改示例文档中各个标签的float属性，观察文档流的变化。

3.6.8 list属性

1．list-style-image属性

将图像设置为列表项标记，取值为none或url。

2．list-style-position属性

设置列表中列表项标记被放置的位置，取值为inside、outside。

3．list-style-type属性

设置或检索对象的列表项所使用的预设标记。若 list-style-image 属性值为 none 或指定 url 地址的图片不能被显示时，此属性将发生做用。

W3C为list-style-type提供将近20种取值，经常使用取值以下：none(不使用项目符号)、disc(实心圆)、circle(空心圆)、square(实心方块)、 decimal(阿拉伯数字)、 lower-roman(小写罗马数字)、 upper-roman(大写罗马数字)、 lower-alpha(小写英文字母)、upper-alpha(大写英文字母)等值，默认值为disc。

上述属性可以使用list-style一次设置完成。

例：list.htm

{

list-style-image:url(images/dot.gif); list-style-position:inside; list-style-type:disc;

}

3.6.9 cursor 鼠标属性

用来设置鼠标的不一样形状，鼠标属性取值以下，具体效果试运行范例cursor.htm。

url 需要使用自定义光标的URL，通常图片格式为jpg

default 默认光标（一般是一个箭头）

auto 默认。浏览器设置一种光标。

crosshair 光标呈现为十字线。

pointer 光标呈现为指示某个连接的指针（一只手）

move 此光标可指示某对象可被移动

e-resize 此光标可指示某个矩形框的边缘可被向右（东）移动

ne-resize 此光标可指示某个矩形框的边缘可被向上及向右移动（北/东）

nw-resize 此光标可指示某个矩形框的边缘可被向上及向左移动（北/西）

n-resize 此光标可指示某个矩形框的边缘可被向上（北）移动

se-resize 此光标可指示某个矩形框的边缘可被向下及向右移动（南/东）

sw-resize 此光标可指示某个矩形框的边缘可被向下及向左移动（南/西）

s-resize 此光标可指示某个矩形框的边缘可被向下移动（南）

w-resize 此光标可指示某个矩形框的边缘可被向左移动（西）

text 此光标可指示文本

wait 此光标可指示程序正忙（一般是一只表或沙漏）

help 此光标可指示可用的帮助（一般是一个问号或一个气球）

3.6.10 边框属性

1．边界属性margin

margin-left、margin-right、margin-top、margin-bottom分别设置页面元素左、右、上、下边界的宽度，取值能够为长度、百分比或auto。

也可使用margin同时设置四个方向的边界宽度，四个值按顺时针方向依次表示上、右、下、左边界的值，使用margin方法设置边框值也可使用省略方式，含义以下：

1个值，表示上、右、下、左四个边的边界；

2个值，第1个值表示上下边框，第2个值表示左右边框；

3个值，第1个值表示上边框，第2个值表示左右边框，第3个值表示下边界。

例：border-margin.htm

div.margin {margin: 1cm 2cm 75px 4cm}

代码中样式类margin定义了div的上、右、下、左四个边框分别是1、2、3、4厘米，如图3-21所示。

图3-21　margin边界

2．边框属性

边框宽度

border-left-width、border -right-width、border -top-width、border -bottom-width分别用来设置左、右、上、下4个边框的宽度，取值能够是thin、medium、thick、length、medium或具体像素值。

使用border-width能够同时设置四个方向的边框宽度。

边框颜色：border-left-color、border -right-color、border -top-color、border -bottom-color分别用来设置左、右、上、下4个边框的颜色。

使用border-color能够同时设置四个方向的边框颜色。

边框样式：border-left-style、border -right-style、border -top-style、border -bottom-style分别用来设置左、右、上、下4个边框的样式，取值能够为none、dotted、dashed、solid、double、groove、ridge、inset、outset，默认值为none。

例：border-style.htm

div{width:60px; height:40px; float:left; margin:10px; border-width:5px;}

#dashed{border-style:dashed;}

#dotted{border-style:dotted;}

#double{border-style:double;}

#groove{border-style:groove;}

#hidden{border-style:hidden;}

#inset{border-style:inset;}

#none{border-style:none;}

#outset{border-style:outset;}

#ridge{border-style:ridge;}

#solid{border-style:solid;}

border-style能够同时设置四个方向的边框样式。早期IE版本对border-style的支持并不完善，在Firefox浏览器中各类边框样式如图3-22所示。

图3-22　border-style属性

边框的全部属性可使用border属性完成，而且宽度、颜色和样式没有顺序要求。

3．填充属性padding

padding-left、 padding-right、 padding-top 、padding-bottom属性用于设置左、右、上、下填充区的宽度。

也可以使用padding属性同时设置四个方向的填充宽度。

例：border-padding.htm

#content {margin:0px; background-color:#FF0000;}

#father{padding: 10px 20px 30px 40px; border:solid 1px;}

本实例中，一个id为father的div内嵌了一个id为content的div，样式#father定义了外层div的padding值，上、右、下、左的padding值分别为10px、20px、30px和40px， #content样式定了内部div，因为边界被设为0，内部div与外部div之间的间隙就是外部div的padding值，页面效果如图3-23所示。

图3-23　padding属性

3.7 CSS盒模型

盒模型是Web页面一个很是重要的概念，网页文档流中的全部元素均可以当作是一个盒子，每一个盒子在页面中占据必定的空间。

能够经过一幅画来理解盒模型，对于挂在墙上的一幅画来讲，有画框，画与画框之间有距离，画框与画框之间也会有必定距离，即外边距，在网页盒模型中，外边距(margin)、边框(border)、内边距(padding)以及盒子的长(width)与高(height)共同组成了盒子模型，如图3-24所示。

图3-24　盒模型

例：box-model.html

<html>

<head>

body{margin:0px;padding:0px;text-align:left;}

#content {margin:0px; padding:0px; width:100px; height:80px; background-color:#FF0000;}

#father{margin:40px 40px 40px 40px; padding: 10px 20px 30px 40px; border-width:20px; border-style:solid; width:150px;}

#out{margin:0; padding:0px;border:1px solid;}

</style>

</head>

<body>

<div id="content">内容div，margin和border都为0，外框的padding值为10px、20px、30px和40px。</div>

</div>

</body>

</html>

上例中，嵌套了两个div标签，外层div标签的四个方向的外边距margin都为40px，上、右、下、左的内边距padding依次为10px、20px、30px、40px，边框宽度border-width为20px，宽度width为150px，所以，整个外层div所占的宽度应该是左外边距+左边框+左内边距宽度+宽度+右内边距+右边框+右外边距=40px+20px +40px +150px +20px +20px +40px =330px，页面效果如图3-25所示。

图3-25　Firefox中的盒子模型效果

图3-26　IE中的盒子模型效果

须要说明的是，IE对标准文档流与盒模型的支持并不彻底遵循CSS规范，从图3-26能够看到，IE理解的盒子宽度是整个盒子内容与边框和内外边距的长度之和，所以盒子看起来比Firefox要窄。在Firefox中，若是子对象的长度超过父对象，子对象溢出的内容会显示在父对象的框架以外，而IE中若是子对象内容溢出，会自动撑大父对象的长度。严格意义上来讲，IE这种解析是错误的，但因为目前使用IE浏览器的用户群很大，所以，网页开发人员必定要注意CSS样式在不一样浏览器中的区别，最好在IE和Firefox两种浏览器中都进行测试。

本章小结

本章介绍了CSS样式表的优势，详细讲解CSS语法规则、属性设置方法，介绍在HTML标签内嵌、页面内嵌和外联等几种在网页中使用CSS的方法，介绍了HTML标签、类、ID几种样式选择器的做用原理及优先级，并经过各类实例演示了CSS的效果。

习题与实训

1．与直接设置HTML属性控制样式相比，使用CSS有哪些优点？

2．CSS有哪些选择器，试经过实例说明它们的优先级和相互做用原理。

3．试说明CSS盒模型。

4．欲制做一个网页相册，试用CSS说明带边框、多行多列图片列表的实现方式。

项目训练：参考第11章综合项目，设计并制做一个学院网站的首页、二级页面，各级页面应风格一致，使用CSS进行页面校式控制。