一些css书写的小技巧
2017-07-06 15:40
176 查看
一、css顺序
首先声明,浏览器读取css的方式是从上到下的。我们一般书写css只要元素具备这些属性就会达到我们预期的效果,但是这会给以后的维护和浏览器的渲染效率带来一定的影响,那么该怎么书写css的顺序呢?有没有一定的规范呢?首先我们知道css的属性按特性分为几类;
1.规定元素特性,如display、position、float,这些属性会决定他的排版方式
2.规定元素的空间占据,如line-height、margin、padding、width、height等,这些属性会决定元素的大小和位置
3.规定元素的自身效果,如font-size、color、background等,这些属性会决定元素的效果
其实当我们把css的属性分类结束后,我们会得到一个很明显的答案,我们可以想象一下自己用css按照自己的书写顺序画出来该元素,举例说明
当我们开始读取属性的时候,我们会很难对元素进行定位,因为我们不知道元素的特性,陈列方式。读到最后一行的时候才发现,原来这是一个内联元素,宽度和高度的定义就会失效,所以这种css书写顺序是不被推荐的
这样的书写方式就能按照一个我们很容易理解的方式进行渲染
总结: 我们书写css的时候推荐的规范是,先书写影响元素陈列特性的属性,再书写影响元素位置的属性,最后书写元素的内部属性
二、点击或hover等触发高亮情况的css书写
当鼠标hover的时候,我们往往给需要改变的元素添加一个active类名,然后在active里面书写我们需要改变的属性如:
我们需要在点击一个类名为.click的元素的时候,元素icon字体 和 span元素一个字体变大 一个变为红色怎么办,我们可以这样
其实细心的朋友可能发现了我这里有一个.parent 标签,我们可以通过给.parent标签添加active类名代码如下:
这样的话 我们只需要将会改变css元素的最相近的最外层添加active类名,然后设置该类名下后代元素的样式,这样我们只需要添加一个active类名就达到了我们预期的效果
相关文章推荐
- css的一些小技巧
- css+div开发网站的一些小技巧
- HTML+CSS笔记 CSS中级 一些小技巧
- 一些CSS方面的小技巧
- 整理一些css在使用中的小技巧(进行中)
- 一些css有关处理浏览器兼容问题上的小技巧
- 书写SQL语句的一些小技巧
- 写css的一些小技巧
- css学习的一些小技巧
- 分享一些关于CSS绘制特殊形状和一些其他小技巧
- 收集的一些DIV+CSS小技巧
- 关于提供CSS渲染速度的一些小技巧
- CSS的一些小技巧
- 移动端CSS一些小技巧
- 程序书写过程中的一些小技巧
- DIV+CSS网页布局常用的一些命名规则和书写
- 程序书写过程中的一些小技巧
- 一些CSS兼容的小技巧
- 关于css中的一些小技巧
- CSS中的一些小技巧