12CSS使用样式课件.pptVIP

第8章 使用样式; 1 什么是 CSS 样式 CSS（Cascading Style Sheet，层叠样式表）技术是一种格式化网页的标准方式，它扩展了 HTML 的功能，使网页设计者能够以更有效的方式设置网页格式。CSS 样式表中的层叠是指多个 CSS 样式表可以同时应用于同一个页面或网页中的同一元素，浏览器根据 CSS 标准中定义的层叠规则来决定哪一种样式优先，优先的样式将覆盖其他样式。 ; CSS 样式表是由一系列样式选择器和 CSS 属性组成，它支持字体属性、颜色和背景属性、文本属性、边框属性、列表属性以及精确定位网页元素属性等，从而大大增强了网页的格式化能力。 除了功能强大这个优点外，使用 CSS 样式的另一优点是可以使用同一个样式表对整个站点的具有相同性质的网页进行格式修饰，当需要更改这些页面的样式设置时，只要在这个样式表中修改，而不用对每个页面逐个进行修改，从而大简化了格式化的工作。 ;在 Dreamweaver 中 CSS 样式的类型包括以下几种： ? 自定义 CSS 样式（也称为 class 类样式），它在网页中定义了一个 CSS 样式属性集，当页面中的对象引用该样式后，所定义的 CSS 属性应用到页面中。此类样式是应用最为广泛的一种样式类型。（因可自由定义所需的样式）; ? 重新定义 HTML 标签样式，该类样式只能对 HTML 标签重新定义，样式的名字只能选择，不能修改，不能输入新的名字，否则无效。例如，创建或更改 H1 标签（对应于段落格式中的“标题 1”）的 CSS 样式时，网页中的所有使用 H1 标签设置了该格式的文本都能立即被更新。 ? CSS 选择器样式，该类样式可以定义网页中的超链接效果，同样样式的名字也只能选择，不能修改。例如，可以使超链接文字在各种状态下均无下划线，并且当鼠标悬停时文字颜色由蓝色变为红色等。 设定后，本页面的所有超链接均会按所设定的外观来显示。; 在网站中使用 CSS 样式的方式与 HTML 样式相同，需要先创建 CSS 样式，然后在应用到网页或整个网站中。 1．使用“CSS 样式”面板 在网站或网页中创建和应用 CSS 样式时，需要使用“CSS 样式”面板。选择“窗口”菜单中的“CSS 样式”命令或按【Shift + F11】键，可以打开“CSS 样式”面板。 ; 在文档窗口中，class 类样式将出现在 “CSS 样式面板”中，如图8.5 所示。而对于创建的其他两种样式，将直接包含在网页代码或 CSS 外部样式表中，而不会显示在“CSS 样式”面板。;2．创建 CSS 样式 在文档中要创建 CSS 样式，首先将“CSS 样式”面板打开，然后执行以下步骤。 （1）在 CSS 样式面板中，单击“新建 CSS 样式”按钮 ，打开“新建 CSS 样式”对话框，如图8.6 所示。;（2）在“新建 CSS 样式”对话框中进行如下设置：如果选择“创建自定义样式（class）”样式类型，则在“名称”文本框中输入样式名称；如果选择“重定义HTML 标签”或“使用 CSS 选择器”样式类型，则在“名称”文本框中选择相应的样式名称。;（3）在“定义在”框中选择，如果选择“新建样式表文件”选项，如果曾经定义过样式表文件，则可以从列表中选择一个文件；如果选择“仅对该文档”单选按钮，表示样式将直接定义在当前文档中。;（4）单击“确定”按钮，如果选择“新建样式表文件”选项，则打开“保存样式表文件”对话框，进行保存设置即可后弹出“样式名称的CSS 样式定义”对话框；则直接弹出“样式名称的 CSS 样式定义”对话框，如图8.7 所示。;（5）用户可以在“分类”列表框中选择 8 种 CSS 样式属性，Dreamweaver 选择相应属性分类后则在对话框右部会显示相应的选项，可以根据需要设置。 （6）最后单击“确定”按钮，则样式定义完毕。;1.字体属性 字体属性用于设置网页中的字符的显示方式，如字符的大小、粗细和字体等。 （1）font-family属性 功能：用于设置HTML元素的字体列表。 例如：H1{font-family:楷体_gb2312,黑体,斜体} （2）font-style属性 功能：用来设置指定元素的字形样式。其值可为normal(普通)、italic(斜体)和oblique(偏斜)。 例如：H1{font-style: oblique };（3）font-variant属性 功能：用于在正常与小型大写字母字体间切换。其中normal为缺省值，表示正常字体；small-caps表示小型大写字母。