|
一、认识CSS样式
1、概述：CSS（Cascading Style Sheets）即层叠样式单（或层叠样式表）。不仅可用于本文档，还可应用于其他文档（以外部文件的形式存储）。
2、特点：不仅有传统的格式属性，还可设置位置、特殊效果、鼠标滑过等属性。
3、位置：代码位于文件头部<head>...</head>之间。
4、类型：⑴ 自定义CSS样式：可用于一个完整的文本块或局部的文本范围。
⑵ HTML标记样式：重新定义原HTML标记。
⑶ CSS选择器样式：重新定义一些标记组合或特定的id号。(id号之前要加井号“#”）
5、优先级：手工定义的HTML标记优先于CSS样式。应用CSS样式前，要先删除原样式。
实践：启动Dreamweaver，打开smaple\P188.htm观察 HTML样式与CSS样式的优先级
二、创建和链接外部CSS样式
外部CSS样式是一个存储在磁盘上的外部文件（扩展名为.css）。当该文件中的样式作了修改时，所有链接该CSS样式文件的HTML文档的样式均自动修改。因而便于维护整个网站。
1、关联外部CSS样式
⑴ 打开样式面板：选择“窗口”｜“CSS样式”菜单；
⑵ 单击右下方（第一个）“附加样式表”按钮，弹出“选择样式表文件”对话框；
⑶ 找到所需的样式表文件，单击“选择”按钮，链接该外部文件；
⑷ 在面板列表框中显示该样式表文件设置的所有样式名。
⑸ 使用时，先定位，再选择样式名，然后单击应用（或自动应用）。
注：对于某一个位置（选定内容或段落），一次只能应用一个样式名，若再应用其它样式，则以前的样式会被自动清除。
2、创建和链接外部CSS样式
⑴ 打开样式面板：选择“窗口”｜“CSS样式”菜单；
⑵ 单击右下方（第三个）“编辑样式表”按钮（或单击右键、双击），弹出“编辑样式表”对话框；
⑶ 链接外部文件：单击“链接”按钮，弹出“链接外部样式表”对话框；
⑷ 单击“浏览”钮，找到所需的文件；
⑸ 在“添加为”处，单击“链接”单选项，单击“确定”按钮。外部样式名将显示在面板列表框中。
注：“链接”与“导入”只是调入文件的方法不同，作用一样，都是将外部的样式表文件调入文档中。
① “链接”用链接标记
<link rel="stylesheet" href="line.css" type="text/css">
② “导入”则出现在样式清单中
<style type="text/css">
<!--
@import "line.css";
-->
</style>
⑹ 在编辑样式表对话框中，还可新建样式表文件、复制、编辑、删除样式表文件。
⑺ 选中样式表文件名，单击“编辑”按钮，进入编辑各样式对话框。同样在此对话框中，可新建样式，复制、编辑、删除已存在的样式。
三、创建CSS样式
1、打开新建样式对话框 单击“样式”面板中右下方（第二个）“新建样式表”按钮；
⑴ 确定样式定义的位置
① 外部文件 可加在已有样式表文件中，也可新建样式表保存，使用时要链接该文件。
② 仅对该文档 不以外部文件的形式保存，与文档一起保存，设置的代码放在文件头。
⑵ 类型 有三种选择
① 创建自定义样式 必须定义样式名称，且名称以句点为前缀（不加，则系统自动加上）。应用时以调用类的形式（Class=样式名）实现。
② 重定义HTML标签 名称变为标签下拉列表框，列出所有HTML标签，输入或选中后可重新定义。
③ 使用CSS选择器 名称变为选择器列表框，列出所有选择器，输入或选中后可加以定义。
⑶ 进入设置样式格式对话框 单击“确定”按钮，则进入设置样式格式对话框。
四、设置CSS样式格式
在新建样式对话框中，单击选中某样式，按确定，即可进入定义CSS样式的对话框。
1、设置类型 类型属于CSS基本类型方面的格式。可设置字体特大、行高及一些饰修。
⑴ 在左边“分类”列表中选择“类型”选项，然后在右边设置各值。
⑵ “字体”：设置字体，可编辑字体列表。
⑶ “大小”：设置字体大小。利用此样式可设置文档无法设置的大小，注意单位。
⑷ “样式”：可设置正常、斜体、倾斜。
⑸ “行高”：可设置行高，选择“正常”则同文档设置，选择“值”，则自行设置。
⑹ “修饰”：有五个复选项供选。下划线、上划线、删除线、闪烁、无。
⑺ “粗细”：下拉列表中有许多选项，设置字体的粗细，正常为400，粗体为700（bold)。
⑻ “变形”：可选择“小型大写字母”等。
⑼ “大小写”：下拉列表有多个选项capitalize（第一字母大写）、uppercase（大写）、lowercase（小写）、none（不变）。
⑽ “颜色”：可设置不同的颜色。
⑾ 可在一个样式里设置多项。
注：带一个星号的为在文档中不可显示，带两个星号则为只有当样式应用于某元素后方能见效。
2、设置CSS样式背景格式 可设置任意文本的背景及背景图像，这在普通编辑中是办不到的。
⑴ 在“分类”中选择“背景”选项，然后在右边进行设置；
⑵ “背景颜色”：设置样式背景；
⑶ “背景图像”：设置样式的背景图像；
⑷ “重复”：设置背景图像的一些属性
① no-repeat（不重复）：只显示一次图像（在开始位置）；
② repeat（重复）：在横向和纵向以平铺的形式显示图像；
③ repeat-x（X方向上重复）：仅在横向以平铺的形式显示图像；
④ repeat-y（Y方向上重复）：仅在纵向以平铺的形式显示图像；
⑸ “附加”：设置背景图像是固定在原始位置，还是可滚动。fixed（固定）、scroll（滚动）。
⑹ “水平位置”：设置图像相对于应用样式的元素的水平位置。左、中、右，可输入具体的值。
⑺ “垂直位置”：设置图像相对于应用样式的元素的垂直位置。上、中、下，可输入具体的值。
注：若选定有fixed方式，则相对位置为窗口，而不是元素；另外，在某些浏览器中，设置了固定fixed，图像也会滚动。
3、设置CSS样式块格式 可设置字间距、词间距，对齐方式，首行缩进量，上标、下标等。
⑴ 在“分类”中选择“区块”选项，然后在右边进行设置；
⑵ “单词间距”：设置应用样式后的单词间距，对中文无效，在浏览器中的效果也不一致；
⑶ “字母间距”：设置应用样式后的字符间距，对中文有效，覆盖由其他设置产生的间距。可设负值
⑷ “垂直对齐”：设置应用样式元素相对于上一级元素在垂直方向上的对齐方式。
⑸ “文本对齐”：设置应用样式元素在水平方向上的对齐方式（左、中、右）。
⑹ “文字缩进”：设置段落的首行缩进的量
⑺ “空白间距”：设置应用样式后空格处理方式。
① normal（正常）：正常方式，多个空格只作为一个空格处理。（不包括中文全角空格）
② pre（预格式化）：保留原样，不作任何修改。
③ nowrap（不换行）：应用样式元素不换行。
4、设置CSS样式框格式 可设置某个容器（<标记>...</标记>）的间距与边距
⑴ 在“分类”中选择“盒子”选项，然后在右边进行设置；
⑵ “宽”：设置应用样式后的元素的宽度，有“auto”自动，和输入具体的值；
⑶ “高”：设置应用样式后的元素的宽度，有“auto”自动，和输入具体的值；
⑷ “浮动”：设置应用样式元素的浮动位置，利用该选项，可将元素移动到页面范围之外。
⑸ “清除”：设置不允许层在应用样式元素的某个侧面出现。
⑹ “边距”：设置应用样式内容与元素边界之间的距离。可设四个值（上、右、下、左）。
⑺ “边界”：设置应用样式元素与其他元素之间的距离。可设四个值（上、右、下、左）。
5、设置CSS样式边框格式 可设置边框，制作立体按钮等样式。
⑴ 在“分类”中选择“边框”选项，然后在右边进行设置；
⑵ “宽”：设置应用样式后的元素的边框宽度，可设四个值（上、右、下、左）。
⑶ “颜色”：设置应用样式后的元素边框相对应的颜色；
⑷ “样式”：设置应用样式元素的边框样式，含（dotted点划线、dashed虚线、solid实线）。
注：在IE5.0中，只能对一段文本设置区域，不能对选定的文本设置（可采用表格处理）。
6、设置CSS样式列表格式 可改变样式列表的类型，可增加图片列表。
⑴ 在“分类”中选择“列表”选项，然后在右边进行设置；
⑵ “类型”：设置应用样式后的元素的列表属性，有无序列表（三种）和有序列表（五种）
⑶ “项目图像”：设置应用样式后的元素列表，以图像作为无序列表的项目符号。
⑷ “位置”：设置应用样式元素的换行位置，有两种向外的，向内的缩进。
实践：启动Dreamweaver，打开smaple\199.htm观察 设置列表样式
7、设置CSS样式定位格式框格式 用于设置层的定位、可视、叠层等。
⑴ 在“分类”中选择“定位”选项，然后在右边进行设置；
⑵ “类型”：设置层定位的类型：
① absolute绝对、② relative相对、③ static静态（可以在文本流中层的位置上放置层）；
⑶ “显示”：设置层的可视化方式：
① inherit继承、② visible可见、③ hidden隐藏；
⑷ “Z－轴”：设置层的叠放次序，数值越大越在上面。0在最下层。
⑸ “溢出”：设置层中内容超出层大小的选择：
① visible可视（层扩展显示超出内容）；
② hidden隐藏（超出内容不可见）；
③ scroll滚动（不管内容多少，始终出现滚动条）；
④ auto自动（根据内容决定是否出现滚动条，层的大小不变）。
⑹ “边距”：设置应用样式内容与元素边界之间的距离。可设四个值（上、右、下、左）。
⑺ “边界”：设置应用样式元素与其他元素之间的距离。可设四个值（上、右、下、左）。
8、设置CSS样式扩展格式 可设置鼠标形状、滤镜装饰等。
⑴ 在“分类”中选择“扩展”选项，然后在右边进行设置；
⑵ “分页”：设置打印页面时强制分页的位置。
① Top顶部、② right右边、③ always总是、④ auto自动；
⑶ “视觉效果”的“光标”：设置鼠标的可视形状：
① hand:手型 crosshair：精确定位“十”字形；
② text：文本“I”形；
③ wait：等待，“沙漏”形；
④ default：默认指针；
⑤ help：帮助，带尾箭头；
⑥ e-resize：箭头朝右方；
⑦ ne-resize：箭头朝右上方；
⑧ n-resize：箭头朝上方；
⑨ nw-resize：箭头朝左上方；
⑩ w-resize：箭头朝左方；
㈠ sw-resize：箭头朝左下方；
㈡ s-resize：箭头朝下方；
㈢ se-resize箭头朝右下方；
㈣ auto：自动，鼠标按照默认的状态根据页面上的元素自行改变样式。 ⑷ “滤镜”：设置元素各种修饰。
① Alpha：设置元素的透明度
② BlendTrans：产生一种淡入淡出的效果；
③ Blur：产生立体字的效果；
④ Chroma：添加色彩效果；
⑤ Dropshadow：添加对象的阴影效果；
⑥ FlipH：水平翻转对象；
⑦ FlipV：垂直翻转对象；
⑧ Glow：使元素边缘产生类似发光的效果；
⑨ Gray：转变为灰度图效果；
⑩ Invert：“底片”或负片的效果；
㈠ Light：模拟光源的效果；
㈡ Mask：为网页上的HTML元件对象作出一个矩形遮罩；
㈢ RevealTrans：产生23种动态效果；
㈣ Shadow：自动，鼠标按照默认的状态根据页面上的元素自行改变样式。
㈤ Wave：使元素产生波形样式扭曲
㈥ Xray：“X光片”效果
五、CSS样式冲突
1、两种样式同时应用于相同文本时，浏览器会将两种样式的所有格式都显示出来，除非冲突。
2、若发生冲突，则浏览器会显示最内部的样式设置的格式。
3、若存在直接冲突，则CSS样式会覆盖基于HTML标记的样式格式。 | 
