网页设计之CSS层叠样式表.ppt

《网页设计之CSS层叠样式表.ppt》由会员分享，可在线阅读，更多相关《网页设计之CSS层叠样式表.ppt（46页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第4讲 CSS层叠样式表内容提要4.1 CSS的基本概念4.2 如何使用Dreamweaver CS3建立CSS4.3 CSS滤镜4.1 CSS的基本概念CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。优点表表现和内容相分离和内容相分离提高提高页面面浏览速度速度效率高、易于效率高、易于维护和改版和改版4.1 CSS的基本概念4.1.1 样式和规则4.1.2 层叠和顺序4.1.1 样式和规则CSSCSS样式样式选择符（选择符（selectorselector）属性（属性（propertiespropertie

2、s）属性值（属性值（valuevalue）格式：选择符格式：选择符属性属性:值值选择符选择符属性属性1:1:值值1;1;属性属性2:2:值值22基本格式：基本格式：复合样式：复合样式：4.1.1 样式和规则（1）单个“HTML标签”作为选择符 单个“HTML标签”：body、table、p等等例：body color:black llbodybody是指页面主体部分是指页面主体部分llcolorcolor是控制文字颜色的属性是控制文字颜色的属性llblackblack是颜色的值是颜色的值效果：页面主体（效果：页面主体（bodybody）中的文字为黑色。）中的文字为黑色。4.1.1 样式和规则属

3、性值由多个单词组成，必须在值上加引号。例1：p font-family:sans serif 效果：定义了段落字体为效果：定义了段落字体为sansserifsansserif需要对一个选择符指定多个属性时，注意使需要对一个选择符指定多个属性时，注意使需要对一个选择符指定多个属性时，注意使需要对一个选择符指定多个属性时，注意使用分号将所有的属性和值分开。用分号将所有的属性和值分开。用分号将所有的属性和值分开。用分号将所有的属性和值分开。例例22：ptext-align:center;color:redptext-align:center;color:red效果：定义了段落居中排列，并且段落中的文

4、字为红色效果：定义了段落居中排列，并且段落中的文字为红色4.1.1 样式和规则为了使所定义的样式表易读，可以采用分行的书写格式。效果：段落排列居中，效果：段落排列居中，段落中文字为黑色，字段落中文字为黑色，字体是体是arialarial例例33：pptext-align:center;text-align:center;color:black;color:black;font-family:arialfont-family:arial4.1.1 样式和规则（2）选择符组 把具有相同属性和值的选择符组合起来书写，用逗号将选择符分开，以减少重复定义。例：h1,h2,h3,h4,h5,h4 colo

5、r:green 效果：组里包括所有的标题元素，每个标题效果：组里包括所有的标题元素，每个标题元素的文字都为绿色。元素的文字都为绿色。p,tablefont-size:9ptp,tablefont-size:9ptpfont-size:9ptpfont-size:9pttablefont-size:9pttablefont-size:9pt效果：段落和表格里的文字尺寸为效果：段落和表格里的文字尺寸为99号字号字。例例22：4.1.1 样式和规则（3）类选择符 把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。类名为英文单词或以英文开头与数字的组合 例1：定义两个不同的

6、段落，一个段落向右对齐，一个居中，可先为段落定义两个类。p.righttext-align:rightp.righttext-align:rightp.centertext-align:centerp.centertext-align:center应用在不同的段落里，在应用在不同的段落里，在HTMLHTML标签里加入标签里加入classclass类参数：类参数：这个段落向右对齐的这个段落向右对齐的这个段落是居中排列的这个段落是居中排列的4.1.1 样式和规则类选择符的另一种用法，在选择符中省略HTML标签名，这样可以把几个不同的元素定义成相同的样式。例2：.center text-align:

7、center 效果：定义了效果：定义了.center.center的类选择符，其表示文字居中排列。的类选择符，其表示文字居中排列。这个标题是居中排列的这个标题是居中排列的这个段落也是居中排列的这个段落也是居中排列的可应用到任何元素上。如：使可应用到任何元素上。如：使h1h1元素（标题元素（标题11）和）和pp元素元素（段落）都归为（段落）都归为“center”center”类，于是这两个元素的样式类，于是这两个元素的样式都可以随着类选择符都可以随着类选择符“.center”.center”而定：而定：4.1.1 样式和规则（4）ID择符 ID选择符用来对这个单一元素定义单独的样。方法：直接以“

