《网页制作第11讲CSS样式表.ppt》由会员分享，可在线阅读，更多相关《网页制作第11讲CSS样式表.ppt（18页珍藏版）》请在三一文库上搜索。
1、第十讲 CSS样式表 1、认识样式表 2、应用样式表 3、CSS滤镜,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标准，样式表得到了更多的充实，目前绝大多数都是用的CSS2标准。 CSS样式表是一系列格式规则的集合，它可以控制网页内容的外观，使得网页内的各
2、文本、图像、表格等对象具有统一的风格，省去了为每个对象单独设置格式的繁琐。使用CSS样式，不仅可以控制一个网页中内容的格式，还可以同时控制多个网页中的内容格式。当CSS样式发生变动时，页面中所有应用该样式的对象的格式都会自动发生改变。 通过CSS技术可以有效地对网页布局、字体、颜色、背景和其他对象的显示效果做精准的控制。同时使用CSS可以避免页面中同类对象格式的重复设置，提高了工作效率，减少了页面的负担 。,1.2创建CSS样式,执行【窗口】/【CSS样式】命令，展开【CSS样式】面板，在【CSS样式】面板中单击新建CSS规则按钮 ，打开【新建CSS规则】对话框，在【选择器类别】中选择类型，然
3、后在【名称】选项框中输入名称，单击“确定”按钮后打开定义规则对话框，在【分类】列表中选择【类型】后设置具体的样式内容，如下图所示。,1.3样式表类型,样式表根据使用的对象不同，分为3个类别。 【类（可用于任何标签）】：可以创建自定义名称的CSS样式，可将样式规则属性应用于任何页面元素上，所有类样式均以句点 (.) 开头。 【标签（重新定义特定标签的外观）】：可对HTML标签进行重新定义、规范或者扩展其属性，如body，h1，h2，h3，ul，li等标签。当创建或更改CSS样式时，所有使用该标签进行格式化的对象都自动更新。 【高级（ID、伪类选择器等）】：该选项会对标签组合或者是含有特定ID属性
4、的标签应用样式。当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）和值（如10px）。 右面的图中，body、.text、h1都是选择器，介于括号 之间的所有内容都是声明，其中body和h1是标签样式，.text是自定义的类
6、样式。,声明,声明,属性值,属性,选择器,选择器,选择器,2、应用样式表知识,2.1 应用样式表 2.2 编辑样式表 2.3 删除样式表 2.4 附加外部样式表,2.1应用样式表,类样式可以应用于页面中的任何元素，与当前文档相关联的所有类样式都显示在【CSS样式】面板中。如果是文本元素则在文本属性面板的【样式】下拉列表中显示所有与文本有关的类样式；若是表格或图像等元素则在对应的属性面板的【类】下拉列表中显示与当前元素相关的类样式。要使用样式时，先选中对象然后直接在下拉列表中选择样式即可。 标签样式建立好之后，如果在HTML中使用这些标签的，标签里面的内容就将按照定义好的样式出现。 高级样式创建
7、好之后，若当html中出现用id的元素时，可以使用这个id来设置样式，使用方法与类相似。对于伪类选择器同标签样式一样，设置好之后就自动更新样式 。,2.2编辑样式表,展开【CSS样式】面板，在样式列表列表中选中需要编辑的样式，单击鼠标右键，在右键快捷菜单中选择【编辑】命令，打开定义规则对话框，再重新编辑CSS样式 ，如右图所示。,2.3删除样式表,在【CSS样式】面板的样式列表中选中需要删除的样式，单击鼠标右键，在右键快捷菜单中选择【删除】命令项即可 ，如右图所示。,2.4附加外部样式表,在【CSS样式】面板中单击附加样式表按钮 ，打开【链接外部样式表】对话框 ，选择好样式表文件后，返回【链接
8、外部样式表】对话框 ，选择附加方式，然后“确定”即可。,附加外部样式表有两种方式【链接】和【导入】。 【链接】：链接方式在HTML代码中自动生成一个link href标签，并引用指定样式表的URL，将其定义的CSS规则添加到当前网页。本例的link href标签格式如下： 【导入】：导入方式将附加样式表的CSS规则嵌入到当前网页的HTML代码中，并且在标签之间，如同在代码视图编写CSS规则一样。 如果附件样式表规则条目较多，一般采用【链接】方式，较为方便。,3、CSS滤镜,3.1 CSS滤镜的类型 3.2 光晕字效果 3.3 图片翻转效果,3.1CSS滤镜类型,CSS滤镜分为静态滤镜和动态滤镜
9、两大类，其中静态滤镜主要是使元素对象产生各种特殊的静态效果。动态滤镜主要分为混合转换滤镜和显示转换滤镜两种，主要用于处理图像之间的淡入和淡出的效果。 静态滤镜主要有如下几个类型。 Alpha滤镜：改变页面元素的透明度，可使对象呈现半透明的效果。 Blur滤镜：使元素对象显示出风吹模糊的效果。 Wave滤镜：使页面对象在垂直方向上产生波浪变形效果。 Chroma滤镜：将图片或者文字中的某种颜色变成透明。 Dropshadow滤镜：为页面对象添加下落式的阴影效果。,Fliph、FlipV滤镜：FlipH使对象产生水平翻转效果；FlipV使对象产生垂直翻转效果。 Glow滤镜：使对象的外廓产生光晕效
10、果，一般用于文本对象。 Gray滤镜：使一个彩色图片的彩色变为灰色调。 Invert滤镜：使图片产生照片底片的效果。 Light滤镜：模拟灯光的投射效果。 Mask滤镜：利用一个对象在另一个对象上产生图像的遮罩效果。 Shadow：添加有渐进感的阴影效果。 X-ray：类似X光的效果，使图片只显示其轮廓。,3.2光晕字效果,利用Dreamweaver8 的Glow滤镜可以制作出光晕字的特殊效果 。Glow有两个参数：Color决定光晕的颜色，可用十六进制代码，也可用颜色单词表示；Strength表示发光的强度，取值范围是0255。,3.2图片翻转,利用FlipV滤镜来产生垂直翻转效果 ， FlipV没有参数。,