第5章网页内容的修饰－CSS样式.ppt

第5章 网页内容的修饰－CSS样式 教学内容：CSS样式的类型、创建CSS样式、编辑CSS样式、设置CSS样式的基本属性、链接和导出CSS样式表、CSS在网页中的应用。 教学重点和难点：掌握在网页中添加、应用CSS样式的方法。 5.1 初识CSS CSS样式就像word中的格式刷,可以对众多网页中的文本及文本区外观进行统一控制。 5.1.1 样式表的概念 样式表是为了弥补HTML语言而开发，调整字间距、行间距、取消链接的下划线、固定背景图像等样式表可以实现原来的HTML标记无法实现的效果。 1．样式表的优点 （1）内容结构和格式控制相分离 （2）精确控制网页外观 （3）制作体积下，下载页面快 （4）快速规格网页样式 （5）兼容不同浏览器 2．样式表标记 定义样式表的部分用style /style标记来表示。 样式表的内容应该位于head/head标记之间。 在Dreamweaver中为指定字体、字号、文字颜色来定义样式表的时候，在代码视图中出现的HTML代码会出现字体{font-family}或者{font-size}等属性，并且以冒号为间隔设置属性值。属性和属性由分号来区分。 应用样式表的文字包括在span/span标记之间。 有!--和--注释标记来套用样式表是因为样式表在Explorer 和Netscape 4.0以上的浏览器中才被支持，使用该注释标记是为了在其他浏览器中被忽略通过。 5.1.2 CSS样式的类型 1．类样式（class） 类样式的名称必须以句点（英文状态）开头，后跟字母或字母和数字组合（例如，.mycss）。 为类样式命名时，不能使用body，table等与“标签”样式相冲突的HTML标签名称。 class的类别定义在代码中是写在style与/style标记之间，并放在head标记之下，一份网页只要写一次即可。 2．标签样式 标签样式表示重新定义特定HTML标签的外观。 3．高级样式 高级样式会对某一具体的标签组合或者含有特定ID属性的标签应用样式。 高级样式还常用于设定超链接，即通过“新建CSS样式”对话框的“选择器”下拉菜单中提供的四个选项，定义超链接的四种状态。 a:link：超链接文字的一般状态 a:visited：超链接文字已链接过的状态 a:hover：鼠标光标移到超链接文字上的状态 a:active：超链接文字正在链接中的状态 5.2使用CSS编辑器 使用CSS编辑器可以创建、编辑和删除CSS样式。并且可以将外部样式表文件附加到当前文档。 “附加样式表”：单击该按钮会打开“链接外部样式表”对话框，可选择要链接到或导入到当前文档中的外部样式表。 “新建CSS规则”：打开“新建CSS样式”对话框，可以选择创建的样式类型。如类样式、标签样式或高级样式。 “编辑样式”：打开“CSS样式定义”对话框，可编辑当前文档或外部样式表中的样式。 “删除CSS规则”：删除“CSS样式”面板的所选样式，并从应用该样式的所有元素中删除格式，但是不删除对该样式的引用。 5.2.1 创建CSS新样式 1．创建标签样式 例1：将页面背景色设置成土黄色(#996600)，页面左边界、上边界均为0。 操作步骤如下: ① 单击“CSS样式”面板中的“新建CSS样式”按钮。在“新建CSS样式”对话框中，“选择器类型”设置为“标签”，在“标签”下拉菜单中选择 body ，“定义在”设置为“仅对该文档”，然后单击“确定”按钮，创建一个名为body的标签样式。 ② 在“body的CSS规则定义”对话框中设置该样式的属性，在“分类”的“背景”项中设置网页的背景颜色为“#996600”。然后将“分类”切换到“方框”，在边界区域分别设置页面的上、左边界为“0”像素。 ③ 单击“确定”按钮后，在“CSS样式”面板中会增加body样式名称，并且定义的样式会自动应用到页面中。 ④ 将页面切换到“拆分”视图，我们会发现body标签出现在代码里，是包围在style与/style这对标记之间，并且镶嵌在网页的head标记下。 ⑤ 保存网页，按F12键预览网页。 2．创建类样式 例2：为页面设置标题，将标题设置为“黑体，24点数（pt）”。 具体操作如下： ① 单击“CSS样式”面板中的“新建CSS样式”按钮。在“新建CSS样式”对话框中，“选择器类型”设置为“类”，名称输入“.style2”，“定义在”设置为“仅对该文档”，单击“确定”按钮。 ② 在出现的“.style2的CSS规则定义”对话框中，设置类型项中的字体为“黑体”，大小为“24