《Web前端开发精品课 HTML与CSS进阶教程》——1.4 id和class

  1. 云栖社区>
  2. 博客>
  3. 正文

《Web前端开发精品课 HTML与CSS进阶教程》——1.4 id和class

异步社区 2017-05-02 14:08:00 浏览1695
展开阅读全文

本节书摘来自异步社区《Web前端开发精品课 HTML与CSS进阶教程》一书中的第1章,第1.4节,作者: 莫振杰 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.4 id和class

id和class是HTML元素中两个最基本的公共属性。一般情况下,id和class都用来选择元素,以便进行CSS操作或者JavaScript操作。但是很多新手对id和class这两个属性感到很迷茫,不知道什么时候用id,什么时候用class,甚至随便使用。

1.4.1 id属性
id属性具有唯一性,也就是说在一个页面中相同的id只允许出现一次。W3C建议,对于页面关键的结构或者大结构,我们才使用id。所谓的关键结构,指的是诸如LOGO、导航、主体内容、底部信息栏等结构。对于一些小地方,还是建议使用class属性。

我们知道搜索引擎识别一个页面结构,是根据标签的语义以及id属性来识别的。因此id属性不要轻易使用。此外,id的命名也十分关键,特别是对搜索引擎优化而言。对于id和class的命名,我们在CSS进阶部分会详细介绍。

1.4.2 class属性
class,顾名思义,就是“类”。它采用的思想跟C、Java等编程语言中的“类”相似。我们可以为同一个页面的相同元素或者不同元素设置相同的class,然后使得相同class的元素具有相同的CSS样式。

如果你要为两个或者两个以上元素定义相同的样式,建议使用class属性。因为这样可以减少大量的重复代码。

注意,对于一个元素而言,我们可以定义多个class。一般来说,定义多个class的目的在于:一般用一个class抽取公共样式,然后用另外一个class定义单独样式。

举个例子,在一个页面中有如图1-2所示的三个栏目,仔细分析我们会发现这三个栏目具有部分相同样式,此时我们可以使用一个class来定义公共样式,但是这三个栏目又有各自的样式。该怎么办呢?这时候我们应该为这三个栏目分别定义不同的class,以便在CSS中控制单独的样式。这就是多个class的用处。


<a href=https://yqfile.alicdn.com/d6241c1118424f4480e5a7086f73610a0047d816.png" >

上图的三个栏目的HTML关键结构如下:

<div class="column blog">
   <h2></h2>
   <div></div>
</div>
<div class="column manual">
   <h2></h2>
   <div></div>
</div>
<div class="column tool">
   <h2></h2>
   <div></div>
</div>

对于id和class,我们总结一下:对于页面关键结构,建议使用id;对于小地方,建议使用class。就算我们不需要对关键结构进行CSS操作或者JavaScript操作,也建议加上id,以便搜索引擎识别页面结构。

网友评论

登录后评论
0/500
评论
异步社区
+ 关注