[工学]CSS样式.ppt

CSS样式面板 Cascading Sytle Sheets 即层叠样式表，简称CSS，它可用于对网页中的字体、字号、颜色、表格以及页面布局等属性进行统一的设置。 利用CSS 样式面板可以查看、创建、编辑和删除CSS 样式，并且可以将外部样式表附加到文档。单击“窗口”→“CSS 样式”菜单命令，或者按 【Shift】+【F11】，可以打开如图6-9所示的“CSS样式”面板。 利用“全部”选项卡可以编辑影响整个文档的所有CSS规则和属性。选择“全部”选项卡时，“CSS样式”面板被分为“所有规则”栏和“属性”栏。在“所有规则”栏中双击某条规则可显示“CSS 规则定义”对话框可进行编辑，在“所有规则”栏中选择某一条规则，在下面的“属性”栏中可编辑该规则的属性，在“所有规则”栏中选择一条，然后单击“CSS 样式”面板右下角中的“编辑样式”按钮，可以对话框以对其进行编辑。 2）“标签”选项用于重定义特定 HTML 标签的默认格式，请择“标签”选项后在“标签”文本框中输入一个 HTML 标签，或从下拉列表中选择一个标签。 3）“高级”选项用于为具体某个标签组合或所有包含特定 Id 属性的标签定义进行格式设置，这时“名称” 2．定义CSS样式 在中可以选定要设置的类型进行CSS 样式的定义。选择“CSS规则定义”对话框 “分类”列表中的各类别可进行不同样式的定义。 （1）定义样式表中文本的属性 选中“CSS规则定义”对话框“分类”列表中的“类型”，这时的对话框如图6-11所示，可用于设置CSS样式的文本类型参数。设置完后，单击“应用”按钮就可以将样式应用到网页中。 （2）定义样式表中的背景属性 选中“CSS规则定义”对话框“分类”列表中的“背景”，这时的对话框如图6-12所示。 ⑴“背景颜色”选项 为被选中的对象添加背景颜色 ⑵“背景图像”选项 为被选中的对象添加背景图像。 （5）定义样式表中的边框属性 选中“CSS规则定义”对话框“分类”列表中的“边框”，这时的对话框如图6-15所示。 “边框”用于设置CSS样式的边框参数。 （8）定义样式表中的扩展属性 选中“CSS规则定义”对话框“分类”列表中的“扩展”，这时的对话框如图6-18所示。 “扩展”选项用于设置CSS样式的扩展参数。其中各选项的含义如下： 1）“分页”栏，用于设置在打印“之前”或“之后”，文本框中的内容是否会自动分页。 2）“视觉效果“栏，用于设置不“光标”或“滤镜”的各种特殊效果，以使页面的显示效果更加生动。 import是写在css文件里面的，而link是写在html页面里面的。相比两个，如果后期要加入其他的样式文件就是import来的方便 在优先级上链接要高于导入 Alpha(半透明)滤镜 Alpha(Opacity=70,FinishOpacity=70,Style=1,StartX=0,StartY=0,FinishX=150,FinishY=60) Opacity代表透明值从0到100，0代表完全透明，100代表不透明；finishOpacity在设置渐变透明效果时指定结束的透明值。startX和startY代表透明效果开始的x,y坐标，finishX和finishY代表透明效果结束的x,y坐标。 滤镜特效有时为什么看不到 有几种滤镜的效果对文字作用时，必须在定义“box”中的Width参数之后，才能显示出来。这类滤镜包括：dropshadow,blur,glow ,alpha,wave等. CSS样式经典实例 改变鼠标形状 更改超链接的样式 应用CSS滤镜 　　改变鼠标的形状是应用扩展类别中的光标属性来设置的，操作为： 　　1．新建一个网页插入一幅图像并保存网页。 　　2．在CSS样式面板中，单击 按钮，打开“新建CSS规则”对话框，如图所示。 3．输入CSS样式的名称“.shubiao”，“选择器类型”选择“类”选项，“定义在”选择“仅对该文档”。 1 改变鼠标形状 　　4．点击“确定”，打开“.shubiao的CSS规则定义”对话框，切换到“扩展”分类，如图。 　　5．在“视觉效果”的“光标”的下拉列表中选择“help”，单击“确定”按钮，样式建立完成。 　　6．选中图像，执行以下操作之一： 　　?在CSS面板中，右击.shubiao样式，在弹出的快捷菜单中选择“套用”命令。 　　?在“属性检查器”的“类”的下拉列表中选择“shubiao”。 　　7．保存网页，在浏览器中鼠标指向图像测试效果。 　　不同的超链接效果,可以通过CSS“选择器类型”中的“高级（ID、上下文选择器等）”中进行设置，有四个选项可供选择：