Adobe_Dreamweaver教程课件_第6章_CSS样式表.pptxVIP

第6章 CSS样式表入门本章介绍的主要内容有： CSS样式表简介创建CSS样式表的方法 内部CSS样式表的应用 链接外部CSS样式表 在代码视图编辑CSS样式表为何要用CSS样式表？ 能给人赏心悦目、工工整整的感觉内容和形式的分离便于站点的维护 简练代码，缩短浏览器加载的时间DW很多地方是基于CSS的6.1 CSS样式表基础CSS是Cascading Style Sheets（层叠样式表）的简称 6.1.1 认识CSS1．CSS样式的类型(选择器的类型) 类样式：（可应用于页面任何标签）。 HTML标签样式：重定义HTML标签样式。 高级样式：（重新定义特定元素组合的格式，td h2 ,重定义包含特定id属性的标签格式，#mystyle）。 内联样式表 外部样式表 CSS格式设置规则由两部分组成：选择器和声明 2．CSS规则h1 {font-size: 16 pixels;font-family: 宋体;font-weight:bold;} 在这个CSS规则中，h1是选择器，介于大括号{}之间的所有内容都是声明块。 各个声明由两部分组成：属性（如font-family）和值（如16 pixels）。 执行【窗口】→【CSS 样式】命令，打开【CSS 样式】面板 6.1.2 对样式表操作的三种方式1．第一种方式2．第二种方式3．第三种方式在空白处右击样式表文件名CSS规则列表属性和属性值列表类别视图工具按钮栏6.1.3 “CSS样式”面板在Dreamweaver中，“CSS样式”面板是新建、编辑、管理CCS的主要工具。选择“窗口”|“CSS样式”命令可以打开或者关闭“CSS样式”面板。6.2 新建CSS规则和应用CSS样式6.2.1 定义样式表选项在【CSS样式】面板上，单击【新建CSS规则】按钮，打开【新建CSS规则】对话框。（1）【新建样式表文件】 1．【定义在】选项（2）【仅对该文档】 （1）【类（可应用于任何标签）】 2．【选择器类型】选项（2）【标签（重新定义特定标签的外观）】 （3）【高级（ID、伪类选择器等）】 3． 【名称】文本框 在这个文本框中输入CSS规则名称。根据所选择的“选择器类型”的不同，这里可以输入或者选择 不同的名称。6.2.2 在网页中应用样式1．在【属性】面板选择应用样式2．利用【标签选择器】选择样式3．使用右键快捷菜单(套用)4．清除样式Css样式定义的分类说明类型 对文字的字体、大小、颜色、效果等基本样式进行设置。背景 对元素的背景进行设置，一般对页面、表格、区域的设置 区块 设置对象文本的文字间距、对齐方式、上标、下标、排列方式、首行缩进等方框 设置对象的边界、间距、高度、宽度和漂浮方式等边框 设置对象边框的宽度、颜色及样式列表 设置列表样式、列表项图像和位置定位 相当与对象放在一个层里来定位，它相当于HTML的DIV标记扩展 设置打印网页时或者是对象视觉显示效果6.3 创建和应用CSS样式 6.3.1 控制浏览器中的文字大小：“稳定性”6.3.2 设置行间距：使不大不小，美观 6.3.3 为图片加上边框效果：可随意设置边框颜色6.3.4 利用“自定义样式表”改变鼠标指针的形态hand：是大家所熟悉的手型。crosshair：是十字型。text：是平时鼠标移动到文本上的样式。wait：是等待的效果。default：是默认的那种效果。help：是带问号的鼠标样式。e-resize：是向右的箭头。ne-resize：是向右上方的箭头。n-resize：是向上的箭头。nw-resize：是向左上方的箭头。w-resize：是向左的箭关。sw-resize：是向左下的箭头。s-resize：是向下的箭头。se-resize：是向右下方的箭头。auto：是系统自动的效果。 6.3.5 利用有关链接的样式表修改链接的格式a:link——定义了链接文字的样式。a:visited——浏览者已经访问过的链接样式。a:hover ——定义了鼠标悬浮在链接文字上时的样式。a:active ——定义链接被激活时的样式，即鼠标已经单击了链接，但页面还没有跳转时 。6.3.6 控制页面背景图像的样式执行【修改】→【页面属性】命令，弹出【页面属性】对话框 。通过重新定义body标签的CSS规则来控制网页的背景图像。6.3.7 利用自定义样式表制作项目图标 定义一个类控制器，设置这个CSS规则的“列表”属性，然后将CSS规则应用在HTML文档的ul或者ol标签上。6.3.8 CSS样式滤镜的应用下面是各个滤镜的意义：Alpha：设置透明度。Blur：建立模糊效果Chroma：把指定的颜色设置为透明。DropShadow：建立一种偏移的影像轮廓，即投射阴影。Fli