经常遇到前端的朋友问及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样式书写的问题的更多相关文章

  1. CSS 样式书写规范

    可能不同团队都有各自的规范,又或者很多人在写 CSS 的时候还是想到什么就写什么,不存在太多的约束. 我觉得 CSS 代码规范还是有存在的必要的,尤其是在团队配合,多人协作下,规范就显得尤为重要. 本 ...

  2. css样式书写规范

    在工作当中css样式是非常重要的,但是咋样书写css样式更重要. 一.css书写规范 1.定位属性:position  display  float  left  top  right  bottom ...

  3. CSS 样式书写规范+特殊符号

    虽然我只是刚踏入web前端开发圈子.在一次次任务里头,我发觉每一次的css命名都有所不同和不知所措.脑海就诞生了一个想法--模仿大神的css命名样式. 毕竟日后工作上,是需要多个成员共同协作的.如果没 ...

  4. css样式书写顺序

    这里推荐先写显示属性,再写自身属性,再写文字属性:并不代表非得按这个顺序写,但这种写法可以使css结构更清晰易读,修改起来比较方便. 而且在团队项目中能更好地提高效率. //显示属性 display ...

  5. Angular21 动态绑定CSS样式

    1 需求 在前端开发中通常需要动态对某些元素的样式进行动态设定,传统的CSS绑定分为CSS类绑定和Style样式绑定:在Angular中利用相关指令同样可以完成CSS类绑定和CSS样式绑定 2 内置指 ...

  6. (5)css样式导入

    样式的组成 1.选择器:将样式与页面中的某一个或某些标签建立联系,就要使用选择器,在head标签下写一个style标签,将需控制参数的标签名写在这个style标签下,设置属性即可通过css来控制htm ...

  7. 如何书写高效的css样式

    如何书写高效的css样式? 有以下四个关键要素: 1.高效的css 2.可维护的css 3.组件化的css 4.hack-free  css 书写高效的css: 1.使用外联样式替代行间样式或内嵌样式 ...

  8. css样式的书写顺序及原理——很重要!

    记得刚开始学习前端的时候,每次写css样式都是用到什么就在样式表后添加什么,完全没有考虑到样式属性的书写顺序对网页加载代码的影响.后来逐渐才知道正确的样式顺序不仅易于查看,并且也属于css样式优化的一 ...

  9. css样式的书写顺序及原理

    刚开始学习前端的时候,每次写css样式都是用到什么就在样式表后添加什么,完全没有考虑到样式属性的书写顺序对网页加载代码的影响.后来逐渐才知道正确的样式顺序不仅易于查看,并且也属于css样式优化的一种方 ...

随机推荐

  1. hdu 5925 Coconuts 离散化+dfs

    Coconuts Time Limit: 9000/4500 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Problem ...

  2. 删除List中制定的值的方法

    /** * * @param args */ public static void main(String[] args) { List<String> list = new ArrayL ...

  3. Eclipse小技巧--快速输入System.out.println();(转)

    步骤1:指定“Content Assist”的快捷键,参考:善用 Eclipse 组合键,提高输入效率 步骤2:输入源代码是,先输入sysout,然后输入辅助快捷键:Alt+/,这样就可以自动生成:S ...

  4. JAVA 调用命令并输出

    public class test10 { /** * @param args */ public static void main(String[] args) throws Exception { ...

  5. MyEclipse Servers视窗出现“Could not create the view: An unexpected exception was thrown”错误解决办法

    打开所在的wordspace文件夹,在下面子文件夹 .metadata\.plugins\org.eclipse.core.runtime\.settings\com.genuitec.eclipse ...

  6. IO端口和IO内存的区别及分别使用的函数接口

    每个外设都是通过读写其寄存器来控制的.外设寄存器也称为I/O端口,通常包括:控制寄存器.状态寄存器和数据寄存器三大类.根据访问外设寄存器的不同方式,可以把CPU分成两大类.一类CPU(如M68K,Po ...

  7. MyISAM与InnoDB的索引实现

    1.MyISAM 使用B+Tree 作为索引结构,叶子节点的data存放指针,也就是记录的地址.对于主键索引和辅助索引都是一样的.2.InnoDB 也使用B+Tree作为索引结构,也别需要注意的是,对 ...

  8. JavaWeb学习总结(十)--JDBC之MySQL大数据

    一.基本概念 大数据也称之为LOB(Large Objects),LOB又分为:clob和blob,clob用于存储大文本,blob用于存储二进制数据,例如图像.声音.二进制文等. 但是,在mysql ...

  9. boost线程的问题:

    可以看看这里:http://blog.csdn.net/misskissc/article/details/9859753 我的总结: 1,用thread类来创建一个线程,它的构结函数 : (1)th ...

  10. 使用js加载器动态加载外部Javascript文件

    原文:http://www.cnblogs.com/xdp-gacl/p/3927417.html 今天在网上找到了一个可以动态加载js文件的js加载器,具体代码如下: JsLoader.js var ...