css中的class是什么意思 有什么作用 请专家细讲

html-css020

css中的class是什么意思 有什么作用 请专家细讲,第1张

CSS中的class中文意思是类,类可以应用于多个标签元素,id则只能用于一个标签元素。

id前面加#号标识:#abc{color:#fff} 例:<div id="abc"></div>

类前面都带有一个英文句点“.”

如:

.bigfont {font-size:36px}

引用时在标签里加上class=""

例:

用在段落标签:<p class="bigfont">大字体</P>

引用时不加“.” “#”号

介绍一个CSS知识网站:http://www.52css.com/

css3中,提供了新型的,可以使用通配符的选择方法。例如:[id=^sec]{

},表示将此样式,应用在所有id以sec开头的html元素,比如id为section、sec3等的元素都会受到这些规则的影响。这样,我们就可以通过元素命名,来区别不同功能区域,并且使用通配符选择器来统一样式。而这一点,和class的功能类似。class与id的区别就在于,id一个网页中,只能有一个,而class可以有多个,这样可以让多个元素使用相同的样式。

因此,作者在书中说,不推荐使用class,class最终会消失。然而在另一本前端著作《编写高质量代码Web前端开发修炼之道》中,却推荐使用原子类的方法,来提高css样式的重用程度。之前,本人也写过一篇关于创建和使用原子类的文章,并且在现在的设计中应用原子类,感觉非常方便灵活性非常强大。在这里,潜行者m不禁思考,class究竟可取不可取?是鸡肉还是鸡肋?

class和id的区别

html中class和id属性,是用来标记元素、区别元素,这样就可以用css来精确控制样式,也可以使用javascript来控制元素。但class和id是有明显区别的,在网页中,id属性的值只能有一个,但是class的值是可以重复的。比如,我定义一个div的id为a,那么网页中不能再出现一个html元素的id为a;但是我定义一个div的class属性为b,我可以再其他的元素中,定义class属性为b。这样,就可以实现代码的重用,比如两个div都是红色背景,只需写出一个class(.r{background-color:#ff0000}),然后在两个div中都指定class属性为

r

即可,而要使用id控制,则需要在两个div中,都写上background-color:#ff0000。同时,id和class的优先级也是不同的,id的优先级要高于class,如果对同一个元素,分别用id和class指定同一属性不同的值,浏览器会优先解析id的值。

鸡肉说:

class可以极大的提高代码的重用,特别是使用原子类,既方便维护,又方便应用。而使用id,必须指定id然后指定大量重复的样式。css3中,虽然升级的强大的选择规则,但是仍然比较混乱,不利于维护。同时,存在即合理,w3c制定出class和id是有他们的道理的,负责不同的工作,class仍然会不断的被使用。

鸡肋说:

css3中,强大的id选择规则,已经可以对相近元素指定相同的样式,达到重用的目的。它已经完全可以取代class的作用,而且对于javascript来说,只能使用id来控制,说不定以后class就会消失了。