8、#”开头，使该ID代表的样式属性可用于各种网页元素。#intro#introfont-size:110%;font-size:110%;font-weight:bold;font-weight:bold;color:#0000ff;color:#0000ff;background-color:transparentbackground-color:transparent例例22：效效果果：定定义义了了一一条条id=introid=intro的的CSSCSS规规则则：字字体体尺尺寸寸为为默默认认尺尺寸寸的的110%110%；粗粗体体；蓝蓝色色；背景颜色透明。背景颜色透明。整个网页文档中的每个整个

9、网页文档中的每个IDID名称必须是唯一的，其必须以一个字母开头，名称必须是唯一的，其必须以一个字母开头，紧跟字母、识字或连字符组成。字母限于紧跟字母、识字或连字符组成。字母限于A-ZA-Z和和a-za-z。注：4.1.1 样式和规则（5）包含选择符可以单独对元素1里包含的元素2定义样式表。例：对表格元素table里包含的链接元素a定义样式表：tableatableafont-size:12pxfont-size:12px此定义对表格内的链接改变了样式，文字大小为此定义对表格内的链接改变了样式，文字大小为1212象素，而表格外的象素，而表格外的链接的文字仍为默认大小。这种方式只对在元素链接的文字

10、仍为默认大小。这种方式只对在元素11里的元素里的元素22定义，对定义，对单独的元素单独的元素11或元素或元素22无定义。无定义。注：4.1.2 层叠和顺序（1）内联样式（Inline styles）在HTML标签内使用style属性定义的，适用于该标签的个别样式。内联样式举例。内联样式举例。内联样式举例。内联样式举例。例例11：使用内联样式，必须使使用内联样式，必须使使用内联样式，必须使使用内联样式，必须使用用用用Content-Style-Type Content-Style-Type 和和和和text/csstext/css对整个文档进行单对整个文档进行单对整个文档进行单对整个文档进行单独

11、的样式表语言声明所以，独的样式表语言声明所以，独的样式表语言声明所以，独的样式表语言声明所以，使用内联使用内联使用内联使用内联CSSCSS的网页设计的网页设计的网页设计的网页设计者必须在者必须在者必须在者必须在headhead部分包括以部分包括以部分包括以部分包括以下标签：下标签：下标签：下标签：meathttp-equiv=Content-Style-Typecontent=text/css4.1.2 层叠和顺序pCenturySchoolbook,serif这段的样式是红色的这段的样式是红色的NewCenturyNewCenturySchoolbookSchoolbook字，如果字体可用的

12、话。字，如果字体可用的话。stylestyle属性可以应用于任意属性可以应用于任意属性可以应用于任意属性可以应用于任意bodybody元素元素元素元素(包括包括包括包括bodybody本身本身本身本身)，除了除了除了除了basefontbasefont、paramparam和和和和scriptscript。stylestyle属性可以将任何属性可以将任何属性可以将任何属性可以将任何数量的样式属性声明当作自己的值，而每个声明用分数量的样式属性声明当作自己的值，而每个声明用分数量的样式属性声明当作自己的值，而每个声明用分数量的样式属性声明当作自己的值，而每个声明用分号隔开。号隔开。号隔开。号隔开。

13、4.1.2 层叠和顺序（2）内部样式（Embedded styles）在与之间用style标签加入css样式定义。适用于指定该网页的样式。style type=”text/css”!-内部样式举例。内部样式举例。例：例：lltypetype属性是指使用属性是指使用何种语法，何种语法，”text/css”text/css”表示表示使用使用CSSCSS语法语法4.1.2 层叠和顺序（3）链接样式（Linked styles）事先建立外部样式表文件（.css），然后在网页文件的与之间用link标签链接该样式表文件。此法使页面内容与版面设计分开，易于管理整个网站的网页风貌。link href=”my.

