chapter06 网页设计与Web编程教案.ppt

1、第六章 CSS层叠样式表,内容提要,6.1 CSS的基本概念 6.2 如何使用Dreamweaver CS3建立CSS 6.3 CSS滤镜,6.1 CSS的基本概念,6.1.1 样式和规则 6.1.2 层叠和顺序,6.1.1 样式和规则,CSS样式,选择符（selector）,属性（properties）,属性值（value）,格式：选择符 属性 : 值 ,选择符 属性1 : 值1; 属性2 : 值2 ,基本格式：,复合样式：,6.1.1 样式和规则,（1）单个“HTML标签”作为选择符 单个“HTML标签” ： body、table、p等等 例：body color: black,body是

2、指页面主体部分,color是控制文字颜色的属性,black是颜色的值,效果：页面主体（body）中的文字为黑色。,6.1.1 样式和规则,属性值由多个单词组成，必须在值上加引号。 例1：p font-family: sans serif,效果：定义了段落字体为sans serif,需要对一个选择符指定多个属性时，注意使用分号将所有的属性和值分开。 例2：p text-align: center; color: red,效果：定义了段落居中排列，并且段落中的文字为红色,6.1.1 样式和规则,为了使所定义的样式表易读，可以采用分行的书写格式。,效果：段落排列居中，段落中文字为黑色，字体是aria

3、l,例3： p text-align: center; color: black; font-family: arial ,6.1.1 样式和规则,（2）选择符组 把具有相同属性和值的选择符组合起来书写，用逗号将选择符分开，以减少重复定义。 例：h1, h2, h3, h4, h5, h6 color: green ,效果：组里包括所有的标题元素，每个标题元素的文字都为绿色。,p, table font-size: 9pt ,p font-size: 9pt table font-size: 9pt ,效果：段落和表格里的文字尺寸为9号字 。,例2：,6.1.1 样式和规则,（3）类选择符 把

4、相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。 类名为英文单词或以英文开头与数字的组合 例1：定义两个不同的段落，一个段落向右对齐，一个居中，可先为段落定义两个类。,p.right text-align: right p.center text-align: center,应用在不同的段落里，在HTML标签里加入class类参数：, 这个段落向右对齐的 这个段落是居中排列的,6.1.1 样式和规则,类选择符的另一种用法，在选择符中省略HTML标签名，这样可以把几个不同的元素定义成相同的样式。 例2： .center text-align: center,效果：定义

5、了.center的类选择符，其表示文字居中排列。,这个标题是居中排列的 这个段落也是居中排列的,可应用到任何元素上。如：使h1元素（标题1）和p元素（段落）都归为“center”类，于是这两个元素的样式都可以随着类选择符“.center”而定：,6.1.1 样式和规则,（4）ID选择符 ID参数指定了某个单一元素，ID选择符用来对这个单一元素定义单独的样式。 方法一：以标签跟“#ID名称”开头，使该ID代表的样式属性只用于该标签（比如段落标签p）。,p#intro font-size:110%; font-weight:bold; color:#0000ff; background-color

6、:transparent ,例1：, 这个段落应用ID选择符p#intro的样式规则。 ,应用：,6.1.1 样式和规则,方法二：直接以“#”开头，使该ID代表的样式属性可用于各种网页元素。,#intro font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent ,例2：,效果：定义了一条id=intro 的CSS规则：字体尺寸为默认尺寸的110%；粗体；蓝色；背景颜色透明。,整个网页文档中的每个ID名称必须是唯一的，其必须以一个字母开头，紧跟字母、识字或连字符组成。字母限于A-Z和a-z。,注：

7、,6.1.1 样式和规则,（5）包含选择符 可以单独对元素1里包含的元素2定义样式表。 例：对表格元素table里包含的链接元素a定义样式表：,table a font-size: 12px ,此定义对表格内的链接改变了样式，文字大小为12象素，而表格外的链接的文字仍为默认大小。这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义。,注：,6.1.2 层叠和顺序,（1）内联样式（Inline styles） 在HTML标签内使用style属性定义的，适用于该标签的个别样式。, 内联样式举例。 ,例1：,使用内联样式，必须使用Content-Style-Type 和text/css对

