DIV+CSS网页布局教程经典最新版.pptVIP

定义的位置有以下三种情况： 选择“仅为该文档”，此时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、字体的样式设置 在“CSS规则定义”对话框的“类型”选项卡中设置。 2、文本段落的样式设置 在“CSS规则定义”对话框的“区块”选项卡，设置。 3、列表的样式设置 类型：设置项目符号或编号的外观。 项目符号图像：指定图像替代项目符号的样式，美化项目符号。 重定义项目列表（标签为UL)。 5.3.3 样式表的实例应3：方框和边框　 样式的应用 在【例5.6】中，插入一幅图像，通过CSS样式的应用，实现了图文混排的效果。该实例中主要设置了方框的浮动和边界及填充的距离，实现了图像与文本之间的环绕，还设置了边框，添加了一个虚线边框修饰图像。这里首先定义了一个类的CSS规则，然后将此类应用于某个图像上。 图像边距的设置 图像的边框的设置 5.3.4 样式表的实例应用4：动态链接样式 简单的CSS链接样式可以在页面属性中的“链接”选项卡中设置，5.1节中已经讲过。 在【例5.6】中，建立较为复杂的CSS链接样式，当鼠标经过链接文字时，文字颜色会变色、字体样式变粗、出现背景颜色、文字修饰有下划线等。这里还讲解两个重要的知识点：如何建立CSS链接样式和如何调用外部CSS样式表。 1.建立链接CSS样式 单击“CSS样式”面板中的“新建CSS规则”按钮，选择器类型：高级，单击“选择器”下拉列表，分别选择a:llink（链接后效果）、a:visited（访问后效果）、a:hover（鼠标经过效果），分别定义其样式。 2. 调用CSS样式文件 其它网页要应用刚才建立的CSS样式文件，如何调用呢？单击“CSS样式”面板中的“附加样式表”按钮，弹出“链接外部样式表”的对话框，在“文件/URL”文本框中输入外部CSS文件路径和文件名，添加为选择“链接”选项，将新建的样式文件链接到此文件，如图所示。 5.3.5 样式的实例5：滤镜效果的应用 CSS滤镜并不是浏览器的插件，也不符合CSS标准，而是微软公司为增强浏览器功能而特意开发的并整