2016网页制作（主编高律-科学出版社）使用CSS样式.docVIP

第十三节 使用CSS样式 【计划课时】：3课时 【授课班级】：计算机应用一班 【教学目的与要求】 【教学方法与手段】 多媒体教学：借助多媒体手段，进行课堂理论教学； 启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；? 【教学重点与难点】： 基础知识：。 重点知识： 【教学组织过程】 1．上讲回顾 2．教授新知 【授课内容】 一、CSS概述 CSS（Cascading Stylesheets，层叠样式表）是一种制作网页的新技术，现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。使用CSS能够简化网页的格式代码，加快下载显示的速度，也减少了需要上传的代码数量，大大减少了重复劳动的工作量。 CSS样式有以下几个重要的作用： 1、将格式与结构分离 2、增强控制页面布局的能力 3、简化代码，提高下载速度 4、使维护和更新网页变得更加容易 5、代码兼容性更好 B 二、创建一个新的CSS样式 1、显示“CSS样式”面板（“窗口”—“CSS样式”） “附加CSS样式”按钮、“新建CSS样式”、“编辑CSS样式”按钮、“删除CSS样式” 2、创建自定义CSS样式（在“CSS样式”面板中选择“新建CSS样式”按钮） 类（可应用于任何标签） 输入名称：（加“.”） 定义在：新建样式表文件、仅对该文档 标签（重新定义特定标签的外观） 标签：（选择标签） 选择类型 定义在： 高级（ID、上下文选择器等） a:link：定义正常状态下链接文字的样式 a:visited：定义已访问过的链接文字的样式 a:hover：定义鼠标指针移到链接文字时文字的样式 a:active：定义按下鼠标左键时链接文字的样式 三、设置CSS样式格式 1、编辑CSS样式文字格式 字体、大小、粗细、样式、变量、行高、大小写、修饰、颜色 2、编辑CSS样式背景格式 背景颜色、背景图像、重复、附件、水平位置、垂直位置 3、编辑CSS样式块格式 单词间距、字母间距、垂直对齐、文本对齐、文字缩进、空格、显示 4、编辑CSS样式框格式 宽、高、浮动、清除、填充、边界 5、编辑CSS样式边框格式 样式、宽度、颜色 6、编辑CSS样式列表格式 类型、项目符号图像、位置 7、编辑CSS样式定位格式 类型、显示、宽、高、Z轴、溢出、定位、剪辑 编辑CSS样式扩展格式 分页、视觉效果 四、应用CSS样式 添加层叠样式表的方法 我们为网页添加样式表的方法有四种。 1．最简单的方法是直接添加在HTML的标识符（tag）里： Tag style=”properties”网页内容 /tag 举个例子： p style=”color: blue; font-size: 10pt”CSS实例 /p 代码说明： 用蓝色显示字体大小为10pt的“CSS实例”。尽管使用简单、显示直观，但是这种方法不怎么常用，因为这样添加无法完全发挥样式表的优势“内容结构和格式控制分别保存”。 2．添加在HTML的头信息标识符 head里： head style type=”text/css” !-- 样式表的具体内容 -- /style /head type=”text/css”表示样式表采用MIME类型，帮助不支持CSS的浏览器过滤掉CSS代码，避免在浏览器面前直接以源代码的方式显示我们设置的样式表。但为了保证上述情况一定不要发生，还是有必要在样式表里加上注释标识符“ !--注释内容--”。 3．链接样式表 同样是添加在HTML的头信息标识符 head里： head link rel=”stylesheet” href=”*.css” type=”text/css” media=”screen” /head *.css是单独保存的样式表文件，其中不能包含 style标识符，并且只能以css为后缀。 Media是可选的属性，表示使用样式表的网页将用什么媒体输出 4．联合使用样式表 同样是添加在HTML的头信息标识符 head里： head style type=”text/css” !-- @import “*.css” 其他样式表的声明 -- /style /head 以@import开头的联合样式表输入方法和链接样式表的方法很相似，但联合样式表输入方式更有优势。因为联合法可以在链接外部样式表的同时，针对该网页的具体情况，做出别的网页不需要的样式规则。 需要注意的是： ·联合法输入样式表必须以@import开头。 ·如果同时输入多个样式表有冲突的时候，将按照第一个输入的样式表对网页排版。 ·如果输入的样式表和网页里的样式规则冲突时，使用外部的样式表。 层叠样式表的格式 一般来说，样式表的声明分为选择符（selector）和块{}