网页设计之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 样式和规则,CSS样式,选择符（selector）,属性（properties）,属性值（value）,格式：选择符 属性:值,选择符 属性1:值1;属性2:

2、值2,基本格式：,复合样式：,4.1.1 样式和规则,（1）单个“HTML标签”作为选择符 单个“HTML标签”：body、table、p等等例：body color:black,body是指页面主体部分,color是控制文字颜色的属性,black是颜色的值,效果：页面主体（body）中的文字为黑色。,4.1.1 样式和规则,属性值由多个单词组成，必须在值上加引号。例1：p font-family:sans serif,效果：定义了段落字体为sans serif,需要对一个选择符指定多个属性时，注意使用分号将所有的属性和值分开。例2：p text-align:center;color:red,

3、效果：定义了段落居中排列，并且段落中的文字为红色,4.1.1 样式和规则,为了使所定义的样式表易读，可以采用分行的书写格式。,效果：段落排列居中，段落中文字为黑色，字体是arial,例3：p text-align:center;color:black;font-family:arial,4.1.1 样式和规则,（2）选择符组 把具有相同属性和值的选择符组合起来书写，用逗号将选择符分开，以减少重复定义。例：h1,h2,h3,h4,h5,h4 color:green,效果：组里包括所有的标题元素，每个标题元素的文字都为绿色。,p,table font-size:9pt,p font-size:9p

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

5、L标签名，这样可以把几个不同的元素定义成相同的样式。例2：.center text-align:center,效果：定义了.center的类选择符，其表示文字居中排列。,这个标题是居中排列的 这个段落也是居中排列的,可应用到任何元素上。如：使h1元素（标题1）和p元素（段落）都归为“center”类，于是这两个元素的样式都可以随着类选择符“.center”而定：,4.1.1 样式和规则,（4）ID择符 ID选择符用来对这个单一元素定义单独的样。方法：直接以“#”开头，使该ID代表的样式属性可用于各种网页元素。,#intro font-size:110%;font-weight:bold;col

6、or:#0000ff;background-color:transparent,例2：,效果：定义了一条id=intro 的CSS规则：字体尺寸为默认尺寸的110%；粗体；蓝色；背景颜色透明。,整个网页文档中的每个ID名称必须是唯一的，其必须以一个字母开头，紧跟字母、识字或连字符组成。字母限于A-Z和a-z。,注：,4.1.1 样式和规则,（5）包含选择符可以单独对元素1里包含的元素2定义样式表。例：对表格元素table里包含的链接元素a定义样式表：,table a font-size:12px,此定义对表格内的链接改变了样式，文字大小为12象素，而表格外的链接的文字仍为默认大小。这种方式只对

7、在元素1里的元素2定义，对单独的元素1或元素2无定义。,注：,4.1.2 层叠和顺序,（1）内联样式（Inline styles）在HTML标签内使用style属性定义的，适用于该标签的个别样式。,内联样式举例。,例1：,使用内联样式，必须使用Content-Style-Type 和text/css对整个文档进行单独的样式表语言声明所以，使用内联CSS的网页设计者必须在head部分包括以下标签：,4.1.2 层叠和顺序,这段的样式是红色的New Century Schoolbook字，如果字体可用的话。,style属性可以应用于任意body元素(包括body本身)，除了basefont、par

8、am和script。style属性可以将任何数量的样式属性声明当作自己的值，而每个声明用分号隔开。,4.1.2 层叠和顺序,（2）内部样式（Embedded styles）在与之间用style标签加入css样式定义。适用于指定该网页的样式。,内部样式举例。,例：,type属性是指使用何种语法，”text/css”表示使用CSS语法,4.1.2 层叠和顺序,（3）链接样式（Linked styles）事先建立外部样式表文件（.css），然后在网页文件的与之间用link标签链接该样式表文件。此法使页面内容与版面设计分开，易于管理整个网站的网页风貌。,链接样式举例。,rel属性是指在页面中使用外部样

