《第一讲CSS层叠样式表ppt课件》由会员分享，可在线阅读，更多相关《第一讲CSS层叠样式表ppt课件（86页珍藏版）》请在金锄头文库上搜索。
1、第一讲第一讲 CSS层叠款式表层叠款式表1.1 CSS概述概述1.2 定义定义CSS款式表款式表1.3 CSS常用属性常用属性1.4 CSS关联关联HTML文档的方式文档的方式1.5 在在HTML文档中运用文档中运用CSS1.6 CSS的冲突的冲突学习目的学习目的熟练掌握熟练掌握CSS款式表的定义款式表的定义掌握款式表嵌入掌握款式表嵌入HTML文档的方式文档的方式掌握在掌握在HTML文档中运用文档中运用CSS款式的款式的方式方式1.1 CSS概述概述 CSSCascading Style Sheet，层叠款式表是一种格式化网页层叠款式表是一种格式化网页的规范方式，它扩展了的规范方式，它扩展了
2、HTML 的的功能，使网页设计者可以以更有功能，使网页设计者可以以更有效的方式设置网页格式。效的方式设置网页格式。 特特 点点将格式和构造分别将格式和构造分别以前所末有的才干控制页面规划以前所末有的才干控制页面规划 制造体积更小、下载更快的网页制造体积更小、下载更快的网页可以实现许多网页同时更新可以实现许多网页同时更新运用运用CSS的步骤的步骤定义款式表定义款式表把款式表关联到把款式表关联到HTML文档文档在在HTML文档中运用款式表文档中运用款式表 1.2 定义定义CSS款式款式根本语法根本语法: 选择符选择符 属性名属性名1:属性值属性值1; 属性名属性名2:属性值属性值2; 常用选择符类
3、型常用选择符类型: HTML标记符标记符 自定义的类自定义的类 自定义的自定义的ID 伪类伪类1. HTML标志符标志符 HTML标志符重新定义了HTML标志符的显示效果，定义例如代码如下：h1text-align:center;font-size:30pt;color:blueHTML选择符例如选择符例如2.自定义的类与自定义的类与ID 运用自定义类或ID，可以定义一个通用的款式，以便运用到任何需求的地方。它们的运用需求分别运用到class和id属性，定义例如代码如下： .classnameproperty:value#idnameproperty:value用户定义的类与用户定义的类与ID
4、例如例如3.伪类选择符伪类选择符 伪类是一种特殊的类选择符，它最大的用途是可以对链接在不同形状下定义不同的款式效果，写书方式如下： a:link 设置未访问过的超链接格式a:visited 设置已访问过的超链接格式a:active 设置活动超链接格式a:hover 设置悬停形状的超链接格式伪类选择符例如代码如下：伪类选择符例如代码如下： a:linkcolor:green;text- decoration:nonea:activecolor:blue;text- decoration:nonea:visitedcolor:red;text- decoration:underlinea:hove
5、rcolor:pink; font-style:italic伪类选择符例如伪类选择符例如1.3 CSS常用属性常用属性1.字体属性及其属性值字体属性及其属性值字体属性例如字体属性例如 .text.text font-family: font-family:宋体宋体宋体宋体; font-variant:small-caps font-variant:small-caps font-size:16pt; font-size:16pt; font-style:italic; font-style:italic; font-weight:bolder; font-weight:bolder; 2.文本
6、属性及其属性值文本属性及其属性值文本属性例如文本属性例如.text.text letter-spacing:6px; letter-spacing:6px; line-height:28pt; line-height:28pt; text-decoration:underline; text-decoration:underline; text-align:left; text-align:left; text-indent:44pt; text-indent:44pt; 3.列表属性及其属性值列表属性及其属性值列表属性例如列表属性例如4.颜色和背景属性及其属性值颜色和背景属性及其属性值颜色和
7、背景属性例如颜色和背景属性例如5.CSS区块属性区块属性 区块边框区块边框 区块边距区块边距 区块定位区块定位1)区块边框属性及其属性值区块边框属性及其属性值属属属属 性性性性属性值属性值属性值属性值描描描描 述述述述borderborderColor_valueColor_value、width_valuewidth_value、stylestyle设置边框的颜色、宽度和样设置边框的颜色、宽度和样式式Border-topBorder-topColor_valueColor_value、width_valuewidth_value、stylestyle设置边框的颜色、宽度和样设置边框的颜色、宽
8、度和样式式Border-leftBorder-leftColor_valueColor_value、width_valuewidth_value、stylestyle设置边框的颜色、宽度和样设置边框的颜色、宽度和样式式Border-rightBorder-rightColor_valueColor_value、width_valuewidth_value、stylestyle设置边框的颜色、宽度和样设置边框的颜色、宽度和样式式Border-bottomBorder-bottomColor_valueColor_value、width_valuewidth_value、stylestyle设置边
9、框的颜色、宽度和样设置边框的颜色、宽度和样式式属属属属 性值性值性值性值描描描描 述述述述nonenone设置无边框设置无边框设置无边框设置无边框DottedDotted设置边框由点组成设置边框由点组成设置边框由点组成设置边框由点组成DashDash设置边框由短线组成设置边框由短线组成设置边框由短线组成设置边框由短线组成SolidSolidSolidSolid设置边框为实线设置边框为实线设置边框为实线设置边框为实线DoubleDouble设置边框是双实线设置边框是双实线设置边框是双实线设置边框是双实线GrooveGroove设置边框带有立体感的沟槽设置边框带有立体感的沟槽设置边框带有立体感的沟
10、槽设置边框带有立体感的沟槽RidgeRidge设置边框成脊形设置边框成脊形设置边框成脊形设置边框成脊形InsetInset设置边框内嵌一个立体边框设置边框内嵌一个立体边框设置边框内嵌一个立体边框设置边框内嵌一个立体边框outsetoutset设置边框外嵌一个立体边框设置边框外嵌一个立体边框设置边框外嵌一个立体边框设置边框外嵌一个立体边框边框边框style属性值属性值边框属性例如边框属性例如一个属性可以设置多个属性一个属性可以设置多个属性值，不同的属性值之间运值，不同的属性值之间运用空格间隔用空格间隔2) 区块边距属性及其属性值区块边距属性及其属性值边距属性例如边距属性例如3-1)区块定位之位置
11、与大小属性区块定位之位置与大小属性 CSSCSS区块定位直接决定了网页中各个元素的位置、区块定位直接决定了网页中各个元素的位置、区块定位直接决定了网页中各个元素的位置、区块定位直接决定了网页中各个元素的位置、大小与是否浮动等可视属性。大小与是否浮动等可视属性。大小与是否浮动等可视属性。大小与是否浮动等可视属性。 CSSCSS区块定位有两种方法：相对定位和绝对定位区块定位有两种方法：相对定位和绝对定位区块定位有两种方法：相对定位和绝对定位区块定位有两种方法：相对定位和绝对定位区块定位之位置与大小属性例如区块定位之位置与大小属性例如ppposition:absolute;position:abso
12、lute;top:30px;top:30px;left:50px;left:50px;width:500px;width:500px;height:100px;height:100px; 3-2)区块定位之浮动与去除属性区块定位之浮动与去除属性 float属性将所属标记的显示空间指定为一属性将所属标记的显示空间指定为一个浮动元素，并使其周围对象按一定的方式个浮动元素，并使其周围对象按一定的方式环绕它排列。环绕它排列。 float属性的作用就象图像和表格的属性的作用就象图像和表格的align属属性一样，但可以用到任何元素上。性一样，但可以用到任何元素上。 clear属性的作用是禁止浮动元素出现在
13、所属性的作用是禁止浮动元素出现在所属对象旁边，如果它被放置为与浮动元素相属对象旁边，如果它被放置为与浮动元素相邻，则它将下沉至浮动元素为止。邻，则它将下沉至浮动元素为止。浮动与清除属性浮动与清除属性区块定位之浮动与去除属性例如区块定位之浮动与去除属性例如6. CSS层层 在使用元素定位时，从可视角度讲，不可避免地在使用元素定位时，从可视角度讲，不可避免地会发生两个元素试图同时出现于同一位置的情况。会发生两个元素试图同时出现于同一位置的情况。显示其中一个就会覆盖另外一个。显示其中一个就会覆盖另外一个。 如果将网页的二维空间延伸到三维空间，就会解如果将网页的二维空间延伸到三维空间，就会解决上述元素
14、覆盖问题。决上述元素覆盖问题。在坐标系中，通过增加在坐标系中，通过增加z-轴，可使用二维空间的变轴，可使用二维空间的变为三维空间。为三维空间。在网页中，将沿着在网页中，将沿着z-轴的元素使用轴的元素使用z-index值来代值来代表表通过通过z-index，可以改变网页元素相互重叠的顺序，可以改变网页元素相互重叠的顺序当当CSS区块增加一个区块增加一个z-index属性后，即成为一个属性后，即成为一个层空间层空间层属性及其属性值层属性及其属性值层属性例如层属性例如7.鼠标属性及其属性值鼠标属性及其属性值属属属属 性性性性属性值属性值属性值属性值描描描描 述述述述cursorcursorhandh
15、and设置鼠标为手形状设置鼠标为手形状设置鼠标为手形状设置鼠标为手形状crosshaircrosshair设置鼠标为十字交叉形状设置鼠标为十字交叉形状设置鼠标为十字交叉形状设置鼠标为十字交叉形状texttext设置鼠标为文本选择形状设置鼠标为文本选择形状设置鼠标为文本选择形状设置鼠标为文本选择形状waitwait设置鼠标为设置鼠标为设置鼠标为设置鼠标为WindowsWindows的沙漏形的沙漏形的沙漏形的沙漏形defaultdefault设置鼠标为默认的形状设置鼠标为默认的形状设置鼠标为默认的形状设置鼠标为默认的形状helphelp设置鼠标为带问号的形状设置鼠标为带问号的形状设置鼠标为带问号的
16、形状设置鼠标为带问号的形状e-resizee-resize设置鼠标为指向东的箭头设置鼠标为指向东的箭头设置鼠标为指向东的箭头设置鼠标为指向东的箭头ne-resizene-resize设置鼠标为指向东北的箭头设置鼠标为指向东北的箭头设置鼠标为指向东北的箭头设置鼠标为指向东北的箭头n-resizen-resize设置鼠标为指向北的箭头设置鼠标为指向北的箭头设置鼠标为指向北的箭头设置鼠标为指向北的箭头nw-resizenw-resize设置鼠标为指向西北的箭头设置鼠标为指向西北的箭头设置鼠标为指向西北的箭头设置鼠标为指向西北的箭头w-resizew-resize设置鼠标为指向西的箭头设置鼠标为指向西
17、的箭头设置鼠标为指向西的箭头设置鼠标为指向西的箭头sw-resizesw-resize设置鼠标为指向西南的箭头设置鼠标为指向西南的箭头设置鼠标为指向西南的箭头设置鼠标为指向西南的箭头s-resizes-resize设置鼠标为指向南的箭头设置鼠标为指向南的箭头设置鼠标为指向南的箭头设置鼠标为指向南的箭头se-resizese-resize设置鼠标为指向东南的箭头设置鼠标为指向东南的箭头设置鼠标为指向东南的箭头设置鼠标为指向东南的箭头可以对任何对象使用可以对任何对象使用可以对任何对象使用可以对任何对象使用 cursor CSS cursor CSS属性来改变移动属性来改变移动属性来改变移动属性来改
18、变移动到对象上的鼠标样式到对象上的鼠标样式到对象上的鼠标样式到对象上的鼠标样式鼠标属性例如鼠标属性例如pcursor:hand8.滤镜属性滤镜属性 运用滤镜属性可以把可运用滤镜属性可以把可视化的滤镜和转换效果添视化的滤镜和转换效果添加到一个规范的加到一个规范的HTML元元素中，如图片、文本等对素中，如图片、文本等对象中。对于滤镜和渐变效象中。对于滤镜和渐变效果，前者是根底，后者是果，前者是根底，后者是滤镜效果的不断变化和演滤镜效果的不断变化和演示更替。示更替。常用滤镜常用滤镜alphaalpha滤镜：设置透明层次滤镜：设置透明层次滤镜：设置透明层次滤镜：设置透明层次blurblur滤镜：设置模
19、糊效果滤镜：设置模糊效果滤镜：设置模糊效果滤镜：设置模糊效果flipHflipH、flipVflipV滤镜：设置程度垂直翻转滤镜：设置程度垂直翻转滤镜：设置程度垂直翻转滤镜：设置程度垂直翻转graygray滤镜：设置灰度滤镜：设置灰度滤镜：设置灰度滤镜：设置灰度invertinvert滤镜：将颜色的饱和度及亮度完全反转滤镜：将颜色的饱和度及亮度完全反转滤镜：将颜色的饱和度及亮度完全反转滤镜：将颜色的饱和度及亮度完全反转xrayxray滤镜：设置滤镜：设置滤镜：设置滤镜：设置X X射线效果射线效果射线效果射线效果wavewave滤镜：设置变形效果滤镜：设置变形效果滤镜：设置变形效果滤镜：设置变形
20、效果chromachroma滤镜：设置特定颜色的透明效果滤镜：设置特定颜色的透明效果滤镜：设置特定颜色的透明效果滤镜：设置特定颜色的透明效果glowglow滤镜：设置边缘光晕效果滤镜：设置边缘光晕效果滤镜：设置边缘光晕效果滤镜：设置边缘光晕效果dropshadowdropshadow滤镜：设置阴影效果滤镜：设置阴影效果滤镜：设置阴影效果滤镜：设置阴影效果shadowshadow滤镜：设置渐变阴影效果滤镜：设置渐变阴影效果滤镜：设置渐变阴影效果滤镜：设置渐变阴影效果maskmask滤镜：设置遮罩效果滤镜：设置遮罩效果滤镜：设置遮罩效果滤镜：设置遮罩效果Alpha滤镜滤镜根本语法：根本语法：fil
21、ter:alpha(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,starty=starty,finishx=finishx,finishy=finishy语法解释：语法解释： alpha：用于把一个目的元素与背景：用于把一个目的元素与背景混合，即设置元素的透明度。它是经混合，即设置元素的透明度。它是经过以下参数来实现透明度的设置：过以下参数来实现透明度的设置： 1opacity：设置透明度的程度。取：设置透明度的程度。取值范围为值范围为 0100，0代表完全透明，代表完全透明，100代表完全不透明代
22、表完全不透明 2finishopacity：用于设置渐变终：用于设置渐变终了时的透明度了时的透明度 3style：用于指定透明区域的外形：用于指定透明区域的外形特征，取值为特征，取值为0表一致外形、表一致外形、1表线形、表线形、2表放射状、表放射状、3表长表长方形方形 4startx和和starty：表示渐变效果：表示渐变效果开场的开场的X和和Y坐标坐标 5finishx和和finishy：表渐变效果终：表渐变效果终了的了的X和和Y坐标坐标Alpha滤镜例如滤镜例如imgfilter:alpha(opacity=50);Blur滤镜滤镜根本语法：根本语法：filter:blur(add=tru
23、e|false,direction=direction,strength=strength 语法解释：语法解释： add：用于指定图片能否被改动：用于指定图片能否被改动成印象派的模糊效果，默许取值为成印象派的模糊效果，默许取值为true direction：用于设置模糊的方向。：用于设置模糊的方向。其中其中0度代表垂直向上，然后每度代表垂直向上，然后每45度为一个单位，默许值是向左的度为一个单位，默许值是向左的270度度 strength：表示有多少像素的宽：表示有多少像素的宽度将遭到模糊影响，默许是度将遭到模糊影响，默许是5像素。像素。留意：其只能取整数留意：其只能取整数Blur滤镜例如滤镜
24、例如imgfilter:blur(strength=10);FlipH、FlipV滤镜滤镜根本语法：根本语法： Filter:filph Filter:filpv语法解释：语法解释： filph：设置程度翻转：设置程度翻转 filpv：设置垂直翻转：设置垂直翻转FLIPH FLIPV滤镜例如滤镜例如imgfilter:flipvGray滤镜滤镜根本语法：根本语法： filter:gray语法解释：语法解释： Gray滤镜的作用是将对象中滤镜的作用是将对象中的颜色除去，以变成黑白效果的颜色除去，以变成黑白效果gray滤镜例如滤镜例如imgfilter:grayinvert滤镜滤镜根本语法：根本语
25、法： filter:invert语法解释：语法解释： Invert滤镜的作用是把对象的滤镜的作用是把对象的可可 视化属性全部翻转，包括视化属性全部翻转，包括颜色、饱和度和亮度值，类似颜色、饱和度和亮度值，类似底片效果底片效果invert滤镜例如滤镜例如imgfilter:invertxray滤镜滤镜根本语法：根本语法： filter:xray语法解释：语法解释： Xray滤镜的作用是让对象反滤镜的作用是让对象反映出它的轮廓并把这些轮廓加映出它的轮廓并把这些轮廓加亮，即所谓的亮，即所谓的X光片光片xray 滤镜例如滤镜例如imgfilter:xraywave滤镜滤镜根本语法：根本语法：filte
26、r:wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength语法解释：语法解释： wave：用于设置对象产生垂直的波：用于设置对象产生垂直的波浪效果。它是经过以下参数来实现波浪效果。它是经过以下参数来实现波浪效果的设置：浪效果的设置： 1add：表示能否要把对象按照波：表示能否要把对象按照波形款式打乱，默许是按照波形款式打形款式打乱，默许是按照波形款式打乱，取值除了非乱，取值除了非0数字及数字及true外，其它外，其它值可恣意取值可恣意取 2freq：波纹的频率，也就是指定：波纹的频率，也就是指定在对
27、象上一共需求产生多少个完好的在对象上一共需求产生多少个完好的波纹波纹 3lightstrength：可以对波纹加强：可以对波纹加强光影效果。取值范围是从光影效果。取值范围是从0100的整的整数值数值 4phase：用来设置正弦波的偏移：用来设置正弦波的偏移量，取值范围量，取值范围0100，参数值为波长，参数值为波长的百分比值的百分比值 5strength：表示振幅在小，即扭：表示振幅在小，即扭曲的程度曲的程度wave滤镜例如滤镜例如imgfilter:wave (add=add, freq=6, lightstrength=30 , phase= 0,strength=6)chroma滤镜滤镜
28、根本语法：根本语法：filter:chroma(color=color_value语法解释：语法解释： color_value为对象上的某种颜为对象上的某种颜色，将其设置为透明效果色，将其设置为透明效果 chroma滤镜例如滤镜例如imgfilter:chroma(color=black)dropshadow滤镜滤镜根本语法：根本语法：filter:dropshadow(color=color_value,offx=value,offy=value,positive=value语法解释：语法解释： dropshadow：用于设置对象的：用于设置对象的阴影效果。它是经过以下参数来实阴影效果。它是
29、经过以下参数来实现阴影效果的设置：现阴影效果的设置： 1color：设置阴影颜色：设置阴影颜色 2offx：阴影相对于原始对象的：阴影相对于原始对象的程度位置程度位置 3offy：阴影相对于原始对象的：阴影相对于原始对象的垂直位置垂直位置 4positive：设置阴影的透明，：设置阴影的透明，0为透明，为透明，1为不透明为不透明 dropshadow滤镜例如滤镜例如imgfilter:dropshadow (color=#ffffcc,offx=10,offy=10,positive=1)glow滤镜滤镜根本语法：根本语法：filter:glow(color=color_value,stren
30、gth=value语法解释：语法解释：glow滤镜设置对象产生边缘光晕的模滤镜设置对象产生边缘光晕的模糊效果糊效果Color_value：设置边缘光晕的颜色：设置边缘光晕的颜色strength：设置边缘光晕的强度大小，：设置边缘光晕的强度大小，取值为取值为1255 glow滤镜例如滤镜例如imgfilter:glow (color=#33333,strength=)mask滤镜滤镜根本语法：根本语法：filter:mask(color=color_value语法解释：语法解释：mask滤镜设置对象的屏蔽效果，滤镜设置对象的屏蔽效果，就好象印章一样印出模型的容貌就好象印章一样印出模型的容貌 co
31、lor_value指定某种颜色，来指定某种颜色，来设置遮罩效果设置遮罩效果 code1/mask_filter.htm滤镜例如滤镜例如imgfilter:mask(color=#336699)shadow滤镜滤镜根本语法：根本语法：filter:shadow(color=color_value,direcition=value语法解释：语法解释：shadow滤镜除了具备滤镜除了具备dropshadow滤镜效果外，还具有渐变阴影的效果滤镜效果外，还具有渐变阴影的效果Color_value：设置渐变阴影的颜色：设置渐变阴影的颜色direction：设置阴影的方向，取值为：设置阴影的方向，取值为12
32、55 shadow滤镜例如滤镜例如imgfilter:shadow (color=#336699,direction=) 1.4 CSS关联关联HTML文档的方文档的方式式方式一即运用内联款式定义方式一即运用内联款式定义:在在主体区域内运用主体区域内运用HTML 标志符的标志符的 style 属性，例如：属性，例如： 优点：可修饰单独的标志符优点：可修饰单独的标志符 缺陷：没有发扬缺陷：没有发扬CSS一致设置格式一致设置格式的优势的优势 运用运用style属性例如属性例如在主体内运用在主体内运用HTML 标志符的标志符的 style 属性属性方式二方式二:在头部区域内运用在头部区域内运用sty
33、le标志符将款式表嵌入到标志符将款式表嵌入到HTML文文档中，例如：档中，例如：h1text-align:center;color:blue 优点：有利于一致设置单个网优点：有利于一致设置单个网页的格式页的格式 缺陷：不便一致设置多个网页缺陷：不便一致设置多个网页的格式的格式 运用运用style标志嵌入标志嵌入CSS例如例如 例如阐明：例如阐明：标志用于定义标志用于定义HTML文档内文档内的款式表区域的款式表区域属性属性type=text/css：定义文件的：定义文件的类型是款式表文本类型是款式表文本 ：用于对不支持款式的阅：用于对不支持款式的阅读器隐藏款式表内容读器隐藏款式表内容方式三方式三
34、:在头部区域内的在头部区域内的style标标志对之间运用志对之间运用import导入外部导入外部款式表文件，例如：款式表文件，例如：import url(mycss.css)优点：可设置多个网页的一致格优点：可设置多个网页的一致格 式，常用于网站式，常用于网站 运用运用import引入引入CSS例如例如 例如阐明：例如阐明： 运用运用import 来引入来引入CSS外部文件时，需留外部文件时，需留意：该声明语句必需放在一切款式表的最意：该声明语句必需放在一切款式表的最前面前面方式四方式四:在头区域内运用在头区域内运用link标标志符链接外部文件，例如：志符链接外部文件，例如： 优点：可设置多个
35、网页的一致优点：可设置多个网页的一致格格 式，常用于网站式，常用于网站 运用运用link标志符例如标志符例如例如阐明：例如阐明：标志用于链接一个外部款式表标志用于链接一个外部款式表文件文件属性属性rel=stylesheet：用于定义链接的：用于定义链接的文件和文件和HTML文档之间的关系文档之间的关系属性属性type=text/css：定义文件的类型：定义文件的类型是文本类型的是文本类型的属性属性href：用于指定所链接的：用于指定所链接的CSS文件文件1.5 在在HTML文件中运用文件中运用CSS在在HTML文件中运用文件中运用CSS随款式表定义的选随款式表定义的选择符不同而不同择符不同而
36、不同中选择符是中选择符是HTML标志或伪类时，标志或伪类时，HTML文文件在运用该选择符标志的同时就直接运用件在运用该选择符标志的同时就直接运用了款式表了款式表中选择符是自定义的类或中选择符是自定义的类或ID时，在时，在HTML文档中应分别在需运用它们的地方的标志文档中应分别在需运用它们的地方的标志中运用属性中运用属性class=“类名和类名和id=“ID名名来运用自定义的类和来运用自定义的类和ID在在HTML文件中运用文件中运用CSS例如例如1.6 CSS的冲突的冲突当对同一段文本运用多个当对同一段文本运用多个CSS款式时，款式时，由于这些款式之间能够存在一定的由于这些款式之间能够存在一定的
37、矛盾即冲突，所以在显示时会矛盾即冲突，所以在显示时会出现无法预期的效果出现无法预期的效果为处理为处理CSS冲突问题，阅读器在显示冲突问题，阅读器在显示CSS款式时，普通遵照下页所列出的款式时，普通遵照下页所列出的几个冲突处理规那么几个冲突处理规那么冲突处理规那么冲突处理规那么当两个不同款式运用于同一段文本时，阅当两个不同款式运用于同一段文本时，阅读器将显示这段文本所具有的一切属性，读器将显示这段文本所具有的一切属性，除非定义的两个款式之间有显示上的冲突除非定义的两个款式之间有显示上的冲突当来自不同款式的文本属性在运用到同一当来自不同款式的文本属性在运用到同一段文本产生冲突时，阅读器将按照与文本
38、段文本产生冲突时，阅读器将按照与文本关系的远近来决议显示哪一个属性，近者关系的远近来决议显示哪一个属性，近者优先优先假设假设HTML款式与款式与CSS款式存在矛盾时，款式存在矛盾时，CSS款式具有较高的优先级。款式具有较高的优先级。CSS冲突例如冲突例如这里面的文字将被显示成红色这里面的文字将被显示成红色这里面的文字这里面的文字却是绿色却是绿色这里面的文字也是这里面的文字也是红色红色小小 结结CSS是一种分别格式和构造的格式化网是一种分别格式和构造的格式化网页的规范方式，它扩展了页的规范方式，它扩展了 HTML 的功能，的功能，对网页规划的控制才干前所未有，可实对网页规划的控制才干前所未有，可
39、实现多网页同时更新现多网页同时更新CSS的定义款式是：选择符的定义款式是：选择符 属性名属性名1:属性值属性值1; 属性名属性名2:属性值属性值2; 常用选择符有：常用选择符有：HTML标志符、用户定标志符、用户定义的类、用户定义的义的类、用户定义的ID和伪类和伪类在网页中运用在网页中运用CSS的方式有四种：一是在主体的方式有四种：一是在主体内运用内运用HTML 标志符的标志符的 style 属性；二是在头属性；二是在头区域内运用区域内运用style标志嵌入和运用标志嵌入和运用import 引入引入CSS；三是在头区域内运用；三是在头区域内运用link标志符链接外标志符链接外部文件部文件当款式表定义的选择符运用类或当款式表定义的选择符运用类或ID时，在时，在HTML文档运用文档运用CSS时，必需运用标志的属性时，必需运用标志的属性class或或id思索题思索题CSS是什么？是什么？CSS有哪些特点？有哪些特点？如何来定义如何来定义CSS？定义？定义CSS的选择符类的选择符类型有哪些？型有哪些？在网页中关联在网页中关联CSS的方式有哪些的方式有哪些?如何在如何在HTML文档中运用文档中运用CSS？
