第7章精通CSS样式剖析.ppt

7.1.1　了解CSS样式的发展历程 CSS 是Cascading Style Sheets（层叠样式表）的缩写，它是一种对Web 文档添加样式的简单机制，是一种表现HTML 或XML 等文件外观样式的计算机语言，它是由W3C 来定义的。CSS 用来作为网页的排版与布局设计，在网页设计制作中无疑是非常重要的一环。CSS 是以已有的基础来弥补HTML 中的不足，也让网页设计更为灵活。 随着CSS的广泛应用，CSS技术也越来越成熟。CSS现在有3个不同层次的标准，即CSS 1、CSS 2 和CSS 3。 CSS 1是CSS 的第一层次标准，它正式发布于1996年12月，在1999年1月进行了修改。该标准提供简单的CSS样式表机制，使得网页的编写者可以通过附属的样式对HTML 文档的表现进行描述。 CSS 2是1998 年5 月正式作为标准发布的，CSS 2基于CSS 1，包含了CSS 1的所有特点和功能，并在多个领域进行完善，将样式文档与文档内容相分离。CSS 2 支持多媒体样式表，使得网页设计者能够根据不同的输出设备给文档制定不同的表现形式。 CSS 3 目前还处于工作草案阶段，还没有正式发布，在该工作草案中制定了CSS 3的发展路线，详细列出了所有模块，并计划在未来进行规范。 7.1.2　CSS样式的优势 CSS 样式可以为网页上的元素精确地定位和控制传统的格式属性（如字体、尺寸、对齐等），还可以设置如位置、特殊效果、鼠标滑过之类的HTML属性。 7.1.3　CSS样式的不足 CSS 的功能虽然很强大，但是它也有某些局限性。CSS 样式表的主要不足是，它局限于主要对标签文件中的显示内容起作用。显示顺序在某种程度上可以改变，可以插入少量文本内容，但是在源HTML（或XML）中做较大改变，用户需要使用另外的方法，例如使用XSL转换（或XSLT）。 同样，CSS 样式表的出现比HTML 要晚，这就意味着一些最老的浏览器不能够识别用CSS 所写的样式，并且CSS 在简单文本浏览器中的用途也有限，例如为手机或移动设备编写的简单浏览器等。 在Dreamweaver CC中全面支持最新的CSS 3属性设计，重新规划了“CSS设计器”面板，并且对CSS样式的创建方法和创建流程进行了改进，使得用户在Dreamweaver中创建CSS样式更加方便和快捷。 “CSS设计器”是Dreamweaver中非常重要的面板之一，CSS样式的创建与管理全部集成在全新的“CSS设计器”面板中。在该面板中支持可视化的创建与管理网页中的CSS样式，在该面板中包括“源”、“@媒体”、“选择器”和“属性”4个部分，每个部分针对CSS样式不同的管理与设置操作。 7.1.4　CSS样式的基本语法 CSS语言由选择器和属性构成，样式表的基本语法如下： CSS选择器{属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; ……} 7.2.1　“源”选项区 “CSS设计器”面板上的“源”选项区用于确定网页使用CSS样式的方式，是使用外部CSS样式表文件还是使用内部CSS样式。单击“源”选项区右上角的“添加源”按钮 ，在弹出菜单中提供了3种定义CSS样式的方式 7.2.2　“@媒体”选项区 在“CSS设计器”面板中新增了有关媒体查询的功能，在“@媒体”选项区中可以为不同的媒介类型设置不同的CSS样式。 7.2.3　“选择器”选项区 “CSS设计器”面板中的“选择器”选项区用于在网页中创建CSS样式，网页中所创建的所有类型的CSS样式都会显示在该选项区的列表中，单击“选择器”选项区右上角的“添加选择器”按钮 ，即可在“选择器”选项区中出现一个文本框，用于输入所要创建的CSS样式的名称。 7.2.4　“属性”选项区 “CSS设计器”面板中的“属性”选项区主要用于对CSS样式的属性进行设置和编辑，在该选项区中将CSS样式属性分为5种类型，分别是“布局”、“文本”、“边框”、“背景”和“其他”。单击不同的按钮，可以快速切换到该类别属性的设置。 7.3.1　通配符选择器 在CSS样式中提供了多种类型的CSS选择器，在创建CSS样式时，首先需要了解各种类型选择器的作用，以便选择合适的选择器创建CSS样式，本节将向读者介绍CSS样式中的各种选择器类型，以及不同CSS选择器的使用方法。 在进行网页设计时，可以利用通配选择器设置网页中所有的HTML标签使用同一种样式，他对所有的HTML元素起作用。通配选择器的基本语法如下。 * {属性:属性值; } *表示页面中的所有