1、第8章 CSS样式,学习目的与要求,创建CSS样式表 掌握CSS样式的属性项目设置方法 在文档中应用样式表，会管理样式表 会应用CSS滤镜对文字和图像做出特殊效果。,8.1 创建CSS样式,CSS样式：层叠式样式（简称CSS），是一种比较先 进的网页控制技术，主要用来指定布局、 字体、颜色、背景以及其他的一些图文元 素的格式。 CSS样式一般为分嵌入式和外部链接式两种类型。 嵌入式是在独立的文档中应用的CSS样式；外部链接式样式应用于多个文档，生成专门的*.css文件。 内部样式表文件：创建的样式只对当前文档起作用， 这样的样式称为内部样式表文件。 外部样式表文件：保存在外部但可以链接到当前文
2、档 中的样式称为外部样式表文件。,8.1 创建CSS样式,8.1.1 新建CSS样式 （1）选择菜单【窗口】|【CSS样式】命令，打开 CSS样式面板。 （2）在面板右侧的下拉菜单中选择【新建CSS样 式】，出现“新建CSS样式”对话框。,8.1.2 CSS样式面板 1“正在”模式 （1）单击CSS 样式面板顶部的“正在”按钮。 （2）选择当前页中的一个文本元素以显示它的属性。 （3）在“所选内容的摘要”窗格中选择一个属性并编辑。,8.1.2 CSS样式面板 2“全部”模式 （1）单击 “CSS 样式”面板顶部的“全部”按钮。 （2）编辑样式属性，执行下列操作之一。 在“全部规则”窗格中双击某
3、条规则以显示“CSS”规则定义对话框，然后进行更改。 在“全部规则”窗格中选择一条规则，在下面的“属性”窗格中编辑该规则的属性。 在“全部规则”窗格中选择一条规则，然后单击“CSS”样式”面板右下角中的“编辑样式”按钮。,8.1 创建CSS样式,8.1 创建CSS样式,8.1.2 CSS样式面板 3 添加属性 （1）在“所有规则”窗格中选择一条属性（“所有”模式），或者在“所选内容的摘要”窗格中选择一个属性（“当前”模式）。 （2）执行下列操作之一 如果在“属性”窗格中选择了“只显示设置属性”视图，请单击“添加属性”链接并添加属性。 如果在“属性”窗格中选择了“类别”视图或“列表”视图，则为要
4、添加的属性填入一个值。,8.1 创建CSS样式,8.1.2 CSS样式面板 4 CSS样式面板上的按纽 ：类别视图，将 CSS 属性划分为 8 个类别 ：列表视图，按字母顺序显示 CSS 属性。 ：设置属性视图，仅显示那些已设置的属性。 ：附加样式表，打开“链接外部样式表”对话框。 ：新建 CSS 规则。 ：编辑样式，编辑当前文档或外部样式表中的样 式。 ：删除CSS 样式面板中的所选规则或属性。,8.1 创建CSS样式,8.1.3 CSS样式规则对话框 （1）名称：输入样式的名称。 （2）选择器类型：选择创建样式的类型，有3种样 式可供选择。 类：创建一个应用于文本和文本块的CSS样式。 标
5、签：选择重新定义的标签。 高级：对特定的HTML标签组合或含有某个ID属性的 所有标签进行重新定义。（3）“定义在”有2个选项。 仅对该文档：设置的CSS样式只对当前文档起作用 新建样式表文件：保存为样式表文件*.css 。,8.1 创建CSS样式,8.1.4 样式定义对话框,8.1 创建CSS样式,8.1.5 样式的类型 1定义类样式并应用于表格的实例 （1）定义左上角的单元格边框 单击新建按钮 ，在【选择器类型】中选择【类】，在【名称】后输入“left”，【定义在】项选为【仅对该文档】。,8.1 创建CSS样式,8.1.3 CSS样式规则对话框 在【分类】栏中，选择【边框】选项,8.1 创
6、建CSS样式,8.1.3 CSS样式规则对话框 （2）应用该样式 在网页中插入一个2行2列的表格，表格的边框为1，将光标定位到表格第一行的第1个单元格，在文档窗口左下角的标签中选择，选中这个单元格。打开【属性】面板，单击【样式】后面的下拉列表从中选择“left”,8.1 创建CSS样式,8.1.3 CSS样式规则对话框 （3）定义右下角的单元格边框 在CSS样式窗口中，单击新建按钮，在【选择器类型】中选择【类】，在【名称】后输入“right”，【定义在】项选为【仅对该文档】。 在【分类】栏中，选择【边框】选项，设置“左”、“上”的线型为“虚线”，线的宽度为“1”，“颜色”值为“#666666”
7、。 进入设计视图，将光标定位到表格的右下角的单元格内部，在文档窗口左下角的标签中选择，选中这个单元格，在属性面板中应用样式“right”。,8.1 创建CSS样式,8.1.3 CSS样式规则对话框 2标签 创建新的CSS样式时，在“新建CSS样式”对话框中的【选择择器类型】选项中选择【标签】，可以在【标签】下拉列表中选择相应的标签。,8.1 创建CSS样式,8.1.3 CSS样式规则对话框 3重定义标签实例 （1）定义“table” 标签及应用 单击新建按钮，在【选择器类型】中选择【标签】，在【标签】下拉列表中选择“table”，【定义在】项选为【仅对该文档】。 在【分类】栏中，选择【边框】选
8、项，设置表格中的边框样式。 在页面的空白处单击【插入】工具栏上的【插入表格】按钮，插入一个4行2列的表格，在表格里面输入文字，设置属性。按F12浏览查看。,8.1 创建CSS样式,8.1.3 CSS样式规则对话框 4使用高级CSS选择器 在“新建CSS样式”对话框中的【类型】中选择【使用CSS选择器】，可以在“选择器”选项的下拉列表中选择相应的超级链接状态，共有四个选顶可以设置文字超级链接的四种状态 ： a：link：正常的未被访问过的链接的文本显示样式。 a：visited：被访问过的超级链接文本的显示样式。 a：hover：光标移到超级链接文本上时的显示样式。 a：active：超级链接文
9、本被激活的显示样式。,8.1 创建CSS样式,8.1.3 CSS样式规则对话框 设置超链接文字的样式的具体操作：（1）在【类型】中选择“使用CSS选择器”，在 【选择器】选项的下拉列表中选择“a：link”, 【定义在】选择“仅对该文档” 。 （2）单击【确定】按钮后，在【类别】栏中，选 择“类型”选项，设置未访问过的文字的链接 样式，【修饰】) 项中将【无】选中，单击 【确定】后，设置好一个链接的状态。 （3）设置其他的状态。 （4）输入页面中的链接文字，在文档窗口，看到 链接的文字颜色为蓝色。,8.2 编辑样式,8.2.1 样式对话框中参数的设定 1类型 字体：指定文本的字体。 大小：设置
10、文字的尺寸。 样式：设置字体的风格。 行高：设置行与行之间的垂直距离。 修饰：设置链接文本的显示状态。 粗细：设置字体的粗细效果。 变形：设置字母类文本，选项包括正常和小型大 写字母。 大小写：设置字母的大小写。 颜色：设定文本的颜色。,8.2 编辑样式,8.2.1 样式对话框中参数的设定 2背景,8.2 编辑样式,8.2.1 样式对话框中参数的设定 背景颜色：设置文本所在段落的背景颜色。 背景图像：设置文本所在的背景图像的平铺方式。 重复：控制背景图像在网页内的排列方式。 重复：在文本后面纵向和横向铺满图像。 不重复：在文本的起始位置显示一次图像。 横向重复：在水平方向进行图像的平铺。 纵向
11、重复：在垂直方向进行图像的平铺。 附件：决定背景图像是在起始位置固定不动还是同内 容一起滚动。 固定：文字滚动时，背景图像保持不动。 滚动：背景图像随文字的滚动而滚动。 水平位置和垂直位置：指定图像相对于文本的初始横 向位置和纵向位置。,8.2 编辑样式,8.2.1 样式对话框中参数的设定 3区块,8.2 编辑样式,8.2.1 样式对话框中参数的设定 单词间距：设置文字之间的距离。 字母间距：设置文字之间或是字母之间的间距。 垂直对齐：控制文字或者图像相对于其母体元素的 垂直位置。 文本对齐：指定文本段落的水平对齐方式。 文字缩进：控制段落文本中第一行向右缩进的数值。 空格：确定如何处理页面中
12、的白色空格。 普通：折叠白色空格。 保留：将白色空格都当作文本用PRE标签包围起来。 不换行：指定文本只有在碰到BR标签时才换行。 显示：设置区块的显示方式。,8.2 编辑样式,8.2.1 样式对话框中参数的设定 4方框,8.2 编辑样式,8.2.1 样式对话框中参数的设定 宽和高：设置元素的宽度和高度。 浮动：设置其他元素（如文本、层、表格等）在哪 个边围绕元素浮动。 清除：定义不允许层的边。 填充：指定元素内容与元素边框之间的间距。 全部相同：为应用此属性的元素的“上”、“右”、“下” 和“左”侧设置相同的填充属性。 边界：指定二个元素的边框之间的间距。 全部相同：为应用此属性的元素的“上
13、”、“右”、“下” 和“左”侧设置相同的边距属性。,8.2 编辑样式,8.2.1 样式对话框中参数的设定 5边框 （1）边框属性 宽度：可以分别设置文本边框上、右、下、左的 宽度。每个选项的下拉菜单都有如下选项： 细、中粗、粗、自动、值。 颜色：分别设定各个边框的颜色。 样式：设置边框的样式，在文档窗口中，所有的 样式显示均为实线。有下列选项：无、点 画线、点画线、实心线、双线凹线、书脊 线、内缩线、外扩线。,8.2 编辑样式,8.2.1 样式对话框中参数的设定5边框 （2）应用CSS边框样式实例 在样式面板上单击新建按钮，设置样式的名称为“.bk”，【类型】为“创建自定义样式”，【定义在】选
14、择“仅对该文档”。 【确定】后，在【分类】项目中选择【背景】项目，选择一幅背景图像，设置重复：不重复，附件：固定，水平位置：右对齐，垂直位置：底部。,8.2 编辑样式,8.2.1 样式对话框中参数的设定 5边框 （2）应用CSS边框样式实例 在【方框】项目中设置【宽】为200像素，【浮动】为“左对齐”，将【填充】上、左、右设置为10像素，下设置为80像素，【边界】均设置为10像素，注意【边界】选中【全部相同】复选框。 在【边框】项目中设置【样式】为【虚线】，【边框】的宽度为1像素，设置颜色为深绿色，注意均选中【全部相同】复选框。 在页面中输入文字，选中要应用样式的文字内容，在样式面板上单击.b
15、k，文档预览 。,8.2 编辑样式,8.2.1 样式对话框中参数的设定 5边框 （3）为水平线应用边框样式 在网页中插入一条水平线，新建一个样式，输入样式名称为“line1”，【选择器类型】为“类”，【定义在】选择“仅对该文档”。 在对话框中【分类】中选择“边框”选项，只设置“上”的线型为“虚线”，颜色处选择“绿色”，返回到编辑窗口，为水平线应用样式“line1”，存盘浏览网页，发现水平线已经变成绿色的虚线了。,8.2 编辑样式,8.2.1 样式对话框中参数的设定 6列表 （1）列表属性,8.2 编辑样式,8.2.1 样式对话框中参数的设定 6列表 （1）列表属性 类型：设置列表项目前面使用的
16、符号，选项包括 圆点、圆圈、方型、数字、小写罗马数字、 大写罗马数字、小写字母和大写字母和无。 项目符号图像：将选择的图像作为列表前面的符号。 位置：设置列表项目的位置，选项包括内和外，它 决定列表项换行时是缩进还是边缘对齐。,8.2 编辑样式,8.2.1 样式对话框中参数的设定 6列表 （2）应用CSS列表样式实例 新建的名称为“css6”，【类型】为创建自定义样式，【定义在】单击【仅对该文档】。 【确定】后，弹出“CSS样式定义”对话框，在【分类】项目中选择【列表】项目，【类型】为“方块”，单击【浏览】按钮选择一幅小的图像，【位置】为“内”。 在页面中输入文字“即时播报”并选中这部分文字，
17、在属性面板上单击【项目列表】按钮，此时“即时播报”的前边出现一个黑色的小方块。,8.2 编辑样式,8.2.1 样式对话框中参数的设定 6列表 （2）应用CSS列表样式实例 选中文字“即时播报”，在样式面板上单击样式列表的名称“css6”，为其应用自定义的列表样式。 用同样的方法再新建一个另一个列表样式css7，选择另一幅小图像作为项目符号图像，其他属性设置同css6。 在页面中输入另几段文字，并选中它们，单击属性面板上的【编号列表】按钮，这部分文字的每行的行首出现了数字编号。 选中后输入的文字内容，在样式面板上单击样式列表中的名称“css7”，为其应用自定义的列表样式 。,8.2 编辑样式,8
18、.2.1 样式对话框中参数的设定 7定位 定位项目用于精确控制网页中元素（特别是层）的位置参数 。,8.2 编辑样式,8.2.1 样式对话框中参数的设定 7定位 类型：确定浏览器中定位的类型。 绝对：相对于页面的左上角进行层的放置。 固定： 相对：相对于文本对象所在的位置进行层的放置。 静态：将层放置在文本自身的位置。 显示：确定层的初始显示条件，默认状态为继承。 继承：继承层的父级的可见性属性。 可见：显示这些层的内容。 隐藏：隐藏这些层的内容。,8.2 编辑样式,8.2.1 样式对话框中参数的设定 7定位 Z轴：设置网页中层的顺序。 溢位：层的宽度和高度设置完成后，如果加入其 中的内容无法
19、完全显示，此选项就会发生 作用。 可见：扩大层的面积以便显示所有内容，层向右 下方扩展。 隐藏：保持层的大小，剪切其超出的的部分。 滚动：不论层是否超出都为层加入滚动条。 自动：只有层超出时才会为层加入滚动条。 置入：指定层的具体位置，包括下、下、左、右 四个子属性。 裁切：把元素区域剪切成各种形状。,8.2 编辑样式,8.2.1 样式对话框中参数的设定,8.2 编辑样式,8.2.1 样式对话框中参数的设定 8扩展 分页：为打印的页面设置分页符，选项包括之前 和之后。 光标：在下拉列表中设置光标指定某个元素时， 指针的显示类型。 滤镜：对由样式控制的对象使用滤镜效果，包括 模糊、透明、发光及混
20、合等。,8.2 编辑样式,8.2.2 样式的导入与导出 1导入 （1）单击样式面板右上角的箭头，从弹出的菜单 中选择【附加样式表】，弹出“链接外部样式 表”对话框。选择要导入的CSS文件，【确定】 后文件中的样式就导入到当前文档中了可以 在样式面板上看到链接的样式表文件。,8.2 编辑样式,8.2.2 样式的导入与导出 1导入 （2）使用标记。把该标记置于 之间，指明要链接的样式 文件（以.css为后缀后保存成一个独立的文 本文件），一个样式文件中可包含多个样 式，这样的方式可在目前的网页中使用外部 样式表内的样式。其代码为:,8.2 编辑样式,8.2.2 样式的导入与导出 2导出 （1）在样
21、式面板中选中样式表名称，单击样式面 板右上角的箭头，或者单击右键，选择【导 出】命令，输入要保存的样式表文件的名称 并选择保存目录，这个样式表就保存成一个 外部CSS文件，可以被其他文件链接使用。 （2）选择菜单【文件】|【导出】|【CSS样 式】，在弹出的对话框中选择样式表的存储 路径和存储的文件名，单击【保存】按钮即 将其导出成一个独立的CSS文件。,8.3 样式的应用,8.2.2 样式的导入与导出 （1）选中文字，单击属性面板中【样式】后的向下箭 头，选取要应用的样式的名称。 （2）在标签区选中标签，在此处单击鼠标右键， 即选取了鼠标所在的段落，再选择快捷菜单中的 【设置类】，选取要应用
22、的样式。 （3）在编辑窗口选中要应用的对象，在CSS面板上要 应用的样式名称处单击鼠标右键，在弹出的快捷 菜单中选择“套用”选项，也可应用该样式。 （4）选取要应用样式的对象，在选取的对象上单击鼠 标右键，选择“CSS样式”，选择要应用样式的名 称。,8.4 滤镜,8.4.1 CSS滤镜 1Blur滤镜 让文字或图片拥有立体的效果。 （1）语法 Blur(add=值1,direction=值2,strength=值3) （2）参数 add：设置是否要在已经应用Blur过滤器上的HTML 元素上显示原来的模糊方向。 direction：用来表示模糊的方向。 strength：用来表示图像模糊的半
23、径大小。 （3）滤镜的使用 同一个网页中可以使用不同参数的Blur 滤镜。,8.4 滤镜,8.4.1 CSS滤镜 2DropShadow滤镜 （1）语法 DropShadow(color=值1,offx=值2,offy=值3,positive=值4) （2）作用 该滤镜主要是用来产生重叠效果的。 （3）参数 color：用来设置阴影的颜色。 offx：阴影相对于原对象在水平方向上的偏移量。 offy：阴影相对于原对象在垂直方向上的偏移量。 positive：指定阴影的透明程度。,8.4 滤镜,8.4.1 CSS滤镜 3Shadow滤镜 Shadow滤镜是用于产生下落式阴影效果。color：阴影
24、字的颜色，可以是英文名称或是颜色 的十六进制代码。 Direction：设置模糊的方向，值从0度360度。,8.4 滤镜,8.4.1 CSS滤镜 4Alpha滤镜 （1）语法：Alpha (Opacity=值1, FinishOpacity=值2, Style=值3, StartX=值4, StartY=值5, FinishX=值6, FinishY=值) （2）参数 Opacity：设置透明度。 FinishOpacity：制作出透明渐进的效果。 Style：设置渐变风格。 StartX和StartY：设置水平和垂直的渐进起始位置。 FinishX和FinishY：设置水平和垂直的渐进结束位
25、置 。,8.4 滤镜,8.4.1 CSS滤镜 5FlipH、FlipV滤镜 语法：fliph，flipv 作用：分别是水平反转和垂直反转。 6Gray、Invert、Xray滤镜 （1）语法：gray，invert，xray Gray滤镜是把一张图片变成灰度图；Invert 滤镜是把对象的可视化属性全部翻转，包括色彩、饱和度、亮度值；Xray滤镜是让对象反映出它的轮廓并把这些轮廓加亮，也就是所谓的X光片。,8.4 滤镜,8.4.1 CSS滤镜 7Wave滤镜：对图像和文字产生抖动效果。 （1）语法：wave (add=值1,freq=值2, lightstrength=值3, phase=值4
26、, strength=值5) （2）参数 Add：设置是否在已经使用了Wave过滤器的元素 对象上显示原对象。 Freq：是波纹的频率。 Lightstrength：对于波纹加强光影的效果。 Phase：设置正弦波的起始位置。 Strength：用来表示振幅的大小。,8.4 滤镜,8.4.1 CSS滤镜 8Light滤镜：模拟光源的投射效果。 （1）语法：light （2）参数 AddAmbient：加入包围的光源。 AddCone：加入锥形光源。 AddPoint：加入点光源。 Changcolor：改变光的颜色。 Changstrength：改变光源的强度。 Clear：清除所有的光源。
27、MoveLight：移动光源。,8.4 滤镜,8.4.1 CSS滤镜 9Glow滤镜 （1）语法Glow(Color=值, Strength=值) （2）参数 Color：效果的颜色值。 Strength：设定光晕的强度，数值越大，强 度越大。,8.4 滤镜,8.4.2 滤镜实例 1Blur滤镜实例 （1）设置Blur滤镜 单击【窗口】|【CSS样式】，打开CSS面板。 在面板右侧的下拉菜单中选择【新建CSS样式】命令，或者单击面板右下角的新建CSS样式图标。出现新建样式的对话框。在对话框中输入样式的名称“css1”。 单击【确定】后，弹出“css1的样式定义”对话框， 在【分类】列表框中选择
28、【扩展】，在【滤镜】下拉列表中选择【Blur】，设置其参数为： Blur(Add=true, Direction=135, Strength=8) 。 单击【确定】按钮，完成样式“css1”的创建。,8.4 滤镜,8.4.2 滤镜实例 1Blur滤镜实例 （2）把Blur加载到文字上 单击插入面板上的插入层按钮，在页面上插入一个层。 在层内插入文字“微风吹过湖面”，在属性面板上设其属性值为：宋体，36号字，加粗，颜色值为#3300FF。 单击层标记选中层，此时层的周围有8个控制点。如图8.29所示。 单击CSS面板上的样式列表的名称“css1”，为层应用样式“css1”，此时在状态栏上会看到应
29、用了样式的层标签 。,8.4 滤镜,8.4.2 滤镜实例 1Blur滤镜实例 （3）把Blur加载到图像上 单击插入面板上的插入图像按钮，在页面中插入3幅图像。 在图像的属性面板上设置3幅图像的统一尺寸为宽200像素，高200像素。 选中第1幅图像，单击CSS面板上样式列表的名称“css1”，同样的办法为另两幅图像应用“css1”样式。,8.4 滤镜,8.4.2 滤镜实例 2DropShadow滤镜实例 （1）单击【窗口】）|【CSS样式】，打开CSS窗口。 （2）在面板右侧的下拉菜单中选择【新建CSS样式】 命令，新建样式“css1”。 （3）在弹出的对话框中，在【分类】列表框中选择 【扩展
30、】，在【滤镜】下拉列表中选择 【DropShadow】，设置其参数为： DropShadow(Color=66FFFF, OffX=3, OffY=3,Positive=ture)。,8.4.2 滤镜实例2DropShadow滤镜实例（4）单击标准对象面板上的插入层按钮，在页面上 插入一个层。 （5）在层内插入文字，在属性面板上设其属性值为：宋体，6号字，加粗，颜色值为#3333FF。 （6）单击层标记选中层，为层应用样式“css1”,8.4 滤镜,8.4 滤镜,8.4.2 滤镜实例 3Shadow滤镜实例 样式中使用滤镜Shadow，它的参数为： Shadow(Color=#ccffff,
31、Direction=135)。层中的文字属性：宋体，24号字，加粗，颜色值#为3333CC。,8.4 滤镜,8.4.2 滤镜实例 4Alpha滤镜实例 （1）单击【窗口】|【CSS样式】，打开CSS窗口。 （2）新建样式“css1”。 （3）在【分类】列表框中选择【扩展】，在【滤 镜】中选择【Alpha】，设置其参数为 Alpha(Opacity=80, FinishOpacity=90, Style=2, StartX=0, StartY=0, FinishX=100, FinishY=100)。,8.4 滤镜,（4）单击标准对象面板上的插入层按钮，在页面上 插入一个层，在属性面板上设置其背
32、景颜色为 黑色。 （5）在层内插入两行文字，设置其颜色不同。 （6）单击层标记选中层，单击CSS面板上的样式列 表的名称“css1”，为层应用样式“css1”,8.4.2 滤镜实例 4Alpha滤镜实例,8.4 滤镜,8.4.2 滤镜实例 5Wave滤镜实例 （1）单击【窗口】|【CSS样式】，打开CSS窗口。 （2）新建样式“css1”。 （3）在【分类】列表框中选择【扩展】，在【滤镜】 下拉列表中选择【wave】，设置其参数为： Wave(Add=10, Freq=3, LightStrength=100, Phase=100, Strength=30)。 （4）在页面中插入3幅图像。 （5）在属性面板上设置图像的统一尺寸为宽200像 素，高200像素。 （6）为图像应用“css1”样式 。,本章小结,样式表最大的一个优点和省时之处就在于可以在多个页面甚至整个站点上应用它。尤其是修改了外部样式表时，它将自动更新所有使用它的网页，从而完成大量的页面修改工作。在这一章里，一定要学会如何创建样式表，尤其是CSS样式表，使用滤镜来制作文字与图像的特殊效果，并能在制作网页的过程中熟练应用样式表。,
