《《网页设计之dreamwavercs5》教案10》由会员分享，可在线阅读，更多相关《《网页设计之dreamwavercs5》教案10（12页珍藏版）》请在金锄头文库上搜索。
1、第十章第十章 CSS 样式表的应用样式表的应用如果说目前在 Web 设计和开发技术领域，什么是非常“火”的新技术，CSS/DIV 页面的布局无疑是其中之一1 1CSSCSS 的概念的概念 CSSCSS（CascadingCascading StyleStyle SheetSheet），中文译为层叠样式表，），中文译为层叠样式表，是用于控制网页样式 并允许将样式信息与网页内容分离的一种标记性语言。对于一个网页设计者来说，HTML 语言一定不会感到陌生，因为它是所有网页制 作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那 么仅仅 HTML 是不够的，CSS 在这中间扮演着重要的
2、角色。本课从 CSS 的基本概 念出发，介绍 CSS 语言的特点，以及如何在网页中引入 CSS，并对 CSS 进行初 步的体验。（其实我们在前面的课程中已经接触到其实我们在前面的课程中已经接触到）作用：例子演示。从 CSS 对标记的控制入手，讲解 CSS 的初步知识以及编辑方法。希望大家能够 掌握下一面几个方面的内容：标记的概念 传统 HTML 的缺点 CSS 的引入 特点：1） 灵活控制网页中的每个元素的样式2） 把内容和格式处理相分离，提高工作效率注：CSS 是 1996 年由 W3C 审核通过，并且推荐使用的。简单的说 CSS 的引入就 是为了使得 HTML 能够更好的适应页面的美工设计
3、。它以 HTML 为基础，提供了 丰富的格式化功能，如字体、颜色、背景、整体排版等等，并且网页设计者可 以针对各种可视化浏览器设置不同的样式风格，包括显示器、打印机、打字机、投影仪、PDA 等等。CSS 的引入随即引发了网页设计的一个又一个新高潮，使用 CSS 设计的优秀页面层出不穷。2.2.如何编辑如何编辑 CSSCSS 样式样式1) 属性面板快捷操作2）使用 CSS 样式面板A管理 CSS 规则按钮（添加按钮、链接按钮、修改按钮、删除按钮） B显示规则列表（显示全部元素的样式、显示当前编辑元素的样式） C显示所选规制属性 D查看 CSS 属性视图按钮（分类、按字母排列、显示设置）3）手工输
4、入代码3.CSS3.CSS 选择器选择器 选择器（selector）是 CSS 中很重要的概念，所有 HTML 语言中的标记都是通过 不同的 CSS 选择器进行控制的。用户只需要通过选择器对不同的 HTML 标签进行 控制，并赋予各种样式声明，即可实现各种效果。希望大家能够掌握以下几个 方面的内容：标记选择器 （对标记起作用）类别选择器 ID 选择器同一个同一个 IdId 选择器不能同时出现在两个标记中的，原因是选择器不能同时出现在两个标记中的，原因是 idid 不但用于不但用于 CSSCSS 同时同时 也是也是 javascriptjavascript 语法的一个目标设置。所以相同的语法的一
5、个目标设置。所以相同的 idid 名称会造成混乱。名称会造成混乱。4.4.小试牛刀小试牛刀-css-css 美化页面美化页面1） 设置网页属性设置（字体 12 像素、黑色；背景图片 bg.gif；边距均为 0） 2） 创建表格边框样式 .line （颜色#CC66FF） 3) 设置底部文字的样式 .white （字体白色） 4） 美化输入文本框样式 .input5 5选择器的复合声明选择器的复合声明 在利用 CSS 选择器控制 HTML 标记时，除了每个选择器的属性可以一次声明多个， 选择器本身也可以同时声明多个，并且任何形式的选择器包括标记选择器、 class 类别选择器、ID 选择器等都是
6、合法的。6 6 CSSCSS 的嵌套与继承的嵌套与继承 1）选择器的嵌套2 继承，简单的说就是将各个 HTML 标记看作一个个容器，其中被包含的小容器 会继承所包含它的大容器的风格样式。我们在这里从页面各个标记的父子关系 出发，讲解 CSS 的继承。7.7. 应用应用 CSSCSS 到网页中到网页中 在对 CSS 有了大致的了解后，便希望使用 CSS 对页面进行全方位的控制。我们 在这里主要介绍如何使用 CSS 控制页面，以及其控制页面的各种方法，包括行 内样式、内嵌式、链接式、导入式等。并最后探讨各种方式的优先级问题。希 望大家能够掌握以下几个方面的内容：内嵌式内嵌式 （写在（写在 head
7、head 头部信息中）头部信息中） 行内样式行内样式 （写到（写到 htmlhtml 标记里面）标记里面） 链接式链接式 （适合多个页面使用）（适合多个页面使用） 导入样式 各种方式的优先级问题 行内样式行内样式内嵌式内嵌式 链接式链接式8.8.综合实例综合实例1） 新建名称为“.title1”的类样式，定义在样式表文件“css2.css”中，具体设置如下：类型分类下设置：字体“隶书” ，大小“24” ，颜色“#FF0000”理解“行高”的定义2）.新建名称为“.tb”的类样式，定义在样式表文件“css2.css”中，具体设置如下：在“背景”分类下设置背景颜色为“#EEDEDB” 。3） 新建
8、关于标签“body”的样式，定义在新的样式表文件“css2.css”中，具体设置如下：分类具体设置类型字体“楷体” ，大小“14” ，行高“16”背景背景颜色“#DFC0BB”区块文本对齐“居中”所有浏览器都支持 vertical-align 属性。可能的值可能的值值值描述描述baseline默认。元素放置在父元素的基线上。sub垂直对齐文本的下标。 H20super垂直对齐文本的上标 52=25top把元素的顶端与行中最高元素的顶端对齐text-top把元素的顶端与父元素字体的顶端对齐middle把此元素放置在父元素的中部。bottom把元素的顶端与行中最低的元素的顶端对齐。text-bot
9、tom把元素的底端与父元素字体的底端对齐。length长度单位与基线的位移数值%使用 “line-height“ 属性的百分比值来排列此元素。允许使用负值。inherit规定应该从父元素继承 vertical-align 属性的值。http:/ 新建名称为“.copy”的类样式，定义在样式表文件“css2.css”中，具体设置如下：分类具体设置类型字体“宋体” ，大小“12” ，行高“25”颜色“#333333”背景背景颜色“#04A292”区块文本对齐“居中”5）. 新建名称为“.img01”的类样式，定义在样式表文件“css2.css”中，具体设置如下：分类具体设置边框样式“outset”
10、 ，宽度“4px” ，颜色“#846761”方框宽“270px” ，高“180px” ，浮动“向左”填充“5px” ，边界“5px”6）. 新建名称为“.lead”的类样式，定义在样式表文件“css2.css”中，具体设置如下：分类具体设置类型字体“宋体” ，大小“14” ，行高“25”颜色“#FFFFFF”背景背景颜色“#03756B”区块文本对齐“居中”方框宽“109” ，高“25”边框样式：“上”下拉列表框中选择“实线”宽度：取消全部相同“右”下拉列表框 “1”“上” 、 “下” 、 “左”下拉列表框 “0”颜色：取消全部相同“右”下拉列表框 “#FFFFFF”7） 设置链接样式超级链接
11、的 4 种状态a:link 超链接默认状态a:visited 已经浏览过的链接a:hover 鼠标经过时a:active 点击链接时鼠标经过时背景颜色为：#33FF998重建重建 css 样式表文件样式表文件 css3.css，改变网页风格。，改变网页风格。例如:下图样例。要点：1)、练习配色。2) 使用样式表的滤镜，对图片增加效果。filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=0, StartY=0, FinishX=300, FinishY=240);height: 300px;width: 660px;Alpha(
12、Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)Opacity：透明度级别，范围是 0-100，0 代表完全透明，100 代表完全不透明。FinishOpacity：设置渐变的透明效果时，用来指定结束时的透明度，范围也是0 到 100。Style：设置渐变透明的样式，值为 0 代表统一形状、1 代表线形、2 代表放射状、3 代表长方形。StartX 和 StartY：代表渐变透明效果的开始 X 和 Y 坐标。FinishX 和 FinishY：代表渐变透明效果结束 X 和 Y 的坐标。9
13、. CSS 使用技巧使用技巧1）CSS 禁用/启用 CSS 禁用/启用允许您直接从 CSS 样式面板禁用和重新启用 CSS 属性。禁用 CSS 属性只会取消指定属性的注释，而不会实际删除该属性。2）CSS 检查 检查模式允许您以可视化方式详细显示 CSS 框模型属性，包括填充、边框和 边距，无需读取代码，也不需要独立的第三方实用程序（如 Firebug） 。3）浏览器兼容性测试 由于不同的浏览器对 CSS 样式标准的执行情况不一样，会导致同样的网页在不 同的浏览器中显示的差异性。DIVCSS 网页排版具有利于 SEO 和网页打开速度更快的优点，然而浏览器兼容 问题一直困绕着许多从事 DIVCSS 网页排版的美工人员。设计时主要要兼顾 IE 系列浏览器（ie 6、ie7、ie8）
