您现在的位置: 圆点视线 >> 教程 >> 网页设计 >> Dreamweaver教程 >> 文章正文
[图文]详细介绍CSS的三种selector           ★★★
详细介绍CSS的三种selector
作者:68design…  文章来源:68design.net  点击数:  更新时间:2007-11-18 18:14:29 
 页面功能:【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口 【字体:

CSS的三种selector 

上一节开始我们讨论 CSS (Cascading Style Sheet) 的基础. 告诉你有三种 Selector. 但只介绍了其中的 HTML selector. 这一节我们把三种都详细介绍给你HTML selector、class selector、ID selector: 
 
HTML selector

HTML selector 就是 HTML 的 tags, 比如 P, DIV, TD 等. 如你用 CSS 定义了它们, 在整页中, 这个 Tag 的性质就按照你的定义来显示了. HTML selector 的语法如下
tag {property:value}比如我们想叫 H1 的颜色是红的
H1 {color: red}这里还要告诉你 CSS 的一个特点, 它可定义好几个 selector 在一个 rule 里. 比如 H1, H2, TD {color: red}这个定义就能让所有的 H1, H2, 和 TD 的颜色都为红色. 
 
Class selector

Class selector 有两种, 一种叫相关 class selector, 它跟一个 HTML 的 tag 有关系. 它的语法是tag.Classname {property:value}比如我们想叫一些而不是全部 H1 的颜色是红的 H1.redone {color: red}这样在下面的语句中, 第一个 H1 是红色的, 而第二个就不是了 <H1 class="redone">红色的题目</H1><H1>普通的题目</H1>第二种是独立 class selector . 它可被任何 HTML tag 所应用. 它的语法如下 .Classname {property:value}假如我们有下面这个定义.blueone {color: blue}那么我们可以把他应用到不同的 Tag 当中去. 比如 <H1 class="blueone">蓝色的题目</H1><P class="blueone">蓝色的段落</P>显然 class selector 给了我们更多的自由. 
 
ID selector

ID selector 其实跟独立 class selector 的功能一样. 而区别在于它们的语法和用法不同, 以及对于 Javascript 操纵 HTML
元素有帮助. 它的语法如下#IDname {property:value}假如我们有下面的定义
#yelowone {color: yellow}我们可以运用这个定义到任何的有同样 ID 名字的 tag, 比如 <SPAN ID="yellowone">text here</SPAN>你可能觉得既然 ID selector 和独立 class selector 功能一样, 为什么两者都存在呢. 如果你知道用 CSS-P 来定位的话, 你就明白它们的区别了. 有 ID 的 HTML 元素可以被 CSS-P和 JavaScript 来操纵。到现在为止,你已经大概知道如何来写 CSS 的定义了。

 【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】 文章录入:Rainsion    责任编辑:Rainsion  【字体:
 
  • 上一篇文章:

  •  
  • 下一篇文章: 没有了
  • 最新文章
    相关文章
    CSS教程—元素的定位
    CSS层叠样式的主次顺序
    引入CSS样式的五种方式
    应用CSS样式表技巧两则
    CSS应用技巧十四例
    XHTML+CSS:调用样式表
    CSS样式表:详细介绍IE7新支持的选择器
    导航上用CSS标志当前页效果的实现
    不用JS的漂浮层
    CSS层叠样式表最佳入门教程
    网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    发表评论:
     姓  名: 评 分: 1分 2分 3分 4分 5分
     评论内容: ·严禁发表危害国家安全、政治、黄色淫秽等内容的评论。
    ·用户需对自己在使用本网服务过程中的行为承担法律责任
    ·本站管理员有权保留或删除评论内容。
    ·评论内容只代表机友个人观点,与本网站立场无关。
     
    最 新 推 荐
     
    百度主题推广
    最 新 热 门