9、式表文件,type属性是指使用何种语法,href属性是指样式表文件的URL地址,样式表文件可使用任何文本编辑器打开并编辑，内容是具体的CSS样式定义，不包括标签。例如my.css文件的内容如下：,p color:red,例：,4.1.2 层叠和顺序,（4）导入样式（Imported styles）导入样式是指在内部样式定义里，使用import命令引用事先建立的外部样式表文件。,导入样式举例。,例：,4.1.2 层叠和顺序,5）缺省浏览器样式（Default browser styles）浏览器一般按照上述顺序，由内到外，依次地，继承式地（层叠式地）执行样式表的指令。CSS的妙趣在于能够利用CS

10、S样式规则有效地控制页面对象。如下图，从样式(左)和标签(右)两个角度可见CSS定义的层叠性：从外到内均可定义CSS，并且内层能够继承外层的CSS。,4.1.2 层叠和顺序,CSS三级别,外部样式：应用于多个页面，可使用扩展名为.css的外部样式文件（用记事本建立）,内部样式：应用于单个页面，可在网页的与之间定义一个样式代码块；,内置样式：应用于页面内部明确的标签，可在标签内部添加style=.属性,CSS三级别,4.2 如何使用Dreamweaver CS3建立CSS,4.2.1 用“CSS面板”建立CSS4.2.2 用“页面属性”新建内部样式4.2.3 用“属性面板”新建内部样式4.2.4

11、 套用CSS,4.2.1 用“CSS面板”建立CSS,“CSS面板”可以为当前网页新建、管理、编辑和套用内部样式，以及附加外部样式表。例4-1 Dreamweaver CS3新建一个HTML网页，标题为“在线图书”。,在线图书 1.网络安全技术与应用,HTML代码(1)：,4.2.1 用“CSS面板”建立CSS,2.网络安全基础与应用 畅销指数：详细论述网络安全的基础理论认真总结作者多年来的网络安全建设经验准确介绍网络安全的应用技术及前沿成果,畅销指数：作者多年教学与科研工作总结 概念明晰，实例丰富，注重技能训练 适合作为网络安全应用课程的教材 简明易懂的写作风格，方便读者自学,HTML代码(

12、2)：,4.2.1 用“CSS面板”建立CSS,“修改”-“CSS样式”,“窗口”-“CSS样式”,“CSS”,1)打开CSS面板,4.2.1 用“CSS面板”建立CSS,2)“新建CSS规则”,“删除CSS规则”可以删除当前选定的CSS规则。,“显示列表视图”可按字母序显示属性，并把已设置的属性显示在前；,“只显示设置属性”仅显示已设置的属性；,“附加样式表”可以链接或导入事先建立的外部样式表文件；,“新建CSS规则”可以新建一条CSS规则；,“显示类别视图”可以按照4个类别显示属性；,“编辑样式”可以修改当前选定的CSS规则；,“标签”-输入“p”-选择“仅对该文档”-“确定”,4.2.1

13、 用“CSS面板”建立CSS,3)设置此条CSS规则,“p的CSS规则定义”,4)“确定”后编辑p,4.2.1 用“CSS面板”建立CSS,在“确定”之后，新建的CSS样式自动应用到当前的网页。在例4-1的网页代码里，自动添加了内部样式定义：。,至此，可以使用“CSS面板”管理已经建立的CSS。既可以直接修改属性，也可以使用其下边的按钮，或者右键单击其已有的样式名称，执行快捷菜单里的命令。,4.2.2 用“页面属性”新建内部样式,1)“页面属性”,2)确定后嵌入内部样式定义,4.2.3 用“属性面板”新建内部样式,“属性面板”用于设置当前选定对象的内部样式属性,例：对于“在线图书”网页，选定其

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

