1、css 样式中 ID，class，和标签属性 style 的区别(2011-03-31 22:33:36)转 载 标签： 教育共性我们可以用类选择符法定义，而个性就可以用 id 法来定义样式规则。回顾 css 样式的标签属性 style 用法我们之前已经初步学习了 CSS 样式使用方法，以及常用的一些样式规则。使用形式如下：. 我们这种 CSS 样式的用法虽然已经比传统的 HTML 标签来的更加优越，但还有许多时候还是存在缺点。譬如下面 HTML 内容：段落文字 1 段落文字 2 段落文字 3 我们很明显可以看出段落的样式都定义了完全相同的规则，如此重复，就有些代码冗余，能不能可以再简练点呢？
2、-CSS 样式定义规则的标签选择符法为了可以使同样的样式规则定义到相同类型的 HTML 标签上，我们可以使用标签选择符来实现，在学习之前我们必须要学习一个 HTML 标签: style。很熟悉是吧，我们之前这个 style 是标签的属性，但现在是HTML 标签。如何使用呢？这个标签必须放在我们以前学过的 head 标签中，所以形式如下：标签 style 的 type 属性指定在 style 里面定义的文本类型的 css 内容，虽然可以缺省，但最好指定text/css。好了我们开始学习标签选择符的 css 样式规则定义法吧。HTML 内容p font:12px 宋体;color:green;te
3、xt-indent:2em; 段落文字 1 段落文字 2 段落文字 3 通过以上法则，我们就可以使 body 中的三个 p 拥有相同的样式规则，不仅如此，以后再添加 p 标签都会拥有如此样式规则。标签选择符法的语法规则：标签名 样式规则 。 这里的标签名就是选择符。-分组选择符法定义样式规则那如何使不同的标签可以拥有相同的样式规则呢？HTML 内容:h1,h2,h3,h4,h5,h6 color:gray; h1 标题h2 标题h3 标题h4 标题h5 标题h6 标题显示结果：通过分组选择符法，我们定义了 6 个标题标签 h1-h6 中内容的字体颜色为灰色(gray)。自从使用了选择法，我们看
4、出，css 样式规则定义在 style 标签中，使的 body 中的正文内容又显得更加简练了。好事情！分组选择符法语法：选择符,选择符,. 样式规则 -类选择符法定义样式规则虽然前两种选择符法可以批量定义样式规则，但也存在缺点。譬如看以下代码：p font:12px 宋体;color:green;text-indent:2em; h1,p background:lightgrey; .段落文字 1 段落文字 2 段落文字 3 标题 1标题 1标题 1显示结果：可以看出如果要特定指定某个标签的样式规则，我们还是需要使用标签的 style 属性法。我们发现通过标签 style 属性定义规则会比其他
5、两种规则定义法来的优先。所谓优先，就是指可以覆盖（覆盖就是Cascading Style Sheets 中 Cascading 的意思）其他规则定义法定义的样式规则。标签的 style 属性法 比标签选择符法和分组选择符法的优先级别都要高，并且是所有规则定义法中“最高的”。我们来看看怎样类选择符法，一种新的样式规则定义法。首先我们要学习一个 HTML 标签的属性 class，这个属性来定义标签的类名，我们可以通过类名来定义样式规则。HTML 内容：.class1 font:bold 16px 黑体; color:green; .class2 font:normal 12px 宋体; color
6、:blue; .class1 的风格 class2 的风格 class1 的风格 class2 的风格 显示结果：我们发现属于同一类的具有相同样式风格，通过指定标签相同 class 的属性值，即使不是相同 HTML 标签。在一张网页中可能会用到许多各种各样的 HTML 标签，为了使你需要的标签符合同一种样式风格，我们可以使用类选择符定义法。类选择符定义法语法： .类名 样式规则 -ID 选择符法定义样式规则所谓共性和个性，我们在生活中经常有这样的说法，譬如猫，狗，羊都是属于哺乳动物，都有哺乳动物的共性，但每种动物都有其个性特征，猫叫，狗叫，羊叫的声音都不一样。在 HTML 的 css 样式中也
7、存在这种情况，共性我们可以用类选择符法定义，而个性就可以用 id 法来定义样式规则。在这当中我们要学习使用 HTML 标签的 id 属性，id 是英文单词 identifier，意思标识号。单张网页中的HTML 标签的 id 值只能指定一个唯一的名字。就如我们的身份证号码，是唯一标识一个人的。为了单独定义某个指定标签的样式规则，我们可以使用 id 选择符法。HTML 内容：.class1 font:bold 16px 宋体;background:blue; color:yellow;#div1 background:green; text-decoration:underline; .内容 1内容 2内容 3显示结果
