|
动态HTML初步 CSS 第二节: CSS Selector 上一节开始我们讨论 CSS (Cascading Style Sheet) 的基础。 告诉你有三种 Selector. 但只介绍了其中的 HTML selector。 这一节我们把三种都详细介绍给你。
HTML selectorHTML 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 selectorClass selector 有两种, 一种叫相关 class selector, 它跟一个 HTML 的 tag 有关系. 它的语法是: tag.Classname {property:value} 比如我们想叫一些而不是全部 H2 的颜色是红的: <style> H2.redone {color: red} </style> <H2>This is H2</H2> <H2 class=redone>This is red H2</H2>
第二种是独立 class selector . 它可被任何 HTML tag 所应用。 它的语法如下 .Classname {property:value} 假如我们有下面这个定义 .blueone {color: blue} 那么我们可以把他应用到不同的 Tag 当中去。 比如 <style> .blueone {color:blue} </style> <H2 class="blueone">Blue H2</H2> <P class="blueone">Blue paragraph</P>
显然 class selector 给了我们更多的自由。 ID selectorID selector 其实跟独立 class selector 的功能一样。 而区别在于它们的语法和用法不同, 以及对于 Javascript 操纵 HTML 元素有帮助。 它的语法如下 #IDname {property:value} 假如我们有下面的定义 #yelowone {color: yellow} 我们可以运用这个定义到任何的有同样 ID 名字的 tag, 比如 <style> #redone {color: red} </style> <P ID="redone">text here</P>
你可能觉得既然 ID selector 和独立 class selector 功能一样, 为什么两者都存在呢. 如果你知道用 CSS-P 来定位的话, 你就明白它们的区别了。 有 ID 的 HTML 元素可以被 CSS-P 和 JavaScript 来操纵。 到现在为止, 你已经大概知道如何来写 CSS 的定义了, 下面七节我们将会告诉你如何用 CSS 来操纵或修改:
|