CSS样式表的设置与应用.pptx

《CSS样式表的设置与应用.pptx》由会员分享，可在线阅读，更多相关《CSS样式表的设置与应用.pptx（59页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、 中 国 传 媒 大 学Communication University of China网页设计与制作网页设计与制作计算机与网络中心计算机与网络中心 张伟娜张伟娜2023/1/16如何快速实现同一页面上不如何快速实现同一页面上不同内容具有相同的格式？同内容具有相同的格式？2023/1/16如何在不同页面上如何在不同页面上快速实现快速实现相同的格式？相同的格式？2023/1/162023/1/16如何快速改版网页的风格？如何快速改版网页的风格？2023/1/16如何使如何使HTML代码更简单更清洁？代码更简单更清洁？2023/1/16主要内容主要内容lCSS概述概述lCSS样式的创建样式的创建

2、lCSS样式的应用样式的应用lCSS样式的管理样式的管理2023/1/161.什么是什么是CSSlCSS(Cascading Style Sheet,层叠样式表层叠样式表)是是一一组组格式设置规则，用于控制网页样式并允许格式设置规则，用于控制网页样式并允许将网页将网页表示形式表示形式与网页与网页内容内容分离分离的一种标记性的一种标记性语言。语言。l说明：说明：CSSCSS不是一种程序设计语言，而只是一不是一种程序设计语言，而只是一种用于网页排版的标记性语言，是对现有种用于网页排版的标记性语言，是对现有HTMLHTML语言功能的补充和扩展。语言功能的补充和扩展。一、一、CSSCSS概述概述202

3、3/1/16l提高页面浏览速度提高页面浏览速度 l易于维护和改版易于维护和改版l方便灵活地控制网页方便灵活地控制网页外观外观一、一、CSSCSS概述概述2.CSS的作用的作用2023/1/161.CSS样式面板样式面板二、二、CSSCSS样式的样式的创建创建2023/1/162.创建创建CSS规则规则lCSS通过通过对对选择器选择器进行设定进行设定，来实现对网，来实现对网页中的字体、字号、颜色、背景、图像及页中的字体、字号、颜色、背景、图像及其他元素的控制。其他元素的控制。一、一、CSSCSS样式的创建样式的创建2.创建创建CSS规则规则2023/1/16选择器名称选择器名称选择器类型选择器类

4、型二、二、CSSCSS样式的创建样式的创建说明文本区域说明文本区域新建样式表文件新建样式表文件:建立外部样式表建立外部样式表,设置完成后，当前页面会套用新建设置完成后，当前页面会套用新建样式样式；也可以将该样式表链接至他；也可以将该样式表链接至他页面，页面，实现一个样式表文件控制多实现一个样式表文件控制多个页的效果个页的效果仅对该文档仅对该文档:建立内部样式表，设置建立内部样式表，设置完成后，当前页面会套用新建样式完成后，当前页面会套用新建样式 2.CSS规则的创建规则的创建l类选择器：可以应用于页面上的任何元素类选择器：可以应用于页面上的任何元素 l注：注：类名称必须以句点开头，并且可以包含

5、任何类名称必须以句点开头，并且可以包含任何字母和数字组合（例如，字母和数字组合（例如，.myhead1）。）。lID选择器选择器:定义包含特定定义包含特定 ID 属性的标签的格式，属性的标签的格式，仅应用于一个仅应用于一个HTML元素。元素。l注：注：ID 必须以必须以“#”开头，并且可以包含任何字开头，并且可以包含任何字母和数字组合（例如，母和数字组合（例如，#myID1）。）。2023/1/16二、二、CSSCSS样式的创建样式的创建2.CSS规则的创建规则的创建l标签选择器：标签选择器：重新定义特定重新定义特定 HTML 标签的默认标签的默认格式。格式。l复合内容选择器：定义同时影响两个