14、css”链接样式举例。链接样式举例。llrelrel属性是指在页面中使用外部样式表文件属性是指在页面中使用外部样式表文件lltypetype属性是指使用何种语法属性是指使用何种语法llhrefhref属性是指样式表文件的属性是指样式表文件的URLURL地址地址样式表文件可使用任何文本编辑器打开并编辑，样式表文件可使用任何文本编辑器打开并编辑，样式表文件可使用任何文本编辑器打开并编辑，样式表文件可使用任何文本编辑器打开并编辑，内容是具体的内容是具体的内容是具体的内容是具体的CSSCSS样式定义，不包括标签。样式定义，不包括标签。样式定义，不包括标签。样式定义，不包括标签。例如例如例如例如my.c

15、ssmy.css文件的内容如下：文件的内容如下：文件的内容如下：文件的内容如下：pcolor:redpcolor:red例：例：4.1.2 层叠和顺序（4）导入样式（Imported styles）导入样式是指在内部样式定义里，使用import命令引用事先建立的外部样式表文件。!-导入样式举例。导入样式举例。例：例：4.1.2 层叠和顺序5）缺省浏览器样式（Default browser styles）浏览器一般按照上述顺序，由内到外，依次地，继承式地（层叠式地）执行样式表的指令。CSS的妙趣在于能够利用CSS样式规则有效地控制页面对象。如下图，从样式(左)和标签(右)两个角度可见CSS定义的

16、层叠性：从外到内均可定义CSS，并且内层能够继承外层的CSS。4.1.2 层叠和顺序CSS三级别ll外部样式：应用于多个页面，可使用扩展名为外部样式：应用于多个页面，可使用扩展名为.css.css的的外部样式文件（用记事本建立）外部样式文件（用记事本建立）ll内部样式：应用于单个页面，可在网页的内部样式：应用于单个页面，可在网页的与与之间定义一个样式代码块之间定义一个样式代码块；ll内置样式：应用于页面内部明确的标签，可在标签内内置样式：应用于页面内部明确的标签，可在标签内部添加部添加style=.style=.属性属性CSSCSS三级别三级别4.2 如何使用Dreamweaver CS3建立

17、CSS4.2.1 用“CSS面板”建立CSS4.2.2 用“页面属性”新建内部样式4.2.3 用“属性面板”新建内部样式4.2.4 套用CSS4.2.1 用“CSS面板”建立CSS“CSS面板”可以为当前网页新建、管理、编辑和套用内部样式，以及附加外部样式表。例4-1 Dreamweaver CS3新建一个HTML网页，标题为“在线图书”。metahttp-equiv=Content-Typecontent=text/html;charset=utf-4/在线图书在线图书1.1.网络安全技术与应用网络安全技术与应用HTMLHTML代代码码(1)(1)：4.2.1 用“CSS面板”建立CSS2.

18、2.网络安全基础与应用网络安全基础与应用imgsrc=.imagesbook2.jpgwidth=107height=150/畅销指数：畅销指数：详细论述网络安全的基础理论详细论述网络安全的基础理论认真总结作者多年来的网络安全建认真总结作者多年来的网络安全建设经验设经验准确介绍网络安全的应用技术及前准确介绍网络安全的应用技术及前沿成果沿成果畅销指数：畅销指数：作者多年教学与科研工作作者多年教学与科研工作总结总结概念明晰，实例丰富，注概念明晰，实例丰富，注重技能训练重技能训练适合作为网络安全应用课适合作为网络安全应用课程的教材程的教材简明易懂的写作风格，方简明易懂的写作风格，方便读者自学便读者自

19、学HTMLHTML代码代码(2)(2)：4.2.1 用“CSS面板”建立CSS“修改修改修改修改”-“CSS-“CSS样样样样式式式式”“窗口窗口窗口窗口”-“CSS-“CSS样样样样式式式式”“CSS”CSS”1)1)打开打开打开打开CSSCSS面板面板面板面板4.2.1 用“CSS面板”建立CSS2)“新建CSS规则”ll“删除删除CSSCSS规则规则”可以删除当前选定的可以删除当前选定的CSSCSS规则。规则。ll“显示列表视图显示列表视图”可按字母序显示属性，并把已设置的属性显示在前；可按字母序显示属性，并把已设置的属性显示在前；ll“只显示设置属性只显示设置属性”仅显示已设置的属性；

