Rumah > Artikel > hujung hadapan web > css书写顺序需要注意哪些?
首先声明,浏览器读取css的方式是从上到下的。我们一般书写css只要元素具备这些属性就会达到我们预期的效果,但是这会给以后的维护和浏览器的渲染效率带来一定的影响,那么该怎么书写css的顺序呢?有没有一定的规范呢?
首先我们知道css的属性按特性分为几类;
1.规定元素特性,如display、position、float,这些属性会决定他的排版方式
2.规定元素的空间占据,如line-height、margin、padding、width、height等,这些属性会决定元素的大小和位置
3.规定元素的自身效果,如font-size、color、background等,这些属性会决定元素的效果
其实当我们把css的属性分类结束后,我们会得到一个很明显的答案,我们可以想象一下自己用css按照自己的书写顺序画出来该元素,举例说明
p.detail { font-size: 10px; line-height: 12px; width: 30px; height: 30px; display: inline; }
描述:这是一个元素 字体大小10px 行高12px 宽度30px 高度30px 陈列方式为内联样式
当我们开始读取属性的时候,我们会很难对元素进行定位,因为我们不知道元素的特性,陈列方式。读到最后一行的时候才发现,原来这是一个内联元素,宽度和高度的定义就会失效,所以这种css书写顺序是不被推荐的
p.detail { display: inline-block; margin-top: 20px; width: 100%; height: 20px; color: #fff; font-size: 10px; }
描述: 这是一个元素,陈列方式为内联-块方式,距上有20px 宽度与父元素等宽 高度为20px 颜色为白色 字体大小为10px
这样的书写方式就能按照一个我们很容易理解的方式进行渲染
总结: 我们书写css的时候推荐的规范是,先书写影响元素陈列特性的属性,再书写影响元素位置的属性,最后书写元素的内部属性
当鼠标hover的时候,我们往往给需要改变的元素添加一个active类名,然后在active里面书写我们需要改变的属性
如:
.content { background: black; } .active { background: white; }
当我们点击某元素的时候,需要.content的背景色从黑色变成白色,那么给.content添加active类名就会达到我们的预期效果,然而我们有的时候点击的时候不止要改变一个元素的属性,我们有可能会有这种情况
我们需要在点击一个类名为.click的元素的时候,元素icon字体 和 span元素一个字体变大 一个变为红色怎么办,我们可以这样
<div class="parent"> <div class="icon-font"></div> <span class="text"></span> </div> <div class="click"></div> <style> .icon-active{ font-size: 40px; } .text-active{ color: red; } </style> <script src="jquery.js?1.1.11"></script> <script> $(‘.click’).click(function() { $('.icon-font').addClass('icon-active'); $('.text').addClass('text-active') }) </script>
这样可以达到我们的预期效果,但是这是两个元素的关联反应,假如有三个元素或更多,我们会需要更多的代码,
其实细心的朋友可能发现了我这里有一个.parent 标签,我们可以通过给.parent标签添加active类名代码如下:
<div class="parent"> <div class="icon-font"></div> <span class="text"></span> </div> <div class="click"></div> <style> .active .icon-font{ font-size: 40px; } .active .text{ color: red; } </style> <script src="jquery.js?1.1.11"></script> <script> $(‘.click’).click(function() { $('.parent').addClass('active'); }) </script>
这样的话 我们只需要将会改变css元素的最相近的最外层添加active类名,然后设置该类名下后代元素的样式,这样我们只需要添加一个active类名就达到了我们预期的效果
Atas ialah kandungan terperinci css书写顺序需要注意哪些?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!