1、第8章 CSS样式,样式表样式表是为了弥补HTML的缺点而开发的语言，调整字间距、行间距、取消链接的下划线、固定背景图像等样式表可以实现原来的HTML标记无法表现的效果。1、样式表的概念样式表又称为CSS是Cascading Style Sheets的缩写，中文译为层叠样式表，是可以定义HTML标记所无法表现的属性的补充性语言。样式表的另外一个优点就是，在对很多网页文件设置同一种属性时，无需对所有文件反复进行操作，只要应用样式表就可以更加便利、快捷地进行操作。在Dreamweaver中只需要单击几次，就可以在字体、链接、表格、图片、层等构成网页文件的所有元素属性中应用样式表。,2、样式表的种类
2、在Dreamweaver中提供的样式表种类根据运用的范围和对象有所不同。根据运用样式表的范围是局限在当前网页文件内部还是其他网页文件，也可以分为内部样式表和外部样式表，而且根据运用样式表的对象还分为用户自定义样式表、定义HTML标记样式表、有关链接的样式表等3种。下面就来学习每一种样式表的特点和用途。,类(Class)创建一个可应用于文本的范围和选择区域的定制样式。自定义样式 (Class) 名称必须以句点开头，包含任何字母和数字组合。如 .myhead1。如果没有输入句点，Dreamweaver 将自动为您输入。标签（重新定义特定标签的外观）可重新定义定制的HTML标记的格式。重定义HTML
3、标签，对HTML中的标签进行样式使用。如果定义了这个标签，那么，以后只要使用了这个标签就都自动使用这个样式。如改变文字（body）的颜色，先新建一个CSS样式，单击确定之后在类型里面把文字改为红色就可以了。高级（选择器）可为特殊的标记组合或含有ID属性的所有标记定义格式。 以“”，任意字母和数字的组合。,3、在哪儿建立样式表全部：显示出所有样式正在：显示吃当前文档的样式所有规则：可以在改样式表中直接修改样式文件分类显示样式 显示样式列表视图 显示已创建的样式属性 附加样式表，可以链接外部CSS样式 新建CSS规则，可以创建一个新的CSS样式 编辑样式表，可以对所选择的CSS样式进行编辑修改 删
4、除样式表，可以删除所选择的CSS样式,CSS的应用CSS有很多属性用于定义网页元素的外观，按照功能进行分类主要有：类型、背景、区块、方框、边框、列表、定位和扩展。虽然CSS样式表有如此强大的功能，但由于类别过多，用手动编写会比较麻烦。,1、类型 字体：设置文本的字体，设置方式参照文本的属性设置 大小：设置文本的字号，右侧有字号的单位 样式：可以设置文本为正常、斜体或偏斜体 行高：用于设置文本的行间距 修饰：给文本添加一些装饰，在控制链接效果时应用得比较多 粗细：设置文本的加粗程度 变体：设置英文文本是否应用小型大写字母 大小写：设置英文字母的大小写样式,2、背景 背景颜色：设置对象的背景色。
5、背景图像：用图像制作对象背景。在一个样式中，在背景颜色和背景图像中只取其一。 重复：对背景图像而言，也就是说在应用样式时，是否允许背景图像重复或指定重复的方式。 附件：设置背景是否跟随内容滚动。 水平位置、垂直位置：设置背景图像样式与对象的对其方式。,3、区块 单词间距：设置单词之间的间距，可以设置负值。 字母间距：设置字符和文字之间的间距，可以设置负值。 垂直对齐：指定元素的垂直对其方式。 文本对齐：指定文本的排列方式。 文字缩进：设置第一行缩进值。负值用于将文本的第一行向外拉。 空格：设置空白符号。 显示：用来指定对象的显示范围。,4、方框 宽、高：设置方框的大小。 浮动：指定元素的浮动方
6、式。左对齐：表示对象浮动在左边。右对齐：表示对象浮动在右边。无：表示对象不浮动。 清除：不允许元素浮动。左对齐：表示不允许左边有浮动对象。右对齐：表示不允许右边有浮动对象。两者：表示不允许左右两边都有浮动对象。 填充：设置方框的填充。可以分别设置上、下、左、右4个值。 边界：设置方框的边界。可以分别设置上、下、左、右4个值。,5、边框 样式：设置边框的样式。 宽度：设置边框的宽度。 颜色：设置边框的颜色。可以设置上、下、左、右4个边框的颜色。,6、列表 类型：设置列表的项目符号。 项目：可以将项目符号设置为指定的图像。 位置：设置项目符号在列表内还是在列表外。,7、定位它的作用是将对象放在一个
7、层里来定位，它相当HTML中DIV标记。所以，我们可以用它来设置图片的相对和绝对路径。,无裁切效果 裁切效果 CSS样式定位效果,类型：设置定位的方式。 显示：设置对象定位层的最初显示状态。 Z轴：设置对象的层叠顺序。 溢位：设置当层的内容超出层的大小的时候如何处理可见：可以增加层的大小，将层的所有内容都显示出来隐藏：可以保持层的大小不变，将超出层的内容隐藏掉滚动：总是显示滚动条自动：只有在内容超出层的边界的时候才显示滚动条 置入：设置对象定位层的位置和大小 剪切：定义定位层的可视区域，区域外的部分为不可视区域,8、扩展本参数可以方便的设置页面打印效果、鼠标指针及CSS特效。 分页：用来设置在
8、打印的时候强迫在样式控制的对象前后换页 之前：设置对象前出现页分隔符。选择“始终”选项时，将始 终在对象之前出现分隔符 之后：设置对象后出现页分隔符。选择“始终”选项时，将始终在对象之后出现分隔符 光标：设置当鼠标经过样式控制的对象的时候改变鼠标的形状 滤镜：设置滤镜特效,未使用滤镜效果 图 使用Gray滤镜效果,CSS构成CSS的定义由三部分构成：选择符（selector）、属性（properties）和属性的取值（value）。基本格式如下：selector property: value （选择符 属性：值）应用样式表时遵循的规律 1、如果两个样式同时应用到同一文本中，则浏览器将显示两个
9、样式中的所有属性，除非两个样式表中有冲突的属性设置。2、如果应用到文本中的属性发生了冲突，则浏览器将显示一个最接近文本原始属性的样式。3、若有最直接的属性冲突，则来自CSS样式表的属性将优先于来自HTML标签的属性而首先被应用。,荧光笔效果很多人在准备考试的时候，边读书边用荧光笔在重要的部分画上粗线。网页文档中也可以利用样式表在需要强调的文本上设置背景颜色，看上去具好像是用五颜六色的荧光笔涂画一样。 1、在实例文章中选中部分文字，进入代码视图。 2、如下把添加荧光笔效果的样式表输入到选中的文本之前，然后再结束的部分输入。,理解标记文字的颜色变成黄色是因为在中把文字的背景色设置为“yellow”
10、，因此背景色可以通过输入其他颜色的名称或者颜色代码来改变。在这里使用的标记与其他标记相比并没有什么特别的用处，所以以前还被人称为空闲的标记，也很少使用。但是最近与样式表结合在一起之后，就发挥了很重要的作用。标记在文字段落中的特定部分应用样式表的时候使用，但是已经改变了字号或者在换行的地方都不能应用这一效果。,为图片添加边框下面介绍在与图片相关的标记中应用样式表，使得插入图片之后，在周围出现虚线边框的重新定义HTML标记的方法。该样式表在所有标记中都能应用，因此后来插入到网页文档中的图片也自动出现虚线边框。 1、新建样式表，类型选择标签、标签选择img，单击确定。 2、出现对话框之后，设置如下图
11、。,在整个网页文档上应用样式表在HTML标记上应用样式表的目的是，为了减少繁琐的重复性设置，因此想一次性应用样式表的时候使用这种方法很方便。如果想在整个网页文档上定义特别的属性，就应该在标记上应用样式表，如果想统一设置表格的格式，就应该在标记上定义样式表。修改链接样式一般来说，在文本上建立链接之后，文字就会变成蓝色，同时还出现下划线。如果不喜欢有下划线的蓝色文本，就可以利用相关链接的样式表来取消建立链接的文本下划线，并且还可以根据鼠标的移动来设置不同的文本格式。,取消建立链接的文本下划线，制作出翻转效果 1、新建样式表，为了指定链接的文本样式，类型选择高级、选择器选择a:link，单击确定。出
12、现对话框之后，设置如下图。 2、新建样式表，为了指定将鼠标移上之后的文本样式，类型选择高级、选择器选择a:hover，单击确定。出现对话框之后，设置如下图。,在单击鼠标的瞬间改变链接颜色 1、新建样式表，为了制作单击鼠标的瞬间表现出来的样式表，类型选择高级、选择器选择a:active，单击确定。出现对话框之后，设置如下图。 2、新建样式表，为了对访问过的链接进行设置，类型选择高级、选择器选择a:visited，单击确定。出现对话框之后，设置如下图。,动态链接的4种状态： a:link 链接的正常状态，没有发生任何的动作。 a:visited 被访问过的链接状态。 a:hover 当光标移动到链
13、接上面时的状态。 a:active 选择链接的状态。 （正确的顺序是LVHA）文本菜单在访问一次之后不会翻转根据建立链接的属性，在文本菜单中设置不同的样式表，但是在单击每个文本菜单访问链接页面之后，只能看到“a:visited”样式。换句话说，单击每个菜单访问之后，想要再次访问的时候把鼠标放上去或者是单击之后都会表现出同一种状态。如果在任何情况下都想使用翻转菜单，就需要使用插入翻转图片功能或者使用插入Flash按钮的功能来制作菜单。,自定义列表项目在第2章中，我们为了美化排列的项目，介绍了利用方形、圆形、数字等来编辑排列列表项目的方法。在这一节中我们将介绍应用样式表，利用适合网页整体效果的漂亮
14、图表来编排列表项目的方法。 1、新建样式表，类型选择类、名称输入list，单击确定。出现对话框之后，设置如下图。2、选中要应用样式的文本，对它先使用列表，然后在属性面板的样式中选择“list”,固定背景图像利用样式表可以把背景图片固定在一个特定的位置，并使其保持不动。在这一节中我们将利用相关网页文档背景的背景样式来设置背景图像不会重复出现而是固定在一个特定位置上。 1、新建文档，插入一个1行1列、宽为500像素、边框为0的表格并居中对齐，新建样式表，类型选择类、名称输入back，单击确定。出现对话框之后，设置如下图。 2、为了把完成的样式表应用到网页文档的背景图像，在操作画面下面的标记选项中单
15、击之后，在CSS样式面板中右键单击“back”选择套用。,改变滚动条浏览网页的浏览器在所有地方都以相同的格式表现出来。网页文档较长的情况下，将自动出现滚动条，这种滚动条可以根据需要改变其颜色。利用这用的样式表可以改变滚动条的格式，使其更加符合网页的整体风格，即滚动条也可以当做设计中的一个元素。复制下页代码，在标记之前黏贴。,scrollbar-face：活动的滚动条整体颜色 scrollbar-shadow：滚动条右方和下方的阴影颜色 scrollbar-highlight：滚动条左方和上方的高亮颜色 scrollbar-3dlight：滚动条左方和上方深颜色的线条颜色 scrollbar-darkshadow：滚动条右方和下方细线条颜色 scrollbar-track：没有滚动条的背景颜色 scrollbar-arrow：上方和下方的箭头颜色,注：如果滚动条没有改变，把改为 如果滚动条还没有改变，再把改为,
