关于css中id与class的使用区别

建站知识 2020-10-03 22:27:01

在html网页建设中我们都是使用css样式表来给网页进行布局和设计,相信大家在网页设计中进行遇到id和class,这两个都是css中的选择器,那么这两个有什么区别呢,下面我们一起来了解下。

css中id与class区别介绍

css中id与class区别介绍

1、两者的使用范围不同

Class选择器的属性允许向一组在class属性上具有相同值的元素应用声明。

例子:

Css:.wenben{font-size:14px}

html: <p class=”wenben”>字号大小14px<p>

只要是标签中有class说明,则这些标签的里面的文本字号都是14px,或者单独对某一种标签做样式,则后面出现相同标签时都是这个样式。

例子:

Css:p{font-size:14px}

html: <p >字号大小14px<p>

这个样式中网页的p标签里的文本都是14px大小,也就是网页里面body内的所有元素都有CLASS属性。

ID选择器的属性的操作类似于CLASS属性,单ID属性的值在整个页面文档中必须是唯一的,也就是基本上只能使用在一个地方,或者单独对某个标签做样式,其他标签无法应用。

例子:

Css:#wenben{font-size:14px}

html: <p id=”wenben”>字号大小14px<p>

上述例子表示当前这个p标签应用字体大小14px的样式,但其他p标签不能应用这个样式,有唯一性。

2、表示方法不同:

CLASS类选择器以标志符(英文句点)开头表示,用于指示后面是哪种类型的选择器。对于类选择器,之所以选择句点是因为在很多编程语言中它与术语“类”相关联。

例子:

.wenben{font-size:14px}

而id选择器的标志符是散列符号(#),标志符用来提醒浏览器接下来出现的是id值,具有唯一性。

例子:

#wenben{font-size:14px}

3、用途不同:

在网页中可以使用class属性来分类元素,id属性可以用来标记文档中的唯一元素。

使用注意事项

在网页设计中我们可能用将多个标签设计为同一个样式,这个时候我们就可以使用class选择器,可以重复使用在不同标签。

而有的布局我们要使用单独的布局或者唯一的布局,这样我们就可以使用id进行唯一说明,与class区别开。

好了以上就是关于“css中id与class区别介绍”,希望对您有所帮助。我是熊熊SEO,干货持续更新中,原创发布,禁止抄袭转载。

版权声明

本文系熊熊SEO发表,未经许可,不得转载。

分享:

扫一扫在手机阅读、分享本文