20、仅显示已设置的属性；ll“附加样式表附加样式表”可以链接或导入事先建立的外部样式表文件；可以链接或导入事先建立的外部样式表文件；ll“新建新建CSSCSS规则规则”可以新建一条可以新建一条CSSCSS规则；规则；ll“显示类别视图显示类别视图”可以可以按照按照44个个类别显示属性；类别显示属性；ll“编辑样式编辑样式”可以修改当前选定的可以修改当前选定的CSSCSS规则；规则；“标签标签”-”-输入输入“p”-“p”-选择选择“仅对该文档仅对该文档”-“”-“确定确定”4.2.1 用“CSS面板”建立CSS3)设置此条设置此条CSS规则规则“p“p的的的的CSSCSS规则定义规则定义规则定义规

21、则定义”4)4)“确定确定确定确定”后编辑后编辑后编辑后编辑pp4.2.1 用“CSS面板”建立CSS在“确定”之后，新建的CSS样式自动应用到当前的网页。在例4-1的网页代码里，自动添加了内部样式定义：。至此，可以使用至此，可以使用至此，可以使用至此，可以使用“CSSCSS面板面板面板面板”管理已经建立的管理已经建立的管理已经建立的管理已经建立的CSSCSS。既。既。既。既可以直接修改属性，也可以可以直接修改属性，也可以可以直接修改属性，也可以可以直接修改属性，也可以使用其下边的按钮，或者右使用其下边的按钮，或者右使用其下边的按钮，或者右使用其下边的按钮，或者右键单击其已有的样式名称，键单击

22、其已有的样式名称，键单击其已有的样式名称，键单击其已有的样式名称，执行快捷菜单里的命令。执行快捷菜单里的命令。执行快捷菜单里的命令。执行快捷菜单里的命令。4.2.2 用“页面属性”新建内部样式1)“1)“页面属性页面属性”2)2)确定后嵌入内部样式定义确定后嵌入内部样式定义4.2.3 用“属性面板”新建内部样式“属性面板”用于设置当前选定对象的内部样式属性 例：对于例：对于“在线图书在线图书”网页，选定其中的网页，选定其中的文本文本“1.1.网络安全网络安全技术与应用技术与应用”，设置，设置其字体为其字体为“华文隶书华文隶书”，即可自动新建内，即可自动新建内部样式部样式STYLE1STYLE1

23、。4.2.3 用“属性面板”新建内部样式对所选定的文本“1.网络安全技术与应用”，一方面应用.STYLE1定义的“华文隶书”字体属性，另一方面继承了外层标签p和body定义的文本大小、斜体样式和颜色属性。“CSSCSS面板面板”上可见该样式为上可见该样式为“类类”.STYLE1.STYLE1，如右图。如右图。在在和和之间添加了之间添加了内部样式定义内部样式定义.STYLE1font-family:.STYLE1font-family:华文隶书华文隶书注：注：4.2.4 套用CSSn对于已经建立的CSS样式，可以套用到选定的对象上。例:在上列网页中，选定文本“2.网络安全基础与应用”，右键单击.

24、STYLE1，选择“套用”，或者在下边“属性面板”的“样式”框里选择STYLE1，则.STYLE1即可应用到选定的文本上。如下图:4.3 CSS滤镜lCSS的滤镜（filter）属性 llglowglow：加光辉在附近对象的边外。：加光辉在附近对象的边外。：加光辉在附近对象的边外。：加光辉在附近对象的边外。llblurblur：创建高速度移动效：创建高速度移动效：创建高速度移动效：创建高速度移动效果，即模糊效果。果，即模糊效果。果，即模糊效果。果，即模糊效果。llchromachroma：制作专用颜色透：制作专用颜色透：制作专用颜色透：制作专用颜色透明。明。明。明。llDropShadowDr

25、opShadow：创建对象：创建对象：创建对象：创建对象的固定影子。的固定影子。的固定影子。的固定影子。llFlipHFlipH：创建水平镜像图片。：创建水平镜像图片。：创建水平镜像图片。：创建水平镜像图片。llalphaalpha：设置透明层次：设置透明层次：设置透明层次：设置透明层次llFlipVFlipV：创建垂直镜像图片。：创建垂直镜像图片。：创建垂直镜像图片。：创建垂直镜像图片。llXrayXray：使对象变得像被：使对象变得像被：使对象变得像被：使对象变得像被xx光照射一样。光照射一样。光照射一样。光照射一样。llinvertinvert：反色：反色：反色：反色lllightlig