6、或多个标复合内容选择器：定义同时影响两个或多个标签、类或签、类或 ID 的复合规则。的复合规则。l例如，输入例如，输入 div p，则，则 div 标签内的所有标签内的所有 p 元素都元素都将受此规则影响。将受此规则影响。2023/1/16二、二、CSSCSS样式的创建样式的创建2023/1/16案例案例:唐诗赏析唐诗赏析设置设置index.html样式。样式。l 设置设置“唐诗唐诗”样式样式 标题标题1；隶书；隶书;30px;#993366;居中居中l定义列表样式：定义列表样式：项目符号图像：项目符号图像：image/list.gif;位置：外位置：外;l定义样式，应用于当前页中的定义样式，

7、应用于当前页中的“唐代唐代”、“唐代的唐代的诗人诗人”，并应用于，并应用于ssh.html中的相应文字。中的相应文字。黑体、黑体、16px,行高：行高：30px,#993366二、二、CSS样式的创建样式的创建2023/1/163.CSS CSS基本语法基本语法lCSS的定义由两部分构成：的定义由两部分构成：选择器和声明选择器和声明(声明块声明块)。l选择器选择器(selector)是标识已设置格式是标识已设置格式 元素的术语。（如元素的术语。（如p,h1,类名称或类名称或ID）l声明声明块块用于定义样式元素。声明由两部分组成：用于定义样式元素。声明由两部分组成：属性属性 property（如

8、（如 font-family）和）和值值value（如（如 Helvetica）。）。l如如:.list list-style-image:url(image/list.gif);list-style-position:outside;二、二、CSS样式的创建样式的创建选择器选择器属性属性2023/1/163.CSS CSS基本语法基本语法lCSS 的定义格式的定义格式:selector property l：value l；property 2：value 2；lselector（选择器）表示需要改变样式的（选择器）表示需要改变样式的 HTML 元素元素lproperty表示由表示由CSS标

9、准定义的样式属性标准定义的样式属性l属性是指元素所能够具有的特征。如字体、颜色等。lvalue表示样式属性的值。表示样式属性的值。l属性值是指属性所能拥有的元素值。如Arial字体，red等。二、二、CSS样式的创建样式的创建2023/1/163.CSSCSS基本语法基本语法lCSS样式定义示例样式定义示例 h1 font-family:隶书隶书;font-size:30px;color:#993366;text-align:center;选择器选择器属性属性属性值属性值二、二、CSS样式的创建样式的创建2023/1/164.CSS常用选择器常用选择器lHTML标签选择器标签选择器l类选择器类

