使用CSS创建网页PPT课件

.,1,第11章使用CSS创建网页,.,2,本章内容,11.1初识CSS11.2CSS语法基础11.3定义CSS样式的属性11.4编辑CSS样式11.5CSS过滤器11.6综合应用：网页中链接样式的设定,.,3,11.1初识CSS,11.1.1CSS概述11.1.2CSS的作用,.,4,11.1.1CSS概述,CSS是CascadingStyleSheet的缩写，也被称做层叠样式表或级联样式表，是用来控制文档中某一区域外观的一组格式属性。,.,5,11.1.2CSS的作用,1.分离了格式和结构2.控制页面布局3.制作出更小、下载更快的网页4.便于维护及更新大量的网页5.使浏览器成为更友好的界面,.,6,11.2CSS语法基础,11.2.1基本CSS语法11.2.2创建CLASS11.2.3使用ID,.,7,11.2.1基本CSS语法,CSS由标签和属性构成，基本语法如下：HTML标签属性1:属性值;属性2:属性值;属性3:属性值;,.,8,11.2.2创建CLASS,利用CLASS可以创建同一个HTML标签的多种风格，其语法为：标签.类名属性1:属性值;属性2:属性值;属性3:属性值;引用方法为：,.,9,11.2.3使用ID,#id名属性1:属性值;属性2:属性值;属性3:属性值;,.,10,11.3定义CSS样式的属性,.,11,11.3.1文本样式的定义11.3.2背景样式的定义11.3.3区块样式的定义11.3.4方框样式的定义11.3.5边框样式的定义11.3.6列表样式的定义11.3.7定位样式的定义,.,12,11.3.8扩展样式的定义11.3.9创建嵌入式CSS样式11.3.10链接外部样式表11.3.11综合应用：定义网页样式和边框,.,13,11.3.1文本样式的定义,.,14,11.3.2背景样式的定义,.,15,11.3.3区块样式的定义,.,16,11.3.4方框样式的定义,.,17,11.3.5边框样式的定义,.,18,11.3.6列表样式的定义,.,19,11.3.7定位样式的定义,.,20,11.3.8扩展样式的定义,.,21,11.3.9创建嵌入式CSS样式,嵌入式CSS样式是一系列包含在HTML文档文件头部分的style标签内的CSS规则。,.,22,11.3.10链接外部样式表,Dreamweaver提供有链接外部CSS样式的功能，通过该功能可以将其他页面中的样式应用到当前页面中。,.,23,11.3.11综合应用：定义网页样式和边框,.,24,11.4编辑CSS样式,11.4.1修改CSS样式11.4.2删除CSS样式11.4.3复制CSS样式,.,25,11.4.1修改CSS样式,在【CSS样式】面板中可以修改CSS样式。,.,26,11.4.2删除CSS样式,对于不需要的CSS样式可以将其删除。,.,27,11.4.3复制CSS样式,选择右键菜单命令可以复制CSS样式。,.,28,11.5CSS过滤器,11.5.1CSS滤镜概述11.5.2通道（Alpha）滤镜11.5.3模糊（Blur）滤镜11.5.4透明色（Chroma）滤镜11.5.5下落的阴影（DropShadow）滤镜11.5.6水平翻转（FlipH）滤镜和垂直翻转（FlipV）滤镜,.,29,11.5.7光晕（Glow）滤镜11.5.8灰色（Gray）滤镜11.5.9反色（Invert）滤镜11.5.10遮罩（Mask）滤镜11.5.11阴影（Shadow）滤镜11.5.12波浪（Wave）滤镜11.5.13X射线（X-ray）滤镜,.,30,11.5.1CSS滤镜概述,CSS滤镜属性的标识符是filter。与前面介绍的属性定义方法类似，它的书写格式为：filter：filtername（parameters）,.,31,11.5.2通道（Alpha）滤镜,使用Alpha属性可以设置透明度。,.,32,11.5.3模糊（Blur）滤镜,使用Blur属性可以建立模糊的效果。,.,33,11.5.4透明色（Chroma）滤镜,应用Chroma属性可以把指定的颜色设置为透明效果。,.,34,11.5.5下落的阴影（DropShadow）滤镜,应用DropShadow属性建立一种偏移的影像轮廓（即投射阴影）。,.,35,11.5.6水平翻转（FlipH）滤镜和垂直翻转（FlipV）滤镜,应用FlipH属性和FlipV属性完成图像的水平和垂直翻转。,.,36,11.5.7光晕（Glow）滤镜,应用Glow属性为对象的外边界增加光效。,.,37,11.5.8灰色（Gray）滤镜,应用Gray属性降低图片的彩色度。,.,38,11.5.9反色（Invert）滤镜,应用Invert属性将色彩、饱和度以及亮度等值完全翻转建立底片效果。,.,39,11.5.10遮罩（Mask）滤镜,应用Mask属性为一个对象建立透明膜。,.,40,11.5.11阴影（Shadow）滤镜,应用Shadow属性建立一个对象的固体轮廓。,.,41,11.5.12波浪（Wave）滤镜,应用Wave属性在x轴和y轴方向利用正弦波纹打乱图片。,.,42,