第十四篇:css样式谁才是无可撼动的
之前学习了CSS样式的引入可以使用id和class,但是在使用中发现,当id和class同时设置一个样式时,浏览器选择了显示id中的样式,这就要思考,到底优先级是如何的,如果不弄清楚,那以后设计时,就会出现样式的混乱。
假设做出如下设计:
1,id和class还有标签中同时使用一个样式,看谁会显示。
2,Id和class同时使用一种样式,谁会显示,这个上一篇已经演示,是id会优先于class。
3,Id和标签同时使用一种样式,谁会显示。
4,Class和标签同时使用一种样式,谁会显示。
5,还有没有其他方式设计样式?优先级又是什么?
一个一个问题来解决。第一个三个样式同时设置。
从显示上看,标签中的样式等级是最高的。显示了蓝色。然后是第二个,这个直接就知道了,id比class优先级高。再来看看第三个,id和标签,好像没有演示的必要了,因为标签的优先级是最高的。那么顺序就已经出来了。
Class《id《标签
那么还有没有什么其他设计CSS样式的方式?
还有标签本身也是可以导入设计样式的,这个跟class比较相似,可以同时设计同一类元素的样式。
添加后,样式没有变化,是说明标签本身的样式优先级是最低的,还是说我书写的不正确?
删除文字一的id和class样式,然后显示出来标签设计的样式,说明书写没有问题,只是样式等级太低。通过对比,优先级是:
引入的标签样式《class《id《标签内的样式。
然后还有一种,也是现在比较常用的就是引入样式表文件,就是把CSS样式写成一个单独的文件,然后再引用进来,这样文件就和样式分开了,设计时就比较干净整洁。
先用DW新建一个CSS文件
然后新建一个CSS文件夹,用来存放所有的样式表文件。便于管理。
把新建的样式文件,存入CSS文件夹中,名字写成