第6章CSS样式实验解说.ppt

* 《网页设计技术》 * 3. CSS样式定义对话框（CSS属性） 创建了新样式后，即可在“CSS样式定义”对话框中进行设置，CSS样式属性的8大类型。 6.5 在Dreamweaver中编辑CSS样式 * 《网页设计技术》 * CSS属性8大类型说明： 类型格式：此类属性用于定义网页中文本的字体、大小、颜色、文本链接的修饰线等格式。 背景格式：为整段文字或其它页面元素加入背景格式，如背景色或图像。 区块格式：控制文本的间距、缩进或对齐方式等。 方框格式：控制网页中的块元素，方框共分为4个部分：边界、边框、填充、方框内容。 边框格式：为任何网页元素加上边框（如宽度、颜色和样式），且边框的样式多样（粗细、凹下等）。如宽度、颜色。 列表格式：可以设置项目符号的样式（如项目符号大小和类型），还可以用图片来代替项目符号。 6.5 在Dreamweaver中编辑CSS样式 * 《网页设计技术》 * 定位格式： 提供网页元素的相对位置或绝对位置的设置，甚至可以将两个元素重叠在一起。这对于一些固定元素（如表格）来说，是一种功能的扩展，而对于浮动元素来说，却是有效的、用于精确控制其位置的方法。 扩展格式： 设置页面打印的分页效果和网页视觉效果，其属性包含两部分：分页为打印的页面设置分页符；视觉效果为网页元素施加特殊效果。 【光标】 ：可指定在某个元素上要使用的光标形状，共有15种选择方式，分别代表鼠标指针的各种形状。 【滤镜】：特殊效果有阴影、模糊、透明、光晕等。这些效果在DW的设计视图中是显现不出来的，只有在浏览器中浏览时才能看到。 6.5 在Dreamweaver中编辑CSS样式 * 《网页设计技术》 * (1)导出样式表文件 在当前文档中设置的样式只在该文档中有效。要使当前文档中的样式应用到其他文档，则可以考虑将其中的样式导出为样式表文件，这样，DW就可以通过样式表链接，使整个站点具有相同的样式设置。 单击“文件”的“导出”命令，选择“CSS”样式或在CSS样式面板中，执行“右键”菜单的“导出”命令。 在对话框中设置好保存的文件名及路径。 4.CSS样式导入与导出 6.5 在Dreamweaver中编辑CSS样式 * 《网页设计技术》 * (2)链接或导入外部样式表文件 样式表文件是一个仅包含样式规则的文本文件。通过“附加样式表”命令可将其他页面中的样式应用到当前页面中，具体操作： 在“CSS样式”面板中，单击“附加样式表”按钮，打开“链接外部样式表”对话框。 在“选择样式表文件”对话框中，指定样式表的路径及名称，则创建的外部链接样式表显示在“CSS样式”面板中。 注意：编辑外部样式表将影响到所有链接引用它的文档。用户可以将CSS样式表文件复制到自己的站点内编辑。 6.5 在Dreamweaver中编辑CSS样式 返回 6.6 CSS应用示例 例6.4 设置文字样式 * 《网页设计技术》 * html head title设置文字效果/title style type=text/css p{ font-family:黑体; /* 文字字体 */ font-size:35px; /* 文字大小 */ color:#0033CC; /* 颜色 */ font-weight:bold; /* 粗体 */ font-style:italic; /* 斜体 */ text-decoration:line-through; /* 删除线 */ } /style /head body pCSS设置文字效果/p /body /html * 《网页设计技术》 * 6.6 CSS应用示例 段落是由一个个文字组合而成的，同样是网页中最重要的组成部分之一，因此前面提到的文字属性，对于段落同样适用。但CSS针对段落也提供了很多样式属性。 在使用Word编辑文档时，可以很轻松的设置行间距，在CSS中通过“line-height”属性同样可以轻松地实现行距的设置。在CSS中“line-height”的值表示的是两行文字之间基线的距离。如果给文字加上下划线，那么下划线的位置就是文字的基线。 “line-height”的值跟CSS中所有设定具体数值的属性一样，可以设定为相对数值，也可以设定为绝对数值。在静态页面中，文字大小固定时常常使用绝对数值，达到统一的效果。而对于论坛、博客这些可以由用户自定义字体大小的页面，通常设定为相对数值，可以随着用户自定义的字体大小而改变相应的行距。 CSS文字段落 例6.5 设置文字段落 html head title行间距line-height/title style type=text/css !-- p.