10、选择器lID选择器选择器l虚类选择器虚类选择器l具有上下文关系的具有上下文关系的HTML标签选择器标签选择器lCSS的注释的注释(/*/)二、二、CSS样式的创建样式的创建4.CSS常用选择器常用选择器1)HTML标签选择器标签选择器l例例:lbodycolor:red；font-size:36px;lh1color:#0000FF;lp color:#FF00FF;font-family:隶书;lh1,h2,h3color:#ff00002023/1/16二、二、CSSCSS样式的创建样式的创建2023/1/164.CSS常用选择器常用选择器1)HTML标签选择器标签选择器l指定多个属性时，

11、用分号指定多个属性时，用分号;将所有的属性和值分开。将所有的属性和值分开。如：如：pfont-family:楷体楷体_GB2312;color:red;l属性值是多个单词组成时，必须在值前面加双引号属性值是多个单词组成时，必须在值前面加双引号 。如：。如：pfont-family:楷体楷体_GB2312;l定义选择符组（多个选择符定义相同的属性和值时）定义选择符组（多个选择符定义相同的属性和值时），用逗号将不同的，用逗号将不同的selector分开。如分开。如:h1,h2,h3color:#ff0000;二、二、CSS样式的创建样式的创建2023/1/16案例案例:唐诗赏析唐诗赏析设置设置ss

12、h.html样式。样式。l 设置页面中图像边框设置页面中图像边框样式样式重定义重定义img元素，使其边框样式为：元素，使其边框样式为：style:outside;width:thin;color:#993366 观察观察ssh.html页面的变化页面的变化二、二、CSS样式的创建样式的创建4.CSS常用选择器常用选择器2)类选择器类选择器l可以使用类（可以使用类（class）来为单一）来为单一HTML标记符创建标记符创建多个样式。要想将一个类包括到样式定义中，可将多个样式。要想将一个类包括到样式定义中，可将一个句点和一个类名称添加到一个句点和一个类名称添加到selector后，如下所后，如下所

13、示：示：selector.classname property：value；l可以使用任何名称命名类，但通常使用具体含义的可以使用任何名称命名类，但通常使用具体含义的名称。名称。可以是任意英文单词或英文字母（开头）可以是任意英文单词或英文字母（开头）和数字的组合。和数字的组合。P.leftcolor:red;text-align:left;P.rightcolor:blue;text-align:right;.二、二、CSSCSS样式的创建样式的创建4.CSS常用选择器常用选择器2)用户定义的类选择器用户定义的类选择器l几个不同的元素定义为相同的格式几个不同的元素定义为相同的格式,省略省略HT

14、ML标记标记符符例如：.center color:blue;text-align:center;二、二、CSSCSS样式的创建样式的创建2023/1/164.CSS常用选择器常用选择器3)ID选择器选择器lID选择符使用方法跟类选择符使用方法基本相同，选择符使用方法跟类选择符使用方法基本相同，不同之处在于不同之处在于ID选择符只能在选择符只能在HTML页面中使用一页面中使用一次，因此其针对性更强。次，因此其针对性更强。l要将一个要将一个IDID样式包括在样式定义中，应用一个样式包括在样式定义中，应用一个#号号作为作为IDID名称的前缀，如下所示：名称的前缀，如下所示：#IDnameproper

15、ty：valuel定义了定义了IDID样式后，需要在引用该样式的标记符内使样式后，需要在引用该样式的标记符内使用用idid属性。属性。例：例：classid_google.html二、二、CSS样式的创建样式的创建#leftcolor:red;text-align:left;#rightcolor:blue;text-align:right;.2023/1/164.CSS常用选择器常用选择器4)虚类选择器虚类选择器l虚类可以看作是一种特殊的类选择符，是能被支持虚类可以看作是一种特殊的类选择符，是能被支持CSSCSS的浏览器自动识别的特殊选择符。它最大的用的浏览器自动识别的特殊选择符。它最大的用

16、处就是可以在不同状态下定义不同的样式超链接效处就是可以在不同状态下定义不同的样式超链接效果。果。l 将虚类和类组合起来用，就可以在同一个页面中将虚类和类组合起来用，就可以在同一个页面中做几组不同类型的链接效果了。所谓不同类型超链做几组不同类型的链接效果了。所谓不同类型超链接，是指访问过的（接，是指访问过的（a:visiteda:visited）、未访问过的）、未访问过的（a:linka:link）、激活的（）、激活的（a:activea:active）以及鼠标指针悬）以及鼠标指针悬停于其上（停于其上（a:hovera:hover）的这）的这4 4种状态的超链接种状态的超链接二、二、CSS样式的

17、创建样式的创建案例案例:唐诗赏析唐诗赏析设置超链接样式并应用于整个网站：设置超链接样式并应用于整个网站：未访问过：无下划线；未访问过：无下划线；鼠标悬停于其上：颜色：鼠标悬停于其上：颜色：#003399;#003399;有下划线；有下划线；已访问的超链接：颜色：已访问的超链接：颜色：#9900FF;#9900FF;无下划线。无下划线。例思考例思考：如何实现同一网页中两种不同的超链：如何实现同一网页中两种不同的超链接样式接样式?(diffLink.html)2023/1/16二、二、CSS样式的创建样式的创建4.CSS常用选择器常用选择器5)具有上下文关系的具有上下文关系的HTML选择器选择器l

18、如果需要为位于某个标记符内的标记符设置特定的如果需要为位于某个标记符内的标记符设置特定的样式规则，则应将选择器指定为具有上下文关系的样式规则，则应将选择器指定为具有上下文关系的HTML标记符。标记符。l例如，如果只想使位于例如，如果只想使位于H1标记符内的标记符内的A标记符具有标记符具有特定的属性，则应使用以下格式：特定的属性，则应使用以下格式：h1 a color：red l 注意注意h1和和a之间以之间以空格空格分隔。分隔。2023/1/16二、二、CSSCSS样式的创建样式的创建4.CSS常用选择器常用选择器6)CSS的注释的注释l用户可以在用户可以在CSSCSS中插入注释来说明用户代码

19、的意思，中插入注释来说明用户代码的意思，注释有利于用户或别人以后编辑和更改代码时理解注释有利于用户或别人以后编辑和更改代码时理解代码的含义。代码的含义。l在浏览器中，注释是不显示的。在浏览器中，注释是不显示的。lCSSCSS注释以注释以“/*/*”开头，以开头，以“*/”结尾。结尾。2023/1/16二、二、CSSCSS样式的创建样式的创建2023/1/165.设置设置CSS样式属性样式属性二、二、CSS样式的创建样式的创建5.设置设置CSS样式属性样式属性2023/1/16l类型属性类型属性l定义CSS样式的基本字体和类型。ltext-transform:提供了更精确的字符大小写控制。lca

20、pitalize:每个单词的首字母大写luppercase:单词所有字母大写llowercase:所有字母小写lnone:默认的正常状态二、二、CSS样式的创建样式的创建.fontstyle1 font-family:隶书隶书;font-style:oblique;font-variant:small-caps;font-weight:lighter;font-size:36px;5.设置设置CSS样式属性样式属性l背景属性背景属性l定义定义CSS样式的背景，可以对样式的背景，可以对Web页面中的任何页面中的任何元素应用背景属性。元素应用背景属性。l附件附件：用于设置背景图像是固定在它的原始位

21、置，：用于设置背景图像是固定在它的原始位置，还是随内容一起滚动还是随内容一起滚动l水平位置水平位置：用于指定背景图像相对于应用样式的水：用于指定背景图像相对于应用样式的水平位置。平位置。l垂直位置垂直位置：用于指定背景图像相对于应用样式的垂：用于指定背景图像相对于应用样式的垂直位置。直位置。2023/1/16二、二、CSSCSS样式的创建样式的创建.bgcss background-attachment:fixed;background-image:url(wby.jpg);background-repeat:no-repeat;background-position:center;2023/

22、1/16案例案例:唐诗赏析唐诗赏析设置设置fqypsx.html页面背景页面背景背景为背景为bg.jpg,背景固定，不重复，居中显示。背景固定，不重复，居中显示。2023/1/165.设置设置CSS样式属性样式属性l区块属性区块属性l定义标签和属性的间距和对齐。l文字缩进：设置对象中的文本段落的缩进。l空格：设置处理空格的方式。l“正常”表示收缩空白；l“保留”的处理方式与文本被括在pre 标签中一样（即保留空白、包括空格、制表符和回车）；l“不换行”指定仅当遇到br标签时文本才换行。l显示：选择区块中要显示的格式。二、二、CSS样式的创建样式的创建.textstyleline-height:

23、60px;text-transform:capitalize;text-decoration:underline;text-align:center;text-indent:inherit;案例案例:唐诗赏析唐诗赏析格式化格式化fqypsx.html重定义重定义p标记，文本缩进标记，文本缩进2em。2023/1/162023/1/165.设置设置CSS样式属性样式属性l方框属性方框属性l控制元素在页面上的放置方式和属性。控制元素在页面上的放置方式和属性。l属性说明属性说明l浮动：定义元素在哪个方向浮动。l清除：规定元素的哪一侧不允许其他浮动元素。left在左侧不允许浮动元素。right在右侧不

24、允许浮动元素。both在左右两侧均不允许浮动元素。none默认值。允许浮动元素出现在两侧。l填充：用于指定元素的内容与元素边框之间的距离。l边界：用于指定一个元素的边框与另一个元素之间的距离。例：例：float/chunjie.html二、二、CSS样式的创建样式的创建2023/1/165.设置设置CSS样式属性样式属性l边框属性边框属性l对元素周围的边框进行设置（如宽度、颜色、样式对元素周围的边框进行设置（如宽度、颜色、样式等）等）l列表属性列表属性l设置列表属性设置列表属性(如项目符号大小和类型等。如项目符号大小和类型等。)l属性：属性：l外：表示项目文字换行时不缩进；内：表示项目文字换行

25、时缩进。二、二、CSS样式的创建样式的创建2023/1/16案例案例:唐诗赏析唐诗赏析设置边框样式设置边框样式重定义重定义img元素元素，边框，边框样式为样式为：style:outside;width:thin;color:#993366 观察观察ssh.html页面的变化页面的变化设置设置ssh.html中古诗的边框样式中古诗的边框样式 style:outside;width:thin;color:#993366 设置设置index.html中图像的样式中图像的样式图片右对齐，细实线边框，边框颜色为：图片右对齐，细实线边框，边框颜色为：#006699;边界边界:5px5.设置设置CSS样式属

26、性样式属性l定位属性定位属性l确定元素在页面上的定位方式确定元素在页面上的定位方式l扩展属性扩展属性l扩展样式属性包括滤镜、分页和指针选项扩展样式属性包括滤镜、分页和指针选项2023/1/16二、二、CSS样式的创建样式的创建2023/1/166.CSS属性值属性值l使用使用百分比百分比值来指定颜色值来指定颜色(0%0%100%100%)。如：。如：rgb(50%,0,50%)l使用使用整数值整数值指定颜色指定颜色(0255,如果所写的数值超如果所写的数值超出了范围，浏览器会把超出的数值出了范围，浏览器会把超出的数值“切除切除”。如。如 300300被认为是被认为是255255。)如：如：rg

27、b(128,0,128)l使用使用十六进制数十六进制数组定义颜色组定义颜色(前面必须加上前面必须加上#)。如：。如：#FC0EA8l为颜色取名为颜色取名。如：。如：aqua二、二、CSS样式的创建样式的创建颜色的表示方法颜色的表示方法2023/1/166.CSS属性值属性值lCSS定义中可以使用绝对单位和相对单位。定义中可以使用绝对单位和相对单位。l绝对单位绝对单位，在任何分辨率的显示器下，显示出来的都，在任何分辨率的显示器下，显示出来的都是绝对大小，不会发生改变。是绝对大小，不会发生改变。l常用的绝对单位：常用的绝对单位：cm、mm、in(英寸英寸)、pt(点点)、pc(派卡派卡)等。等。l

28、转换关系转换关系l1in=2.54cml1cm=0.3937inl1mm=0.1cml1pt=1/72in=0.3478mml1pc=12pt=1/6in=我国新四号铅字大小二、二、CSS样式的创建样式的创建CSS的单位的单位2023/1/164.CSS属性值属性值l相对单位相对单位相对单位与绝对单位相比，显示大小不是固定的，它所设置相对单位与绝对单位相比，显示大小不是固定的，它所设置的对象受屏幕分辨率、可视区域、浏览器设置、以及相关的对象受屏幕分辨率、可视区域、浏览器设置、以及相关元素的大小等多种因素影响。元素的大小等多种因素影响。l常用的相对单位常用的相对单位lpx,表示具体的像素，其显示

29、大小与显示器的大小及其分辨表示具体的像素，其显示大小与显示器的大小及其分辨率有关。率有关。lem:大写字母大写字母“M”（H）的高度。）的高度。lex:根据所使用字体中小写字母根据所使用字体中小写字母x的高度作为参考。的高度作为参考。l%?%，em都是相对于父标记而言的比例，如果没有设都是相对于父标记而言的比例，如果没有设定父标记的字体大小，则相对于浏览器的默认值。定父标记的字体大小，则相对于浏览器的默认值。二、二、CSS样式的创建样式的创建CSS的单位的单位6.设置设置CSS样式属性样式属性lCSS中使用的常见数据单位中使用的常见数据单位2023/1/16单位单位描述描述示例示例px像素 p

30、ixelwidth:12px;pt点/磅 pointfont-size:9pt;em相对长度单位。相对于当前对象内文本的字体尺寸。font-size:1.2em;ex相对长度单位。相对于字符高度的相对尺寸。font-size:1.2ex;mm毫米font-size:4mm;in英寸feight:12in;2023/1/167.CSS的继承的继承lCSS继承指的是子标签会继承父标签的样式风继承指的是子标签会继承父标签的样式风格格l不是所有的元素都可以从上级元素继承样式，不是所有的元素都可以从上级元素继承样式，如：如：background的属性不能继承。的属性不能继承。例例5:定义定义h1的字体颜

31、色为红色，的字体颜色为红色，h1标签中的标签中的段落段落内容显示的颜色是什么？内容显示的颜色是什么？（inheritCSS.html）二、二、CSS样式的创建样式的创建2023/1/16在网页中使用在网页中使用CSSl在网页中使用在网页中使用CSS有以下三种方式有以下三种方式l行内样式表行内样式表:通常使用通常使用style属性将样式插入到属性将样式插入到HMTL标签中。（不建议使用）标签中。（不建议使用）l内部样式表内部样式表:若干组包括在若干组包括在HTML文档头部的文档头部的style标签中的标签中的CSS规则。规则。l外部样式表外部样式表:一系列存储在一个单独的外部一系列存储在一个单独

32、的外部CSS(.css)文件中的文件中的CSS规则。此文件利用文档头规则。此文件利用文档头部中的链接或部中的链接或import规则被链接到规则被链接到Web站点中站点中的一个或多个页面。的一个或多个页面。三、三、CSS样式的应用样式的应用2023/1/161.1.行内行内样式表样式表l通常使用通常使用stylestyle属性将样式插入到属性将样式插入到HMTLHMTL标签中。标签中。l例子例子:=background-color:blue为什么要为什么要建立这个建立这个WebWeb站点站点l应用场合应用场合:对某个元素单独定义样式对某个元素单独定义样式。(不建议不建议使用使用)三、三、CSS样

33、式的应用样式的应用2.内部样式表内部样式表（1）把插入点放到需要样式的对象，）把插入点放到需要样式的对象，“右键右键”菜单中菜单中“CSS样式样式”或或（2）使用属性面板上的样式列表）使用属性面板上的样式列表2023/1/162023/1/162.内部样式表内部样式表l将将CSSCSS样式代码添加到样式代码添加到与与之间，之间，并且用并且用和和标记进行声明。标记进行声明。l在在中一次可以指定任意多个样式元素。中一次可以指定任意多个样式元素。l应用场合应用场合:应用于单个网页应用于单个网页三、三、CSS样式的应用样式的应用2023/1/163.外部样式表外部样式表l一系列存储在一个单独的外部一系

34、列存储在一个单独的外部CSS(.css)文件文件中的中的CSS规则。利用文档文件头部分中的链接，规则。利用文档文件头部分中的链接，该文件被链接到该文件被链接到Web站点中的一个或多个页面。站点中的一个或多个页面。l引用外部样式表分为引用外部样式表分为链接外部样式表链接外部样式表和和导入外导入外部样式表部样式表两类两类。三、三、CSS样式的应用样式的应用3.外部样式表外部样式表链接外部链接外部css样式表样式表l“窗口窗口”CSS样式样式”l单击单击“附加样式表附加样式表”按钮按钮l选择选择css 文件文件l选择添加方式选择添加方式2023/1/162023/1/163.外部样式表外部样式表l链

35、接外部样式表链接外部样式表:l就是创建当前文档和外部样式表之间的链接。就是创建当前文档和外部样式表之间的链接。l将样式表保存为一个单独的文件，然后在页面中用将样式表保存为一个单独的文件，然后在页面中用link标记符链接到这个样式表文件。标记符链接到这个样式表文件。l用法用法:指定样式表文件指定样式表文件URL定义当前文档与目标文档之间的定义当前文档与目标文档之间的关系关系，在链接样式表文件的情况，在链接样式表文件的情况下，取值是下，取值是“stylesheet”，表，表示在页面中使用外部的样式表示在页面中使用外部的样式表指定被链接文档的指定被链接文档的MIME 类类型，在链接样式表文件的情型，

36、在链接样式表文件的情况下，其值是况下，其值是text/css 三、三、CSS样式的应用样式的应用2023/1/163.外部样式表外部样式表l导入外部样式表导入外部样式表:l导入样式和链接样式基本相同，只不过语法和运作导入样式和链接样式基本相同，只不过语法和运作方式有差别。方式有差别。l导入时用导入时用importimport 三、三、CSS样式的应用样式的应用2023/1/16l使用协议的差别。使用协议的差别。链接样式使用的是链接样式使用的是http协议，而导协议，而导入样式使用的是入样式使用的是URL，可更广泛地应用于各种协议，可更广泛地应用于各种协议，如如http、FTP等。当一个等。当一

37、个CSS样式文件中引用另一个样式文件中引用另一个CSS样式文件时，必须使用导入的方式，而不能使用样式文件时，必须使用导入的方式，而不能使用链接的方式。链接的方式。l功能的差别功能的差别。link标签除了可以加载标签除了可以加载CSS外，还可以外，还可以做很多其它的事情，比如定义做很多其它的事情，比如定义RSS，定义，定义rel连接属连接属性等，性等，import就只能加载就只能加载CSS了。了。三、三、CSS样式的应用样式的应用导入与链接的不同导入与链接的不同2023/1/16导入与链接的不同导入与链接的不同l加载顺序的差别。加载顺序的差别。当一个页面被加载的时候（就是被当一个页面被加载的时候

38、（就是被浏览者浏览的时候），浏览者浏览的时候），link引用的引用的CSS会同时被加载，会同时被加载，而而import引用的引用的CSS 会等到页面全部被下载完再会等到页面全部被下载完再被加载。所以有时候浏览被加载。所以有时候浏览import加载加载CSS的页面时的页面时开始会没有样式（就是闪烁），网速慢的时候还比较开始会没有样式（就是闪烁），网速慢的时候还比较明显。明显。l兼容性的差别兼容性的差别。由于。由于import是是CSS2.1提出的所以提出的所以老的浏览器不支持，老的浏览器不支持，import只有在只有在IE5以上的才能以上的才能识别，而识别，而link标签无此问题。标签无此问题。

39、l使用使用dom控制样式时的差别控制样式时的差别。当使用。当使用javascript控制控制dom去改变样式的时候，只能使用去改变样式的时候，只能使用link标签，因为标签，因为import不是不是dom可以控制的。可以控制的。三、三、CSS样式的应用样式的应用4.CSS样式的优先级样式的优先级l优先级优先级l行内样式行内样式内部样式内部样式外部样式外部样式lID选择器选择器类选择器类选择器标签选择器标签选择器lCSS样式的层叠原则样式的层叠原则如果两个规则优先级如果两个规则优先级相同，则采用相同，则采用“就近原则就近原则”。lCSS样式的特殊标记样式的特殊标记！important可以改可以改

40、变样式的优先级。变样式的优先级。例例:priority.html 2023/1/162023/1/16小结：小结：CSSCSS使用方式原则使用方式原则l当有当有多个多个网页要用到网页要用到CSS样式时，采用外部链样式时，采用外部链接接CSS文件的方式，这样网页的代码大大减少，文件的方式，这样网页的代码大大减少，修改起来非常方便；修改起来非常方便；l只在只在单个单个网页中使用网页中使用CSS样式时，采用内部样样式时，采用内部样式表；式表；l只有在只有在某个网页的一、两个某个网页的一、两个地方才用到地方才用到CSS样样式时，采用内联样式表。式时，采用内联样式表。三、三、CSS样式的应用样式的应用2

41、023/1/16CSS样式的管理样式的管理l删除样式删除样式:在在CSSCSS面板中选中要删除的样式面板中选中要删除的样式,然后单击面板右下解的删除按钮即可然后单击面板右下解的删除按钮即可.l修改样式修改样式:（1）通过属性面板的）通过属性面板的“编辑规则编辑规则”或或（2）通过）通过CSS样式面板样式面板 四、四、CSSCSS样式的管理样式的管理案例欣赏案例欣赏l制作按钮式超链接制作按钮式超链接l制作菜单制作菜单l竖排文字竖排文字2023/1/162023/1/16小结及作业小结及作业lCSS样式的创建样式的创建lCSS样式的应用样式的应用lCSS样式的代码样式的代码作业作业用用CSS美化自己的网页，并在网站建设报告中注美化自己的网页，并在网站建设报告中注明应用明应用CSS的网页，如果是的网页，如果是CSS文件，请注明文件，请注明CSS文件的名称。文件的名称。