8、整个文档进行单独的样式表语言声明所以，使用内联CSS的网页设计者必须在head部分包括以下标签：,6.1.2 层叠和顺序, 这段的样式是红色的New Century Schoolbook字，如果字体可用的话。,style属性可以应用于任意body元素(包括body本身)，除了basefont、param和script。style属性可以将任何数量的样式属性声明当作自己的值，而每个声明用分号隔开。,6.1.2 层叠和顺序,（2）内部样式（Embedded styles） 在与之间用style标签加入css样式定义。适用于指定该网页的样式。, , 内部样式举例。 ,例：,type属性是指使用何种语

9、法，”text/css”表示使用CSS语法,6.1.2 层叠和顺序,（3）链接样式（Linked styles） 事先建立外部样式表文件（.css），然后在网页文件的与之间用link标签链接该样式表文件。此法使页面内容与版面设计分开，易于管理整个网站的网页风貌。, 链接样式举例。 ,rel属性是指在页面中使用外部样式表文件,type属性是指使用何种语法,href属性是指样式表文件的URL地址,样式表文件可使用任何文本编辑器打开并编辑， 内容是具体的CSS样式定义，不包括标签。 例如my.css文件的内容如下：,p color : red ,例：,6.1.2 层叠和顺序,（4）导入样式 （Imp

10、orted styles） 导入样式是指在内部样式定义里，使用import命令引用事先建立的外部样式表文件。, 导入样式举例。 ,例：,6.1.2 层叠和顺序,5）缺省浏览器样式（Default browser styles） 浏览器一般按照上述顺序，由内到外，依次地，继承式地（层叠式地）执行样式表的指令。 CSS的妙趣在于能够利用CSS样式规则有效地控制页面对象。如下图，从样式(左)和标签(右)两个角度可见CSS定义的层叠性：从外到内均可定义CSS，并且内层能够继承外层的CSS。,6.1.2 层叠和顺序,CSS三级别,外部样式：应用于多个页面，可使用扩展名为.css的外部样式文件（用记事本建

11、立）,内部样式：应用于单个页面，可在网页的与之间定义一个样式代码块；,内置样式：应用于页面内部明确的标签，可在标签内部添加style=.属性,CSS三级别,6.2 如何使用Dreamweaver CS3建立CSS,6.2.1 用“CSS面板”建立CSS 6.2.2 用“页面属性”新建内部样式 6.2.3 用“属性面板”新建内部样式 6.2.4 套用CSS,6.2.1 用“CSS面板”建立CSS,“CSS面板”可以为当前网页新建、管理、编辑和套用内部样式，以及附加外部样式表。 例6-1 Dreamweaver CS3新建一个HTML网页，标题为“在线图书”。, 在线图书 1.网络安全技术与应用

12、,HTML代码(1)：,6.2.1 用“CSS面板”建立CSS,2.网络安全基础与应用 畅销指数： 详细论述网络安全的基础理论 认真总结作者多年来的网络安全建设经验 准确介绍网络安全的应用技术及前沿成果 ,畅销指数： 作者多年教学与科研工作总结 概念明晰，实例丰富，注重技能训练 适合作为网络安全应用课程的教材 简明易懂的写作风格，方便读者自学 ,HTML代码(2)：,6.2.1 用“CSS面板”建立CSS,“修改”-“CSS样式”,“窗口”-“CSS样式”,“CSS”,1)打开CSS面板,6.2.1 用“CSS面板”建立CSS,2)“新建CSS规则”,“删除CSS规则”可以删除当前选定的CSS

13、规则。,“显示列表视图”可按字母序显示属性，并把已设置的属性显示在前；,“只显示设置属性”仅显示已设置的属性；,“附加样式表”可以链接或导入事先建立的外部样式表文件；,“新建CSS规则”可以新建一条CSS规则；,“显示类别视图”可以按照8个类别显示属性；,“编辑样式”可以修改当前选定的CSS规则；,“标签”-输入“p”-选择“仅对该文档”-“确定”,6.2.1 用“CSS面板”建立CSS,3)设置此条CSS规则,“p的CSS规则定义 ”,4)“确定”后编辑p,6.2.1 用“CSS面板”建立CSS,在“确定”之后，新建的CSS样式自动应用到当前的网页。在例6-1的网页代码里，自动添加了内部样式

14、定义：。,至此，可以使用“CSS面板”管理已经建立的CSS。既可以直接修改属性，也可以使用其下边的按钮，或者右键单击其已有的样式名称，执行快捷菜单里的命令。,6.2.2 用“页面属性”新建内部样式,1)“页面属性”,2)确定后嵌入内部样式定义,6.2.3 用“属性面板”新建内部样式,“属性面板” 用于设置当前选定对象的内部样式属性,例：对于“在线图书”网页，选定其中的文本“1.网络安全技术与应用”，设置其字体为“华文隶书”，即可自动新建内部样式STYLE1。,6.2.3 用“属性面板”新建内部样式,对所选定的文本“1.网络安全技术与应用”，一方面应用.STYLE1定义的“华文隶书”字体属性，另