26、ht：创建光源在对象上。：创建光源在对象上。：创建光源在对象上。：创建光源在对象上。llmaskmask：创建透明掩膜在对象上。：创建透明掩膜在对象上。：创建透明掩膜在对象上。：创建透明掩膜在对象上。llshadowshadow：创建偏移固定影子。：创建偏移固定影子。：创建偏移固定影子。：创建偏移固定影子。llgraygray：把图片灰度化。：把图片灰度化。：把图片灰度化。：把图片灰度化。llwavewave：波纹效果。：波纹效果。：波纹效果。：波纹效果。4.3 CSS滤镜（1）滤镜：Alpha设置透明层次语法：STYLE=filter:Alpha(Opacity=opacity,Finish

27、Opacity=finishopacity，Style=style,StartX=startX，StartY=startY，FinishX=finishX，FinishY=finishY)llStyleStyle：11或或或或22或或或或33llOpacityOpacity：起始值，取值为：起始值，取值为：起始值，取值为：起始值，取值为00100,0100,0为透明，为透明，为透明，为透明，100100为原图。为原图。为原图。为原图。llStartX/StartYStartX/StartY：任意值：任意值：任意值：任意值llFinishOpacityFinishOpacity：目标值。：目标值

28、。：目标值。：目标值。说明：说明：说明：说明：例：例：例：例：filter:Alpha(Opacity=0,FinishOpacity=75,Style=2)filter:Alpha(Opacity=0,FinishOpacity=75,Style=2)4.3 CSS滤镜（2）滤镜：blur创建高速度移动效果，即模糊效果语法：STYLE=filter:Blur(Add=add,Direction=direction,Strength=strength)llStrengthStrength：效果增长的数值，一般：效果增长的数值，一般：效果增长的数值，一般：效果增长的数值，一般55即可即可即可即可

29、llAddAdd：一般为：一般为：一般为：一般为11，或，或，或，或00llDirectionDirection：角度，：角度，：角度，：角度，00315315度，步长为度，步长为度，步长为度，步长为4545度度度度说明：说明：说明：说明：例：例：例：例：filter:Blur(Add=1,Direction=45,Strength=5)filter:Blur(Add=1,Direction=45,Strength=5)4.3 CSS滤镜（3）滤镜：Chroma制作专用颜色透明语法：STYLE=filter:Chroma(Color=color)llcolorcolor：#rrggbb#rrg

