网页制作第11讲CSS样式表.ppt

《网页制作第11讲CSS样式表.ppt》由会员分享，可在线阅读，更多相关《网页制作第11讲CSS样式表.ppt（18页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页制作第11讲CSS样式表 Still waters run deep.流静水深流静水深,人静心深人静心深 Where there is life,there is hope。有生命必有希望。有生命必有希望1、认识样式表1CSS样式表概念2创建CSS样式3样式表类型4CSS规则定义5.CSS样式结构1.1.CSS样式表概念CSS英文全称是Cascading Style Sheets，中文意思是层叠样式表，简称样式表或者CSS。CSS技术由W3C（World Wide Web Consortium，全球广域网协会）推荐使用，1996年批准了CSS1标准，随后又颁布了CSS2标准，样式表得到了更

2、多的充实，目前绝大多数都是用的CSS2标准。CSS样式表是一系列格式规则的集合，它可以控制网页内容的外观，使得网页内的各文本、图像、表格等对象具有统一的风格，省去了为每个对象单独设置格式的繁琐。使用CSS样式，不仅可以控制一个网页中内容的格式，还可以同时控制多个网页中的内容格式。当CSS样式发生变动时，页面中所有应用该样式的对象的格式都会自动发生改变。通过CSS技术可以有效地对网页布局、字体、颜色、背景和其他对象的显示效果做精准的控制。同时使用CSS可以避免页面中同类对象格式的重复设置，提高了工作效率，减少了页面的负担。1.2创建CSS样式执行【窗口】/【CSS样式】命令，展开【CSS样式】面

3、板，在【CSS样式】面板中单击新建CSS规则按钮 ，打开【新建CSS规则】对话框，在【选择器类别】中选择类型，然后在【名称】选项框中输入名称，单击“确定”按钮后打开定义规则对话框，在【分类】列表中选择【类型】后设置具体的样式内容，如下图所示。1.3样式表类型 样式表根据使用的对象不同，分为3个类别。【类（可用于任何标签）类（可用于任何标签）】：可以创建自定义名称的CSS样式，可将样式规则属性应用于任何页面元素上，所有类样式均以句点(.)开头。【标签（重新定义特定标签的外观）标签（重新定义特定标签的外观）】：可对HTML标签进行重新定义、规范或者扩展其属性，如body，h1，h2，h3，ul，l

4、i等标签。当创建或更改CSS样式时，所有使用该标签进行格式化的对象都自动更新。【高级（高级（ID、伪类选择器等）、伪类选择器等）】：该选项会对标签组合或者是含有特定ID属性的标签应用样式。当html中出现用id的元素时，可以使用这个id来设置样式，使用方法与类相似。伪类常用的有a：link，a：visited，a：hover，a：active，分别用来定义链接未点击时、点击后、鼠标移过、激活状态下的样式。1.4CSS规则定义 在代码窗口中编写CSS样式，对新手来说是很困难的事，在Dreamweaver 8 中可以通过可视化的窗口【CSS规则定义】对话框来创建具体的CSS样式，此处提供了8个类别

5、的样式设置。【类型】：主要用于定义页面中文本的字体、大小、颜色、样式和修饰等。【背景】：主要用于定义页面元素的背景色和背景图像。【区块】：主要用于控制页面元素的间距，对齐方式等。【方框】：设置页面中方框的宽、高，四周的填充、边界的粗细。【表框】：设置网页元素的边框效果。【列表】：控制列表内的各项元素。【定位】：为元素设置精准的位置，通过它可以让网页元素浮动。【扩展】：用于设置打印的分页符和视觉效果。1.5CSS样式结构 CSS样式结构主要有选择器和声明两部分组成。选择器是标识格式元素的术语（如 P、H1、类名或 ID）。声明用于定义元素样式。声明由两部分组成：属性（如font-size）和值（

