转至繁体中文版     | 网站首页 | 图文教程 | 资源下载 | 站长博客 | 图片素材 | 武汉seo | 武汉网站优化 | 
最新公告:     敏韬网|教学资源学习资料永久免费分享站!  [mintao  2008年9月2日]        
您现在的位置: 学习笔记 >> 图文教程 >> 站长学院 >> 网页制作 >> 正文
CSS手册简编:选择器的使用方法         ★★★★

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

作者:闵涛 文章来源:闵涛的学习笔记 点击数:753 更新时间:2009/4/23 13:49:48

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"有效)。

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


[网页制作]CSS手册简编:用户属性  [网页制作]CSS手册简编:表格属性
[网页制作]CSS手册简编:列表属性  [网页制作]CSS手册简编:颜色背景属性
[网页制作]CSS手册简编:布局属性  [网页制作]CSS手册简编:BOX属性
[网页制作]CSS手册简编:媒体属性  [网页制作]CSS手册简编:总论
教程录入:mintao    责任编辑:mintao 
  • 上一篇教程:

  • 下一篇教程:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
      注:本站部分文章源于互联网,版权归原作者所有!如有侵权,请原作者与本站联系,本站将立即删除! 本站文章除特别注明外均可转载,但需注明出处! [MinTao学以致用网]
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)

    同类栏目
    · Web开发  · 网页制作
    · 平面设计  · 网站运营
    · 网站推广  · 搜索优化
    · 建站心得  · 站长故事
    · 互联动态
    更多内容
    热门推荐 更多内容
  • 没有教程
  • 赞助链接
    更多内容
    闵涛博文 更多关于武汉SEO的内容
    500 - 内部服务器错误。

    500 - 内部服务器错误。

    您查找的资源存在问题,因而无法显示。

    | 设为首页 |加入收藏 | 联系站长 | 友情链接 | 版权申明 | 广告服务
    MinTao学以致用网

    Copyright @ 2007-2012 敏韬网(敏而好学,文韬武略--MinTao.Net)(学习笔记) Inc All Rights Reserved.
    闵涛 投放广告、内容合作请Q我! E_mail:admin@mintao.net(欢迎提供学习资源)

    站长:MinTao ICP备案号:鄂ICP备11006601号-18

    闵涛站盟:医药大全-武穴网A打造BCD……
    咸宁网络警察报警平台