30、gbb格式，任意。格式，任意。格式，任意。格式，任意。说明：说明：说明：说明：例：例：例：例：filter:Chroma(Color=#FFFFFF)filter:Chroma(Color=#FFFFFF)4.3 CSS滤镜（4）滤镜：DropShadow创建对象的固定影子语法：STYLE=filter:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive)llOffyOffy：YY轴偏离值。轴偏离值。轴偏离值。轴偏离值。llColor:#rrggbbColor:#rrggbb格式，任意。格式，任意。格式，任意。格式，任意。l

31、lPositivePositive：11或或或或00。llOffxOffx：XX轴偏离值。轴偏离值。轴偏离值。轴偏离值。说明：说明：说明：说明：例：例：例：例：filter:DropShadow(Color=#4499CC,OffX=5,OffY=5,Positive=1)filter:DropShadow(Color=#4499CC,OffX=5,OffY=5,Positive=1)4.3 CSS滤镜（5）滤镜：FlipH创建水平镜像图片语法：STYLE=filter:FlipH 例：filter:FlipH p（4）滤镜：）滤镜：FlipV创建垂直镜像图片创建垂直镜像图片语法：语法：STY

32、LE=filter:FlipV 例：例：filter:FlipV pp（1414）滤镜：）滤镜：）滤镜：）滤镜：XrayXray使对象变得像被使对象变得像被使对象变得像被使对象变得像被xx光照射一样光照射一样光照射一样光照射一样语法：语法：语法：语法：STYLE=filter:Xray STYLE=filter:Xray 例：例：例：例：filter:Xray1filter:Xray14.3 CSS滤镜（7）滤镜：glow加光辉在附近对象的边外语法：STYLE=filter:Glow(Color=color,Strength=strength)llStrengthStrength：强度：强度：

33、强度：强度(0(0100)100)llColorColor：发光颜色。：发光颜色。：发光颜色。：发光颜色。llFinishOpacityFinishOpacity：目标值。：目标值。：目标值。：目标值。说明：说明：说明：说明：例：例：例：例：filter:Glow(Color=#4499CC,Strength=5)filter:Glow(Color=#4499CC,Strength=5)4.3 CSS滤镜（4）滤镜：gray把图片灰度化语法：STYLE=filter:Gray例：filter:Grayp（9）滤镜：）滤镜：invert反色反色语法：语法：STYLE=filter:Invert

34、例：例：filter:Invert pp（1010）lightlight：创建光源在对象上：创建光源在对象上：创建光源在对象上：创建光源在对象上语法：语法：语法：语法：style=filter:light(enabled=0|1)style=filter:light(enabled=0|1)例：例：例：例：filter:light(enabled=1)filter:light(enabled=1)p（11）滤镜：）滤镜：mask创建透明掩膜在对象上创建透明掩膜在对象上语法：语法：STYLE=filter:Mask(Color=color)例：例：filter:Mask(Color=#FFFFE

35、0)4.3 CSS滤镜（12）滤镜：shadow创建偏移固定影子语法：filter:Shadow(Color=color,Direction=direction)llColorColor：#rrggbb#rrggbb格式。格式。格式。格式。llDirectionDirection：角度，：角度，：角度，：角度，00315315度，步长为度，步长为度，步长为度，步长为4545度。度。度。度。说明：说明：说明：说明：例：例：例：例：filter:Shadow(Color=#4499CC,Direction=135)filter:Shadow(Color=#4499CC,Direction=135)

36、4.3 CSS滤镜（13）滤镜：wave波纹效果语法：filter:Wave(Add=add，Freq=freq，LightStrength=strength，Phase=phase，Strength=strength)llLightStrengthLightStrength：变形百分比。：变形百分比。：变形百分比。：变形百分比。llAddAdd：一般为：一般为：一般为：一般为11，或，或，或，或00。llPhasePhase：角度变形百分比。：角度变形百分比。：角度变形百分比。：角度变形百分比。llFreqFreq：变形值。：变形值。：变形值。：变形值。说明：说明：说明：说明：例：例：例：例

37、：filter:Alpha(Opacity=0,FinishOpacity=75,Style=2)filter:Alpha(Opacity=0,FinishOpacity=75,Style=2)llStrengthStrength：变形强度。：变形强度。：变形强度。：变形强度。4.3 CSS滤镜例4-2 定义和应用CSS滤镜Alpha，为例4-1的网页图书封面1设置透明层次。切换到切换到“代码代码”视图，在第一个视图，在第一个imgimg标签中添加下列内联样式代码：标签中添加下列内联样式代码：style=filter:Alpha(Opacity=0,FinishOpacity=75,Style

38、=2)style=filter:Alpha(Opacity=0,FinishOpacity=75,Style=2)1.1.网络安全技术与应用网络安全技术与应用br/imgsrc=.imagesbook1.jpgwidth=107height=150/畅销指数：畅销指数：4.3 CSS滤镜透明层次效果图：透明层次效果图：4.4 CSS实例标签样式实例类样式实例 ID样式实例 复合样式不同的超级链接利用DIV和CSS布局习题4-1、为什么使用CSS？8-2、如何理解CSS的层叠性？8-3、在网站的哪些地方可以定义CSS？8-4、可以用哪些软件建立和编辑CSS？8-5、在一个网站中，如何定义导入样式、链接样式、内部样式和内联样式，怎样确定各样式的应用顺序？8-8、在多个不同的标签里，如果定义了同一个CSS样式属性，如color，怎样确定该样式属性的应用顺序？8-7、CSS规则的基本格式是什么？8-8、选择器有哪几种，各有什么用途？8-9、CSS滤镜有什么作用，为什么也属于CSS？8-10、如何对网页里的一行文本，如“CSS滤镜阴影”，定义CSS滤镜shadow。The End