15、“套用”，或者在下边“属性面板”的“样式”框里选择STYLE1，则.STYLE1即可应用到选定的文本上。如下图:,4.3 CSS滤镜,CSS的滤镜（filter）属性,glow：加光辉在附近对象的边外。,blur：创建高速度移动效果，即模糊效果。,chroma：制作专用颜色透明。,DropShadow：创建对象的固定影子。,FlipH：创建水平镜像图片。,alpha：设置透明层次,FlipV：创建垂直镜像图片。,Xray：使对象变得像被x光照射一样。,invert：反色,light：创建光源在对象上。,mask：创建透明掩膜在对象上。,shadow：创建偏移固定影子。,gray：把图片灰度化。

16、,wave：波纹效果。,4.3 CSS滤镜,（1）滤镜：Alpha设置透明层次语法：STYLE=filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity，Style=style,StartX=startX，StartY=startY，FinishX=finishX，FinishY=finishY),Style：1或2或3,Opacity：起始值，取值为0100,0为透明，100为原图。,StartX/StartY：任意值,FinishOpacity：目标值。,说明：,例：filter:Alpha(Opacity=0,FinishOpaci

17、ty=75,Style=2),4.3 CSS滤镜,（2）滤镜：blur创建高速度移动效果，即模糊效果语法：STYLE=filter:Blur(Add=add,Direction=direction,Strength=strength),Strength：效果增长的数值，一般5即可,Add：一般为1，或0,Direction：角度，0315度，步长为45度,说明：,例：filter:Blur(Add=1,Direction=45,Strength=5),4.3 CSS滤镜,（3）滤镜：Chroma制作专用颜色透明语法：STYLE=filter:Chroma(Color=color),color：

18、#rrggbb格式，任意。,说明：,例：filter:Chroma(Color=#FFFFFF),4.3 CSS滤镜,（4）滤镜：DropShadow创建对象的固定影子语法：STYLE=filter:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive),Offy：Y轴偏离值。,Color:#rrggbb格式，任意。,Positive：1或0。,Offx：X轴偏离值。,说明：,例：filter:DropShadow(Color=#4499CC,OffX=5,OffY=5,Positive=1),4.3 CSS滤镜,（5）滤镜：

19、FlipH创建水平镜像图片语法：STYLE=filter:FlipH 例：filter:FlipH,（4）滤镜：FlipV创建垂直镜像图片语法：STYLE=filter:FlipV 例：filter:FlipV,（14）滤镜：Xray使对象变得像被x光照射一样语法：STYLE=filter:Xray 例：filter:Xray 1,4.3 CSS滤镜,（7）滤镜：glow加光辉在附近对象的边外语法：STYLE=filter:Glow(Color=color,Strength=strength),Strength：强度(0100),Color：发光颜色。,FinishOpacity：目标值。,说

20、明：,例：filter:Glow(Color=#4499CC,Strength=5),4.3 CSS滤镜,（4）滤镜：gray把图片灰度化语法：STYLE=filter: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:Mas

21、k(Color=#FFFFE0),4.3 CSS滤镜,（12）滤镜：shadow创建偏移固定影子语法：filter:Shadow(Color=color,Direction=direction),Color：#rrggbb格式。,Direction：角度，0315度，步长为45度。,说明：,例：filter:Shadow(Color=#4499CC,Direction=135),4.3 CSS滤镜,（13）滤镜：wave波纹效果语法：filter:Wave(Add=add，Freq=freq，LightStrength=strength，Phase=phase，Strength=strengt

22、h),LightStrength：变形百分比。,Add：一般为1，或0。,Phase：角度变形百分比。,Freq：变形值。,说明：,例：filter:Alpha(Opacity=0,FinishOpacity=75,Style=2),Strength：变形强度。,4.3 CSS滤镜,例4-2 定义和应用CSS滤镜Alpha，为例4-1的网页图书封面1设置透明层次。,切换到“代码”视图，在第一个img标签中添加下列内联样式代码：,style=filter:Alpha(Opacity=0,FinishOpacity=75,Style=2)1.网络安全技术与应用畅销指数：,4.3 CSS滤镜,透明层

23、次效果图：,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,