我的一亩三分地 我就喜欢!
13fen  设为主页
 收藏本站
 
当前位置: > 一亩三分地:首页 > 网络学院 > 网页设计 > Html/Css > CSS手册简编:选择器的使用方法
热门文章排行
热门文章排行 网页上传常见问题分析(11-24)
五彩缤纷建网页(一)(10-11)
五彩缤纷建网页(二)(10-11)
五彩缤纷建网页(三)(10-11)
五彩缤纷建网页(四)(10-11)
精采文章排行
精采文章排行 网页技巧二十例(11-13)
模仿QQ和MSN消息提示的效果(11-13)
根据分辨率不同调用不同的css文件(11-13)
Dreamweaver 基础 :DW的"文档"工具(11-01)
Dreamweaver 基础 :DW的"文档"窗口(11-01)
技术专题推荐
网管论坛交流
 

CSS手册简编:选择器的使用方法 

作者:佚名   来源:Linux 宝库   点击:   日期:2006-12-09


-->

1、选择器(Selector)


  选择器不只是文档中的元素标记,它还可以是类(Class,这不同于Java或C++中的类)、ID(给予元素特殊的名称,也便于在脚本中使用)或是元素的某种状态(如:a:link)。如:



<html>
<style>
<!--
p {color:red;font-weight : bold }
.bigFont {font-size:200%}
#blueBack {background-color:blue;color:yellow}
-->
</style>
<body>
<p>利用<span class="bigFont">Class</span>和<span id="blueBack">ID</span>显示内容。</p>
</body>
</html>


其中.someclass代表类,#someID代表ID。类和ID也可以和元素标记合用,比如:



p.bigFont {……}


则表示必须在某个为bigFont类的P标记(<p class="bigFont">)才执行样式单,同样的也适合于ID。
为了简化声明某些重复属性的标记,可以用","把不同的选择器隔开,表示它们都表示成相同的属性,如:



H1,H2 {color:red}
Div, p.mytext {……}


有时我们还希望能够在特定的范围内使样式单生效:



p em {color:red}


元素标记间又空格隔开,表示在<p>和</p>间的<em>、<em>用红色表示。另外还可以利用"~"表示一个选择器后面紧跟另一个选择器,并且两边以"/"围住:



/ Selector1 ~ Selector2/ {……}


表示如果Selector2紧跟着Selector1则使用该样式单。

2、属性值的单位


在样式单中,属性的单位多为长度单位,包括px(象素)、pt(磅)、em(一种排版中的单位,1em=12pt)、mm(毫米)、cm(厘米)、pc(1pc=12pt)、in(英寸),这些单位可以使用整数(如px)表示,也可以使用实数(如em)表示,并且元素中对数值还有继承(inherit)的关系比如:



body {font-size:12pt;text-indent:3em;}
H1 {font-size:15pt}


那么在显示中H1的text-indent属性就不是36pt而是45pt。


有的属性的单位甚至可以是负值,如margin,可以达到一些特殊的效果,如元素之间的重叠。另外还有一些其他的单位如角度,它的单位有deg(度)、grad(梯度)和rad(弧度);频率的单位,Hz和kHz,这些都是我们非常熟悉的。

3、注释及空格


样式单也有注释语句:可以用"/*……*/"作为注释标记,在浏览器中有一个对样式单的分析器,它负责对样式单的检查,分析器将忽略注释标记之间的内容。空格在样式单中是有效的,如果字符之间有超过一个空格存在,它将省略其余空格,而只保留一个,特别是在声明某些字体的时候,空格一定不能省略。


2 要注意的方面


首先,样式单是区分大小写的,所以要注意拼写;其次对于CSS2未声明的属性和方法,样式单的分析器会忽略它的存在,如:



H1 ,H2 {color:green}
H3 ,H4 & H5 {color:red}
P {color:blue ;font-variant:small-caps}


其中"&"是样式单中没有的标号,第二行整个被分析器略过,第三行中的font-variant不是一个合法属性,也被略过("color:blue"有效)。


了解了以上规则,你就已经对样式单入门了,下面将详细介绍样式单的各种属性及属性值。





文章评论】 【收藏本文】 【推荐好友】 【打印本文】 【论坛讨论

   相关文章:
·在状态栏中实现活动文字效果 ·DW+ASP玩转动态二级菜单
·鼠标事件的基础和完美实现 ·DW滑动菜单的制作
·网页里震动的效果怎么做 ·灵活运用DREAMWEAVER的SITE功能

   文章评论:(条)
  
 请留名: 匿名评论   点击查看所有评论 网管论坛
 

  责任编辑:一分  声明:刊登此文章是为了传递更多信息,文章内容仅供参考,转载请注明出处。