山蜗牛IT工作室

简单就好……

« “加载softpro.dll时出错”简易解决办法准备折腾了…… »

CSS选择符

1、类型选择符

类型选择符是指以网页中已有的标签名作为名称的选择符,body是网页中的一个标签名,div也是,span也不例外。因此以下的选择符都是类型选择符,它们将控制页面中所有body、div或span、p。

body { }        div { }        span { }        p { ] 等

2、群组选择符

除了可以对单个的XHTML对象进行样式指定外,还可以对一组对象进行样式指定,例如:

h1,h2,h3,p,span {

        font-size:14px;

        color:#FF0000;

}

使用逗号对选择符进行分隔,使得页面中所有的h1,h2,h3,p,span都将具有相同的样式定义。这样做,对页面中需要使用相同样式的地方,只需写一次样式就可以,从而减少代码量。

3、包含选择符

当对某个对象的子对象进行样式指定时,就可以用包含选择符,对象之间使用空格作为分隔符。例如:

h1 span {

        font-weight:bold;

}

span包含中h1中。只对包含中h1中的span应用font-weight:bold 的样式设置,而对单独存在的span并不应用以上的样式效果,例如:

<h1>这是我们的一段文本<span>这是span内的文本</span></h1>                  span标签中的“这是span内的文本”将应用font-weight:bold 样式

<h1>单独的h1</h1>

<span>单独的span</span>                           这一句并不会应用font-weight:bold 样式

之所以这样做,是因为它能够帮助我们避免过多的id及class设置,直接对所需要的元素进行设置即可。

包含选择符除了可以二者包含,也可以多级包含。例如:

body h1 span strong {

        font-weight:bold;

}

但多级包含的可读性较差,因此不提倡这样做。

4、id及class选择符

id及class选择符是CSS提供由用户自定义标签名称的选择符,例如:对于h1标签,如果使用id选择符定义,那么<h1 id="p1">及<h1 id="p2">是两个不同的元素。

对于一个网页而言,其中的每个标签均可使用类似于id=" " 的形式来对 id 属性进行名称指定,在网页中,每个id 名称只能使用一次,不得重复。例如:

<div id="content"></div>              注:一个页面只能使用id 名称为content一次。

在CSS样式中,id 选择符使用#号进行标识。例如:

#content {

        font-size:12px;

       width:800px;

}

与id 不同的是,class允许重复使用,比如页面中的多个元素,都可以同时使用同一个class定义。例如:

<div class="p1"></div>

<h1 class="p1"></h1>

<span class="p1"></span>

在CSS样式中,class使用点(.)符号进行标识。例如:

.p1 {

margin:10px;

font-size:14px;

}

页面中所有使用class="p1" 的标签均可使用此样式进行设置。

 

5、标签指定式选择符

如果既想使用id或class,也想同时使用标签选择符,那么可以使用如下格式:

h1#content { }

表示针对所有id 为content 的 h1标签进行指派。

h1.p1 { }

表示针对所有class为p1 的h1标签进行定义。 

6、组合选择符

h1 .p1 { }     注h1与.p1之间有空格,而上题的标签指定式选择符之h1与.p1之间是没有空格的

表示h1标签下的所有class为p1标签。

#content  h1 { }

表示id 为content的标签下的所有h1标签。

也可两者组合在一起

h1 .p1,#content h1 { }       注,两者之间用逗号隔开。

7、伪类及伪对象

属于CSS的一种扩展型类和对象。不能自定义。

a:hover {

        background-color:#FF0000;

}

hover便是一个伪类,表示指定链接标签a的鼠标移上的状态。

伪类 用途
:link a链接标签的未被访问的样式
:hover 对象在鼠标移上时的样式
:active 对象被用户点击及被点击释放之间的样式
:visited a链接对象被访问后的样式
:focus 对象成为输入焦点时的样式
:first-child 对象的第一个子对象的样式
:first 对于页面的第一页使用的样式

 

 

伪对象 用途
:after 设置某个对象之后的内容
:first-letter 对象内的第一个字符的样式设置
:first-line 对象内第一行的样式设置
:before 设置某个对象之前的内容

 

8、通配选择符

css通配选择符可用使用 * (星号)作为关键字,如下:

* {   color:blue; }

*号表示所有对象,包含所有id及class的XHTML标签。使用如上进行样式定义时,页面中的所有对象都会应用color:blue;来设置字体的颜色。

 

--------------

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

日历

最新评论及回复

相关文章

Powered By Z-Blog 1.8 Walle Build 91204 theme by 博客主题网

Copyright vsnail. Some Rights Reserved.
粤ICP备10025521号