详解如何在HTML中引用CSS

总体来说，有三种方法可以在HTML中引用CSS的Selector。
CSS存在三种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 的定义了吧。