6、如10px）。右面的图中，body、.text、h1都是选择器，介于括号 之间的所有内容都是声明，其中body和h1是标签样式，.text是自定义的类样式。声明声明属性值属性选择器选择器选择器2、应用样式表知识2.1 应用样式表2.2 编辑样式表 2.3 删除样式表2.4 附加外部样式表2.1应用样式表类样式可以应用于页面中的任何元素，与当前文档相关联的所有类样式都显示在【CSS样式】面板中。如果是文本元素则在文本属性面板的【样式】下拉列表中显示所有与文本有关的类样式；若是表格或图像等元素则在对应的属性面板的【类】下拉列表中显示与当前元素相关的类样式。要使用样式时，先选中对象然后直接在下拉列表

7、中选择样式即可。标签样式建立好之后，如果在HTML中使用这些标签的，标签里面的内容就将按照定义好的样式出现。高级样式创建好之后，若当html中出现用id的元素时，可以使用这个id来设置样式，使用方法与类相似。对于伪类选择器同标签样式一样，设置好之后就自动更新样式。2.2编辑样式表展开【CSS样式】面板，在样式列表列表中选中需要编辑的样式，单击鼠标右键，在右键快捷菜单中选择【编辑】命令，打开定义规则对话框，再重新编辑CSS样式，如右图所示。2.3删除样式表 在【CSS样式】面板的样式列表中选中需要删除的样式，单击鼠标右键，在右键快捷菜单中选择【删除】命令项即可，如右图所示。2.4附加外部样式表

8、在【CSS样式】面板中单击附加样式表按钮 ，打开【链接外部样式表】对话框，选择好样式表文件后，返回【链接外部样式表】对话框，选择附加方式，然后“确定”即可。附加外部样式表有两种方式【链接】和【导入】。【链接链接】：链接方式在HTML代码中自动生成一个link href标签，并引用指定样式表的URL，将其定义的CSS规则添加到当前网页。本例的link href标签格式如下：【导入导入】：导入方式将附加样式表的CSS规则嵌入到当前网页的HTML代码中，并且在.标签之间，如同在代码视图编写CSS规则一样。如果附件样式表规则条目较多，一般采用【链接】方式，较为方便。3、CSS滤镜3.1 CSS滤镜的类

9、型3.2 光晕字效果3.3 图片翻转效果3.1CSS滤镜类型 CSS滤镜分为静态滤镜和动态滤镜两大类，其中静态滤镜主要是使元素对象产生各种特殊的静态效果。动态滤镜主要分为混合转换滤镜和显示转换滤镜两种，主要用于处理图像之间的淡入和淡出的效果。静态滤镜主要有如下几个类型。Alpha滤镜：改变页面元素的透明度，可使对象呈现半透明的效果。Blur滤镜：使元素对象显示出风吹模糊的效果。Wave滤镜：使页面对象在垂直方向上产生波浪变形效果。Chroma滤镜：将图片或者文字中的某种颜色变成透明。Dropshadow滤镜：为页面对象添加下落式的阴影效果。Fliph、FlipV滤镜：FlipH使对象产生水平翻

10、转效果；FlipV使对象产生垂直翻转效果。Glow滤镜：使对象的外廓产生光晕效果，一般用于文本对象。Gray滤镜：使一个彩色图片的彩色变为灰色调。Invert滤镜：使图片产生照片底片的效果。Light滤镜：模拟灯光的投射效果。Mask滤镜：利用一个对象在另一个对象上产生图像的遮罩效果。Shadow：添加有渐进感的阴影效果。X-ray：类似X光的效果，使图片只显示其轮廓。3.2光晕字效果 利用Dreamweaver8 的Glow滤镜可以制作出光晕字的特殊效果。Glow有两个参数：Color决定光晕的颜色，可用十六进制代码，也可用颜色单词表示；Strength表示发光的强度，取值范围是0255。3.2图片翻转 利用FlipV滤镜来产生垂直翻转效果，FlipV没有参数。