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 ...
- CSS笔记(九)轮廓
参考:http://www.w3school.com.cn/css/css_outline.asp CSS 边框属性 "CSS" 列中的数字指示哪个 CSS 版本定义了该属性. 属 ...
- mfc 可编辑 list control
维护到一个古老的gm工具的时候 需要这个功能 在网上找到一份很好用的代码 贴到这里 再次感谢那位同僚 #pragma once //#include "OrangeMessage.h&quo ...
- Ant build ${renderscript.opt.level}问题解决方案
问题如下: BUILD FAILEDD:\adt-bundle-windows-x86_64-20131030\sdk\tools\ant\build.xml:653: The following e ...
- fFFmpeg 命令、案例、测试集中营
gitbook: https://www.gitbook.com/book/xdsnet/other-doc-cn-ffmpeg/details ffmpeg [全局选项] {[输入文件选项] -i ...
- [转载] DevOps年中盘点:国外最受欢迎的10篇技术文章
本文根据高效运维系列微信群的群友投稿整理而成.“高效运维”公众号作为本系列群的官方唯一公众号,原创并独家首发. 欢迎关注“高效运维”公众号,以免费参加「运维讲坛」每月一次的线下交流活动:并抢先赏阅干货 ...
- JS 对象(Object)和字符串(String)互转
利用原生JSON对象,将对象转为字符串 var jsObj = {}; jsObj.testArray = [1,2,3,4,5]; jsObj.name = 'CSS3'; jsObj.date = ...
- 构建maven项目3
1.1.创建Jave Project 1.使用mvn archetype:generate命令,如下所示: mvn archetype:generate -DgroupId=com.mycompany ...
- epoll中et+多线程模式中很重要的EPOLL_ONESHOT实验
因为et模式需要循环读取,但是在读取过程中,如果有新的事件到达,很可能触发了其他线程来处理这个socket,那就乱了. EPOLL_ONESHOT就是用来避免这种情况.注意在一个线程处理完一个sock ...
- Openfire 是怎么存离线消息
原文:http://myopenfire.com/article/getarticle/26 1.openfire默认怎么存离线消息 在默认情况下,不添加任何插件的情况下,当用户不在线,对于发送给 ...