网页设计css新.ppt

网页设计与制作 第四章层叠样式表的应用 南京审计学院 精美的网页离不开CSS技术，使用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。CSS样式的全名为Cascading Style Sheet，它可以定义HTML标签，按列表的语法将许多文字、图片、表格、表单、图层等设计加以格式设定。在HTML语法中，常常需要使用到一些设定颜色、字体大小或框线粗细之类的标签，而CSS在开始制作网页时就将这些设定做好，不需要在制作网页文档时再反复写入同样的标签。 chap4 层叠样式表的应用 CSS基础知识 CSS结构与规则 CSS属性 将样式表加入到HTML中 CSS应用实例 1.CSS 概述 是在网上精确定位的一种技术。在一个 HTML 文档中加入一个 CSS 样式表，可以更确定地控制一个文档的外貌。如改变一个链接的下划线等以前无法实现的功能。是一种格式化网页的标准方式。 2. CSS技术的优点： 方便网页格式的修改 便于减少网页体积 能使网页元素更准确的定位 良好的适应性 3.CSS 的构成 一个样式表由样式规则组成, 以告诉浏览器怎样去呈现一个文档. 将样式规则加入到HTML文档中的方法 ：使用HTML的STYLE组件. 这个元素放置于文档的HEAD部分, 包含网页的样式规则. CSS规则由两部分组成：选择器和声明(大多数情况下为包含多个声 明的代码块)。选择器是标识已设置格式元素的术语，例如 p、h1、类名 称或ID，而声明块则用于定义样式属性。 样式规则组成如下: 　选择符 { 属性1: 值1; 属性2: 值2 ；……} 3.CSS 的构成 选择符共有六种： 4.CSS应用举例 HEAD TITLECSS例子/TITLE STYLE TYPE=text/css H1 { font-size: x-large; color: red } H2 { font-size: large; color: blue } /STYLE /HEAD 说明：以上是一段定义了H1和H2元素的颜色和字体大小属性 1.基本语法 规则 组合 继承 注解 1.基本语法 （1）规则 HTML选择符 类选择符 ID 选择符 关联选择符 　 HTML选择符 任何HTML元素都可以是一个CSS的选择符。选择符仅仅是指向特别样式的元素。例如，P { text-indent: 3em }当中的选择符是P。 类选择符 　 ID 选择符 关联选择符 　 1.基本语法 (2)组合 为了减少样式表的重复声明，组合的选择符声明是允许的。 例如，文档中所有的标题可以通过组合给出相同的声明: H1, H2, H3, H4, H5, H6 { color: red; font-family: 楷体 } 注意：区分组合的选择符与关联选择符 1.基本语法 (3)继承 所有在选择符中嵌套的选择符都会继承外层选择符指定的属性值，除非另外更 改。例如，一个BODY定义了的颜色值也会应用到段落的文本中。 (4)注解 样式表里面的注解使用C语言编程中一样的约定方法去指定。CSS注解的例子采 用以下格式: /* COMMENTS CANNOT BE NESTED */ 　　 2.伪类和伪元素 伪类和伪元素是特殊的类和元素，能自动地被支持CSS的浏览器所识别。 伪类区别开不同种类的元素。 伪元素指元素的一部分。 伪类或伪元素规则的形式,如 选择符:伪类 { 属性: 值 } 选择符:伪元素 { 属性: 值 } 一般的类可以与伪类和伪元素一起使用，如下: 选择符.类: 伪类 { 属性: 值 } 选择符.类: 伪元素 { 属性: 值 } 　　 2.伪类和伪元素 （1）定位锚伪类 伪类可以指定A元素以不同的方式显示链接(links)、已访问链接(visited links)和可激活链接(active links)和鼠标指向的链接。定位锚元素具有四个伪类：link、visited或active、hover。 样式表的示例如下: A:link { color: red } A:active { color: blue; font