DIV+CSS网页布局课件.ppt

5.2 使用CSS样式表 5.2.1 CSS样式表概述 1、样式表的使用 CSS样式表的使用常用的方法有以下两种： 页面内嵌法。将样式表代码直接写在HTML标签的head区。 外部链接法。将样式表写在一个独立的后缀名为CSS文件中，在需要应用CSS样式的网页中链接该文件，在页面head和/head之间用以下代码调用。link href=css/master.css rel=stylesheet type=text/css / 5.2 使用CSS样式表 2、CSS样式表语法选择符 { 属性1：值1；属性2：值2…… } 参数说明： 属性和属性值之间用冒号(:)隔开，定义多个属性时，属性之间用分号(;)隔开。 1. 创建CSS样式 选择“窗口”菜单｜“CSS样式”命令，打开“CSS样式”面板，单击右下角的“新建CSS规则”按钮，或选择“文本”菜单｜“CSS样式”｜“新建”命令，弹出“新建CSS规则”对话框. 5.2.2 在Dreamweaver中定义CSS 5.2.2 在Dreamweaver中定义CSS 选择器类型有以下三种： （1） 类 自定义 CSS 规则，它的特点是灵活多变，可以重复将样式应用于网页元素。在应用时，它会在HTML标签内加入一个类（class）的定久来规定标签中的格式。比如将类的样式mystyle定义于某个标题，那么代码为： h1 class=”mystyle”标题1应用自定义的样式/h1 （2） 标签 重新定义指定标签的外观，例如：创建或更改 h1 标签的 CSS 样式时，所有用 h1 标签设置了格式的文本都会立即更新，实现了批量快速更改格式的特点。 5.2.2 在Dreamweaver中定义CSS （3） 高级 在CSS 选择器中，它的功能最为强大，可以定义超链接的特效，定义特定元素组合的格式设置（例如：body,table,td，用逗号隔开），定义嵌套的样式（td img　空格隔开），定义包含特定 id 属性的标签的格式设置。 定义的位置有以下三种情况： 选择“仅为该文档”，此时CSS样式的代码会嵌套在网页head和/head标签中。 选择“新建样式表文件”，则弹出“保存样式表文件为”对话框，如图5.5所示，选择样式文件的存储路径和文件名，单击“保存”按钮，将CSS样式代码单独存放在一个CSS文件。 选择“已有的某CSS文件”，将新建的CSS规则写入已有的css文件中。 比如：选择定义在“仅对该文档”，单击“确定”按钮后，弹出“H1的CSS规则定义”对话框，如图所示，在对话框中进行各项的格式设置，然后单击“确定”按钮。 2.编辑和删除CSS样式 创建CSS样式后，如果要修改CSS样式，在“CSS样式”面板中，单击“CSS样式”面板右下角的“编辑”按钮，进入“CSS规则定义”的对话框，可进行修改。 某个CSS样式不再需要时，在“CSS样式”面板中，首先选中某个样式，单击CSS样式面板右下角的“删除”按钮。 5.3 CSS 样式的应用 【例5.6】应用CSS样式设计出图文混排效果，如图所示。 此实例所涉及到的知识点是CSS样式的创建和应用，主要包括以下几个方面： 背景样式、文本及列表样式、方框与边框样式、动态链接样式； 建立单独的CSS文件，应用于多个网页。 5.3.1 样式表的应用实例1：背景样式 　　　的应用 在【例5.6】中，上方桔黄色的横条其实是重定义了body标签的网页背景图像，背景图像横向重复，网页元素与页边距也进行了设置，其操作步骤如下： 步骤１ 单击“窗口”菜单｜“CSS样式”命令，打开“CSS样式”面板，单击右下角的“新建CSS规则”按钮，弹出“CSS规则定义”的对话框，选择“选择器类型”为“标签”，在“标签”下拉列表中选择body，定义在：选择“仅为该文档”，单击“确定”按钮，弹出 “body的CSS规则定义”的对话框， 单击“背景”选项卡，设置背景图像为：images/bg.gif，单击“重复”下拉列表，选择“横向重复”命令。 步骤2 设置页边距单击“方框”选项卡，在边界中分别设置上、下均为50像素，左右均为100像素。 5.3.2 样式表的实例应用2：文本及列　　表的应用 在【例5.6】中，文本和列表都应用了CSS样式，分别设置字体、段落、列表的相关属性。第一行文本是标题1（标签为H1），第二行文本是标题2（标签为H2），正文部分用了列表（标签为UL）。 1、字体的样式设