15、一方面继承了外层标签p和body定义的文本大小、斜体样式和颜色属性。,“CSS面板”上可见该样式为“类”.STYLE1，如右图。 在和之间添加了内部样式定义.STYLE1 font-family: 华文隶书,注：,6.2.4 套用CSS,对于已经建立的CSS样式，可以套用到选定的对象上。 例:在上列网页中，选定文本“2.网络安全基础与应用”，右键单击.STYLE1，选择“套用”，或者在下边“属性面板”的“样式”框里选择STYLE1，则.STYLE1即可应用到选定的文本上。如下图:,6.3 CSS滤镜,CSS的滤镜（filter）属性,glow：加光辉在附近对象的边外。,blur：创建高速度移动

16、效果，即模糊效果。,chroma：制作专用颜色透明。,DropShadow：创建对象的固定影子。,FlipH：创建水平镜像图片。,alpha：设置透明层次,FlipV：创建垂直镜像图片。,Xray：使对象变得像被x光照射一样。,invert：反色,light：创建光源在对象上。,mask：创建透明掩膜在对象上。,shadow：创建偏移固定影子。,gray：把图片灰度化。,wave：波纹效果。,6.3 CSS滤镜,（1）滤镜：Alpha设置透明层次 语法：STYLE=filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity，Style=s

17、tyle, StartX=startX，StartY=startY，FinishX=finishX，FinishY=finishY),Style：1或2或3,Opacity：起始值，取值为0100, 0为透明，100为原图。,StartX/ StartY ：任意值,FinishOpacity：目标值。,说明：,例：filter:Alpha(Opacity=0,FinishOpacity=75,Style=2),6.3 CSS滤镜,（2）滤镜：blur创建高速度移动效果，即模糊效果 语法：STYLE=filter:Blur(Add = add, Direction = direction, St

18、rength = strength),Strength：效果增长的数值，一般5即可,Add：一般为1，或0,Direction：角度，0315度，步长为45度,说明：,例：filter:Blur(Add=1,Direction=45,Strength=5),6.3 CSS滤镜,（3）滤镜：Chroma制作专用颜色透明 语法：STYLE=filter:Chroma(Color = color),color：#rrggbb格式，任意。,说明：,例：filter:Chroma(Color=#FFFFFF),6.3 CSS滤镜,（4）滤镜：DropShadow创建对象的固定影子 语法：STYLE=fi

19、lter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive),Offy：Y轴偏离值。,Color:#rrggbb格式，任意。,Positive：1或0。,Offx：X轴偏离值。,说明：,例：filter:DropShadow(Color=#6699CC,OffX=5,OffY=5,Positive=1),6.3 CSS滤镜,（5）滤镜：FlipH创建水平镜像图片 语法：STYLE=filter:FlipH 例：filter:FlipH,（6）滤镜：FlipV创建垂直镜像图片 语法：STYLE=filter:FlipV

20、 例：filter:FlipV,（14）滤镜：Xray使对象变得像被x光照射一样 语法：STYLE=filter:Xray 例：filter:Xray 1,6.3 CSS滤镜,（7）滤镜：glow加光辉在附近对象的边外 语法：STYLE=filter:Glow(Color=color, Strength=strength),Strength：强度(0100),Color：发光颜色。,FinishOpacity：目标值。,说明：,例： filter:Glow(Color=#6699CC,Strength=5),6.3 CSS滤镜,（8）滤镜：gray把图片灰度化 语法： STYLE=filter

21、:Gray 例： filter:Gray,（9）滤镜：invert反色 语法：STYLE=filter:Invert 例：filter:Invert,（10）light：创建光源在对象上 语法：style=filter:light(enabled=0 | 1) 例：filter:light(enabled=1),（11）滤镜：mask创建透明掩膜在对象上 语法：STYLE=filter:Mask(Color=color) 例：filter:Mask (Color=#FFFFE0),6.3 CSS滤镜,（12）滤镜：shadow创建偏移固定影子 语法：filter:Shadow(Color=color, Direction=direction),Color：#rrggbb格式。,Direction：角度，0315度，步长为45度。,说明：,例：filter:Shadow (Color=#6699CC, Direction=135),6.3