2014年《商务网站规划与网页制作》08-02.pptVIP

8.2CSS样式表 8.2.1CSS样式表的含义 CSS是层叠样式表（Cascading Style Sheets）的缩写，因此它最基本的概念就是层叠。 所谓“层叠”有两层含义： 第一：可以将多个样式表应用到一个网页，比如可以创建一个样式表来格式化文本，再创建一个样式表格式化表格。然后将这两个样式表添加到同一个网页，此为“层叠”。 第二：可以将三种定义的样式表同时应用于一个网页，此亦为“层叠”。 1. CSS样式表的三种定义和使用的途径 （1）外部样式表： 将一些样式信息定义在一个单独的外部文件中，其扩展名为.CSS。整个网站的所有文件都可以链接此文件，并使用其中定义的样式。将一些样式信息定义在一个单独的外部文件中，其扩展名为.CSS。整个网站的所有文件都可以链接此文件，并使用其中定义的样式。 （2）内部样式表 内部式样式表只在当前网页中起作用，与网页文件一起保存。事实上它是一系列包含在 HTML 文档文件头部分的 style 标记内的 CSS 规则。 3）内联样式表： 将样式信息直接定义在网页中特定的标记和元素上，这种类型的样式表通常在使用网页元素的“属性”对话框上的“样式”按钮添加样式时创建。严格地说，内联样式表称不上表，它仅仅是一条HTML标记而已。 2. 三种定义之间的关系 这三种定义中内联样式表最优先，其次是内部样式表，最后是外部样式表。它们之间是互相影响、互相继承的关系。 网页元素最终显示的样式是优先级最高的样式，同时各元素会自动继承上级父元素中定义的样式 3. CSS样式表的功能 （1）对布局、字体、颜色、背景和其它图文效果实现更加精确的控制。 （2）只通过修改一个文件就可以改变页数不计的网页的外观和格式。 （3）在所有浏览器和平台之间具备兼容性。样式表的代码有很好的兼容性，也就是说，如果浏览者丢失了某个插件时不会发生中断，使用老版本的浏览器时，代码也不会出现杂乱无章的情况。 （4）能够简化网页的格式代码，从而加快页面下载的速度。 8.2.2新建CSS样式表 在Dreamweaver中可以定义三种主要类型的CSS样式表 ●自定义样式：也称类样式，如果需要设置一定范围内或一个区块内文本的属性，就要使用这种样式表。在使用自定义样式表时，必须给它指定名称。 ●HTML标签：用于重新定义标签的外观，如创建或修改table标签的CSS样式，将会影响网页内的所有表格。 ●高级样式：也称CSS 选择器样式，用于重新定义特定元素组合的格式设置，或重新定义 CSS 允许的其他选择器表单的格式设置，比如，每当 h3 标题出现在表格单元格内时都应用选择器 td h3。 这三种类型的样式表即可以定义为外部样式表，又可以定义为内部样式表。 1．新建内部样式表 ·“字体”：为样式设置字体。 ·“大小”：定义文本大小。 ·“样式”：为字体指定样式，包括“正常”、“斜体”或“偏斜体”。 ·“行高”：设置文本所在行的高度。 ·“修饰”：向文本中添加下划线、上划线或删除线，或使文本闪烁。 ·“粗细”：对字体应用特定或相对的粗体量。 ·“变量”：设置文本的小型大写字母变量。 ·“大小写”：将所选内容中的每个单词的首字母大写或将文本设置为全部大写或小写。 ·“颜色”：设置文本颜色。 ·“背景颜色”：设置元素的背景颜色。 ·“背景图像”：设置元素的背景图像。 ·“重复”：确定是否以及如何重复背景图像。“不重复”：只在元素开始处显示一次图像；“重复”在元素的后面水平和垂直平铺图像；“横向重复”和“纵向重复”分别显示图像的水平带区和垂直带区。图像被剪辑以适合元素的边界。 ·“附件”：确定背景图像是固定在它的原始位置还是随内容一起滚动。注意，某些浏览器可能将“固定”选项视为“滚动”。 ·“水平位置和垂直位置”：指定背景图像相对于元素的初始位置。这可以用于将背景图像与页面中心垂直和水平对齐。如果附件属性为“固定”，则位置相对于“文档”窗口而不是元素。 ·“单词间距”：设置单词的间距。 ·“字母间距”：增加或减小字母或字符的间距。若要减小字符间距，请指定一个负值（例如 -4）。 ·“垂直对齐方式”：指定应用它的元素的垂直对齐方式。 ·“文本对齐”：设置元素中的文本对齐方式。 ·“文本缩进”：指定第一行文本缩进的程度。可以使用负值创建凸出，但显示方式取决于浏览器。 ·“空白”：确定如何处理元素中的空白。从下面三个选项中选择：“正常”收缩空白；“保留”即保留所有空白，包括空格、制表符和回车；“不换行”指定仅当遇到br标签时文本才换行。 ·“显示”：指定是否以及如何显示元素。“无”关闭应用此属性的元素的显示。 ·“宽和高”：设置元素的宽度和高度。 ·“浮动”：设置其他元素（如文本、层、表