首页 > Web开发 > 详细

CSS3秘笈:第三章

时间:2015-12-06 20:53:16      阅读:177      评论:0      收藏:0      [点我收藏+]

1.标签选择器:控制整体。

使用标签选择器,只需要输入标签的名称即可。

2.类选择器:精确控制。

假如你要指定一些相同的元素拥有不同的样式,可以给元素添加不同的类名,然后用类选择器来应用对应的样式。

任何使用类选择器呢?以下几点需要注意:

(1)所有类选择器的名称都必须以一个原点开头,如  .class 这个类。

(2)CSS只允许在类名称中使用字母、数字、连字符(-)、下划线(_)。

类选择器可以帮助你实现高度精确的设计变更。例如在网页中的<h2>标题设置样式,让该样式只用于某个<h2>标签,代码如下:

.special{ color:#FF0000;

            font-family:”Monotype Corsiva”;

         }

(3)圆点之后,名称必须以字母开头。

(4)类名区分大小写。

3.ID选择器:控制特殊的网页元素。

ID选择器的使用方法与类选择器类似,不同的是类选择器名称前是圆点,ID选择器名称前是#,并且ID选择器不能同名,

4.给标签组定义样式:

有时候网页需要能将同一种样式应用到不同元素的方法。一种方法是给每一个标题分别创建一种样式,但这种方法太过繁琐;第二种方法是使用群组选择器。

5.构建群组选择器:使多个选择器成为一个群,只需要创建一个用逗号分隔的选择器列表即可。假设要让所有的标题标签都设置成同一个颜色,可以创建如下代码:

         h1, h2, h3, h4, h5, h6{ color: #red; }

6.通用选择器( * ):给几个不同的网页元素应用相同的样式属性时,除了可以考虑用群组选择器作为快捷的方法之外还可以考虑使用通用选择器( * )。*号是选择每一个标签的通用选择器的标志。

假设网页上所有的标签都要以粗体显示,这个群组选择器看起来是这样:

a, p, img, h1, h2, h3,......{ font-weight: bold; }

使用通用选择器方式为:

*{ font-weight: bold; }

7.如何给标签内的标签定义样式呢?CSS有一种东西叫:派生选择器。

派生选择器允许你根据它与其他标签之间的关系来给标签设置样式。

8. 在理解派生选择器之前先来理解一下一组嵌套的标签中各个标签的关系。

(1)祖先标签:当一个标签涵盖了另一个标签时,这个标签就是另一标签的祖先。

(2)派生标签:处在一个或多个标签内部的标签就是派生标签。

(3)父标签:父标签是离另一个标签最近的祖先。

(4)子标签:直接被另一个标签包围的标签就是子标签。

(5)同胞标签:同一个标签的子标签被称为同胞标签。

9.现在来看一看如何创建派生选择器吧。

假如你要给<h1>标签中的某个字显示为其他颜色。可以这样写代码:

h1 strong { color: red; }

这样color只会影响到h1标签中的strong标签里面的内容,而不会影响其他h1标签和strong标签。这就是派生选择器的写法。派生选择器可以包含两个以上的元素。

派生选择器常用于格式化代码模块。

10.伪类和伪元素:

有时候你需要选择本身没有标签,但任然易于识别的网页的部位,比如段落首行或鼠标滑到过的链接。CSS提供了一些选择器:伪类和伪元素。

(1)给链接定义样式:有4个伪类可以让你根据访问者与该链接的交互方式,将链接设置成4种不同的状态之一。

a: link 是指访问者还没有访问到、鼠标也尚未滑过或单击过的所有链接,这是正常的、未访问过的网页链接。

a: visited是指依据Web浏览器的历史记录,访问者之前已经单击过的链接。

a: hover 让你在访问者的鼠标滑过链接时改变该链接的展现效果。如果想应用于特定类,只需要创建一个名为 .highlight: hover的样式即可。

a: active 让你决定当访问者单击时链接的展现效果。

(2)给段落定义样式:CSS提供了两个伪元素:first-letter和:first-line。:first-letter可以创建下落的首字母,或者首字母大写。:first-line可以用一种不同的颜色定义段落的首行。

CSS3秘笈:第三章

原文:http://www.cnblogs.com/koto/p/5024115.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!