css样式书写的问题
经常遇到前端的朋友问及css样式书写的问题,结合自己实际的工作,自己总结了整理了一下,给大家分享:
一、顺序问题:显示属性-位置属性-元素自身属性-文本属性-其他属性
1、显示属性:z-index、display、list-style
2、位置属性:position、float
3、元素自身属性:width、height、margin、padding、border、border-radius、background
4、文本属性:color、font-size、font-weight、font-family、line-height、text-align、text-indent
5、其他属性:cursor:pointer
.div{
display:block;
position:absolate;
left:;
top:20px;
width:200px;
height:500px;
padding:10px;
border:1px solid #f60;
border-radius:5px;
background:#f00;
font-size:14px;
font-weight:bold;
color:#fff;
...
}
二、样式问题
1、使用CSS缩写属性
CSS有些属性是可以缩写 、简写的,比如padding,margin,font,color等等,这样精简代码同时又能提高加载速度。
如:padding:0 10px; color:#f3c;等
2、去掉小数点前面的‘0’
如font-size:.8em; opacity:.5 等
css样式书写的问题的更多相关文章
- CSS 样式书写规范
可能不同团队都有各自的规范,又或者很多人在写 CSS 的时候还是想到什么就写什么,不存在太多的约束. 我觉得 CSS 代码规范还是有存在的必要的,尤其是在团队配合,多人协作下,规范就显得尤为重要. 本 ...
- css样式书写规范
在工作当中css样式是非常重要的,但是咋样书写css样式更重要. 一.css书写规范 1.定位属性:position display float left top right bottom ...
- CSS 样式书写规范+特殊符号
虽然我只是刚踏入web前端开发圈子.在一次次任务里头,我发觉每一次的css命名都有所不同和不知所措.脑海就诞生了一个想法--模仿大神的css命名样式. 毕竟日后工作上,是需要多个成员共同协作的.如果没 ...
- css样式书写顺序
这里推荐先写显示属性,再写自身属性,再写文字属性:并不代表非得按这个顺序写,但这种写法可以使css结构更清晰易读,修改起来比较方便. 而且在团队项目中能更好地提高效率. //显示属性 display ...
- Angular21 动态绑定CSS样式
1 需求 在前端开发中通常需要动态对某些元素的样式进行动态设定,传统的CSS绑定分为CSS类绑定和Style样式绑定:在Angular中利用相关指令同样可以完成CSS类绑定和CSS样式绑定 2 内置指 ...
- (5)css样式导入
样式的组成 1.选择器:将样式与页面中的某一个或某些标签建立联系,就要使用选择器,在head标签下写一个style标签,将需控制参数的标签名写在这个style标签下,设置属性即可通过css来控制htm ...
- 如何书写高效的css样式
如何书写高效的css样式? 有以下四个关键要素: 1.高效的css 2.可维护的css 3.组件化的css 4.hack-free css 书写高效的css: 1.使用外联样式替代行间样式或内嵌样式 ...
- css样式的书写顺序及原理——很重要!
记得刚开始学习前端的时候,每次写css样式都是用到什么就在样式表后添加什么,完全没有考虑到样式属性的书写顺序对网页加载代码的影响.后来逐渐才知道正确的样式顺序不仅易于查看,并且也属于css样式优化的一 ...
- css样式的书写顺序及原理
刚开始学习前端的时候,每次写css样式都是用到什么就在样式表后添加什么,完全没有考虑到样式属性的书写顺序对网页加载代码的影响.后来逐渐才知道正确的样式顺序不仅易于查看,并且也属于css样式优化的一种方 ...
随机推荐
- onclick事件分析
有些时候,我们想实现这样的一种效果: <a href="imgs/2.jpg" title="A fireworks display" onc ...
- A Star算法笔记
回顾A*算法,偶得一源代码,略有瑕疵,改正之,并置于下. using System; using System.Collections.Generic; using System.Linq; usin ...
- Android调用系统 Set As Intent
调用方法如下: Intent intent = new Intent(Intent.ACTION_ATTACH_DATA); intent.addCategory(Intent.CATEGORY_DE ...
- Maven测试
生命周期阶段需要绑定到某个插件的目标才能完成真正的工作,test阶段正是与maven-surefire-plugin的test目标相绑定了,这是一个 内置的绑定. 在默认情况下,maven-suref ...
- 事件冒泡与事件委托 -Tom
事件冒泡 事件冒泡,就是事件触发的时候通过DOM向上冒泡,首先要知道不是所有的事件都有冒泡.事件在一个目标元素上触发的时候,该事件将触发祖先节点元素,直到最顶层的元素: 如图所示,如果a连接被点击,触 ...
- Android 图片Exif信息相关的获取与修改
1 Exif是什么 Exif是一种图像文件格式,它的数据存储于JPEG格式是完全相同的,实际上Exif格式就是JPEG格式头插入了 数码照片的信息,包括拍摄的光圈.快门.平衡白.ISO.焦距.日期时间 ...
- HTTP POST GET 本质区别详解
HTTP POST GET 本质区别详解 一 原理区别 一般在浏览器中输入网址访问资源都是通过GET方式:在FORM提交中,可以通过Method指定提交方式为GET或者POST,默认为GET提交 Ht ...
- jquery 获取鼠标位置
//获取鼠标位置 $(function(){ $('body').mousemove(function(e) { e = e || window.event; __xx = e.pageX || e. ...
- 转:c的回归-云风
C 的回归 周末出差,去另一个城市给公司的一个项目解决点问题.回程去机场的路上,我用手机上 google reader 打发时间.第一眼就看到孟岩大大新的一篇:Linux之父话糙理不糙 .主题是 C ...
- Bootstrap强调相关的类
在Bootstrap中除了使用标签<strong>.<em>等说明正文某些字词.句子的重要性,Bootstrap还定义了一套类名,这里称其为强调类名(类似前面说的“.lead” ...