网页制作第一章分析.ppt

第1.6节 CSS 基础(4) 4. 其它样式应用 标签类样式的定义与应用 第1.6.1节格式二是类样式的一般定义方法，用该方法定义的样式类，可应用于所有能适用这个类的标签元素。 还有一种专为某种标签定义的类——标签类，定义方法是在类名“.”号前，再加一个HTML标签名。定义方法是： 标签名.类名{属性1:值1; 属性2:值2; …… } 例如，一个标签类样式定义如下： p.myfont2{font-family:”宋体”;font-size:18px;color:blue;} 这个标签类样式myfont2只能对p元素起样式控制作用，对其它元素，不会产生影响。 在网页应用这个标签类样式的方法仍依然是： p class=”myfont2”……/p 第1.6节 CSS 基础(4) 伪类的定义与应用 一般样式类的名字可由程序员随意选择，而伪类是一种能够被支持CSS的浏览器所识别的特殊类。伪类样式是CSS已经定义好了的，是对象（标签元素）在某个特殊状态（伪类）下的样式。我们不能改变伪类的名称，但可以通过对伪类的重新定义来改变伪类原有的默认显示样式。 （1）伪类基本应用 伪类定义的一般方法是： 标签名:伪类名{属性1:值1; 属性2:值2;…} 伪类的最大用处，就是可以给链接的不同状态，定义不同的样式效果。 HTML标签a可以实现超链接，超链接有四种不同状态：link、visited、hover、active（未访问的链接、已访问的链接、鼠标停留在链接上和激活链接）。这四种状态的名称是确定的，在CSS看来，这就是名称已经被系统确定并有默认的显示样式的类——伪类。 第1.6节 CSS 基础(4) 标签a的四个伪类分别是：link、visited、hover和active。我们可以用伪类定义的方法给a的四个伪类重新设置样式，即为a元素的四种状态设置不同的显示效果。例如对a的四个伪类定义如下： a:link {color: #ff0000; text-decoration: none;} /* 未访问链接时为红色色，无下划线 */ a:visited {color: #00ff00; text-decoration: none;} /* 已访问的链接为绿色，无下划线*/ a:hover {color: #ff00ff; text-decoration: underline;} /* 鼠标在链接上时为紫色，并有下划线 */ a:active {color: #0000ff; text-decoration: underline;} /* 激活链接时为兰色，并有下划线 */ 第1.6节 CSS 基础(4) 网页中所有a元素的四种状态，都会按上面定义的样式显示。例如： a href=””网易/a 浏览效果如下： （未访问）， （鼠标在链接上）， （激活链接）， （访问后） 第1.6节 CSS 基础(4) 标签类与伪类的混合使用 标签类和伪类可以混合定义与应用。对于有伪类的标签（如a标签），可以为它定义不同的类（标签类），从而实现在同一网页中伪类显示样式不一样的结果。标签类与伪类的混合定义格式如下： 标签名.类名:伪类名 {属性1:值1; 属性2:值2;……} 上述格式中，标签名和伪类名是系统规定了的，但“.”后面的“类”名可由程序员自行命名。通过对专用于标签a的类及其伪类（link,visited,hover,actived）混合定义，可在同一个页面中做几组不同的链接效果。 第1.6节 CSS 基础(4) 例如，下面是对标签a的类和伪类进行混合定义： a.red:link {color: #ff0000;} /*定义red类的link伪类为红色*/ a.red:visited {color: #0000ff;} /*定义red类的visited伪类为兰色*/ a.green:link {color: #00ff00;} /*定义green类的link伪类为绿色*/ a.green:visited {color: #ff00ff;} /*定义green类的sisited伪类为紫色*/ 我们把上述定义的red和green 两个类（包含伪类）应用于网页的a元素上 a class=red href= 红色链接/a a class=green href= 绿色链接/a 访问前： 访问后： 第1.6节 CSS 基础(4) 滤镜（filter）的应用 CSS提供了一些内置的多媒体滤镜（filter）特效，使用这种技术可以把可视化的滤镜和转换效果添加到一个标准