第六章 节 CSS层叠样式表(网页设计与Web编程).ppt

6.2.4 套用CSS 对于已经建立的CSS样式，可以套用到选定的对象上。 例:在上列网页中，选定文本“2.《网络安全基础与应用》”，右键单击.STYLE1，选择“套用”，或者在下边“属性面板”的“样式”框里选择STYLE1，则.STYLE1即可应用到选定的文本上。如下图: 6.3 CSS滤镜 CSS的滤镜（filter）属性 glow：加光辉在附近对象的边外。 blur：创建高速度移动效果，即模糊效果。 chroma：制作专用颜色透明。 DropShadow：创建对象的固定影子。 FlipH：创建水平镜像图片。 alpha：设置透明层次 FlipV：创建垂直镜像图片。 Xray：使对象变得像被x光照射一样。 invert：反色 light：创建光源在对象上。 mask：创建透明掩膜在对象上。 shadow：创建偏移固定影子。 gray：把图片灰度化。 wave：波纹效果。 第六章 CSS层叠样式表 内容提要 6.1 CSS的基本概念 6.2 如何使用Dreamweaver CS3建立CSS 6.3 CSS滤镜 6.1 CSS的基本概念 6.1.1 样式和规则 6.1.2 层叠和顺序 6.1.1 样式和规则 CSS样式 选择符（selector） 属性（properties） 属性值（value） 格式：选择符 { 属性 : 值 } 选择符 { 属性1 : 值1; 属性2 : 值2 } 基本格式： 复合样式： 6.1.1 样式和规则 （1）单个“HTML标签”作为选择符 单个“HTML标签” ： body、table、p等等 例：body {color: black} body是指页面主体部分 color是控制文字颜色的属性 black是颜色的值 效果：页面主体（body）中的文字为黑色。 6.1.1 样式和规则 （2）选择符组 把具有相同属性和值的选择符组合起来书写，用逗号将选择符分开，以减少重复定义。 例：h1, h2, h3, h4, h5, h6 { color: green } 效果：组里包括所有的标题元素，每个标题元素的文字都为绿色。 p, table{ font-size: 9pt } p { font-size: 9pt } table { font-size: 9pt } 效果：段落和表格里的文字尺寸为9号字 。 例2： 6.1.1 样式和规则 （3）类选择符 把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。 类名为英文单词或以英文开头与数字的组合 例1：定义两个不同的段落，一个段落向右对齐，一个居中，可先为段落定义两个类。 p.right {text-align: right} p.center {text-align: center} 应用在不同的段落里，在HTML标签里加入class类参数： p class=right 这个段落向右对齐的/p p class=center这个段落是居中排列的/p 6.1.1 样式和规则 类选择符的另一种用法，在选择符中省略HTML标签名，这样可以把几个不同的元素定义成相同的样式。 例2： .center {text-align: center} 效果：定义了.center的类选择符，其表示文字居中排列。 h1 class=center这个标题是居中排列的/h1 p class=center这个段落也是居中排列的/p 可应用到任何元素上。如：使h1元素（标题1）和p元素（段落）都归为“center”类，于是这两个元素的样式都可以随着类选择符“.center”而定： 6.1.1 样式和规则 （4）ID选择符 ID参数指定了某个单一元素，ID选择符用来对这个单一元素定义单独的样式。 方法一：以标签跟“#ID名称”开头，使该ID代表的样式属性只用于该标签（比如段落标签p）。 p#intro { font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent } 例1： p id=intro 这个段落应用ID选择符p#intro的样式规则。 /p 应用： 6.1.1 样式和规则 方法二：直接以“#”开头，使该ID代表的样式属性可用于各种网页元素。 #intro { font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent } 例2： 效果：定义了一条id=intro 的CSS规则：