如何书写高效的css样式
如何书写高效的css样式?
有以下四个关键要素:
1.高效的css
2.可维护的css
3.组件化的css
4.hack-free css
书写高效的css:
1.使用外联样式替代行间样式或内嵌样式(不建议使用@import外联方式)
2.使用继承(比如字体、字号属性,可以在body的css样式中规定,有特定的变化,再针对该元素书写。并非特指使用inherit属性)
3.使用多重选择器
示例:h1,h2,h3,...,a{color:#333}
4.使用多重声明(同一元素的样式设置,在一对{}中写完)
5.使用简记属性
示例:a{font:bold 14px/20px Verdana, Arial, Helvetica, sans-serif;}
分别表示:加粗;字号14px;行高20px;字体
6.避免使用!important属性,特定情况下可以使用以下方式加高权重级别
示例:body #content{...}
书写可维护的css:
书写可维护的css,可以让后续维护人员更容易理解我们书写的样式代码。
1.在样式表的开头添加一个注释块,用以描述这个样式表的创建日期、创建者、标记等备注信息
示例:/*------------------------------------
创建时间:2015.10.16
创建者:
----------------------------------------*/
2.包括公用的颜色标记
示例:body{color:#333;}
a{color:#333;}
a:hover{color:#ff3300;}
3.给ID和class进行有意义的命名
4.将关联的样式进行整合
示例:#nav{...}
#nav ul{...}
#nav ul li{...}
5.给样式添加清晰的备注
示例:/*---------header start---------------*/
.........................
/*---------header end---------------*/
6.组件化css
将css样式表拆分成独立的css样式文件:header.css footer.css common.css content.css container.css等等,拆分之后方便css样式的维护管理。
Hack free css:
如何处理IE浏览器的兼容性问题,一直困扰着前端工作者。如果使用css hack来解决问题,在IE浏览器版本升级更替,改进对css样式的支持后,之前使用的hacks将会无效。
在不使用css hack的情况下更新页面,可以使用条件注释来针对或避开IE浏览器。
针对IE浏览器:
步骤1.创建一个css样式文件,ie5.css
步骤2.使用条件注释:当使用的浏览器是ie5版本时,读取并使用ie5.css文件
示例:<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="css/ie5.css" media="screen">
<![endif]-->
使用条件注释的优点:
1.No Hacks
特定的css规则仅出现在新的样式表里。
2.文件分离
针对特定版本的IE定义的样式脱离了主样式表,可以在IE浏览器升级更新对属性支持时轻松移除这些文件。
3.针对性
可对不同版本的IE浏览器有针对性的进行相关属性的定义。
如何书写高效的css样式的更多相关文章
- 书写高效的CSS
一.使用高效是CSS ①:使用外联样式替代行间样式或内嵌样式. 不推荐使用内联样式:<style></style> 不推荐使用内嵌样式:<p style="&q ...
- 书写更加高效的CSS,走出误区
根据一些CSS写作经验,如何提高渲染效率及所占用消耗的资源,我们来浅谈一下CSS的渲染效率,书写高效的CSS. 1.十六进制的颜色值对位数与大小写 编写十六进制颜色值时你可能会用小写字母或省略成3位数 ...
- 引入CSS样式表(书写位置)
CSS可以写到那个位置? 是不是一定写到html文件里面呢? 内部样式表 内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下: <head ...
- CSS样式表的书写位置
行内式(内联样式) 是通过标签的style属性来设置元素的样式,其基本语法格式如下: <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"&g ...
- 在不同的浏览器使用不同的css样式,解决浏览器兼容问题
区别IE6与FF: background:orange; *background:blue; 区别IE6与IE7: background:green !import ...
- 如何让不同浏览器调用不同的CSS样式
如何让不同浏览器调用不同的CSS样式 由 于对W3C标准支持程度的不同,往往导致同一个CSS样式表在各种Web浏览器中的呈现大相径庭.以目前市场占有率最高的两个浏览器Microsoft Interne ...
- css书写规范及特殊样式
1.CSS书写顺序: (1)位置:position.top.right.z-index.display.float (2)大小:width.height.padding.margin (3)文字系列: ...
- css样式书写的问题
经常遇到前端的朋友问及css样式书写的问题,结合自己实际的工作,自己总结了整理了一下,给大家分享: 一.顺序问题:显示属性-位置属性-元素自身属性-文本属性-其他属性 1.显示属性:z-index.d ...
- CSS 样式书写规范
可能不同团队都有各自的规范,又或者很多人在写 CSS 的时候还是想到什么就写什么,不存在太多的约束. 我觉得 CSS 代码规范还是有存在的必要的,尤其是在团队配合,多人协作下,规范就显得尤为重要. 本 ...
随机推荐
- 来谈谈JAVA面向对象 - 鲁班即将五杀,大乔送他回家??
开发IDE为Eclipse或者MyEclipse. 首先,如果我们使用面向过程的思维来解决这个问题,就是第一步做什么,第二步做什么? 鲁班即将五杀,大乔送他回家 这个现象可以简单地拆分为两步,代码大概 ...
- Delphi关于ADO控件的简单使用
控件:TAdoQuery.ADOConnection.TDataSource.TRzDBGrid 1.新建Vcl Form Application 2.在窗体上添加TADOConnection,设置连 ...
- 巧用UserAgent来解决浏览器的各种问题
以前对UserAgent了解不是很透彻,今天发现UserAgent用处多多.比如我之前一直很喜欢用火狐浏览器,不过用了那么久发现火狐浏览器问题多多,比如有的论坛上传附件或者上传图片等按钮没有作用,并且 ...
- XIB中拖UIScrollView的困难
最近在开发中有一个移植代码的工作,但是呢那块代码是n多年前写的,虽然还没看时就感觉到坑不小,到真正看的时候才发现是个陨石坑.具体的说呢,所有的界面都是xib托的而且没用Auto Layout约束,而且 ...
- kubernetes实践之运行aspnetcore webapi微服务
1.预备工作 unbuntu 16.04 and above docker kubernetes 集群 2.使用vs2017创建一个web api应用程序,并打包镜像到本地. 3.推送本地镜像到doc ...
- python 练完这些,你的函数编程就ok了
文件处理相关 1,编码问题 (1)请问python2与python3中的默认编码是什么? python 2.x默认的字符编码是ASCII,默认的文件编码也是ASCII python 2.x默认的字符编 ...
- windows下安装mysql以及启动
配置环境变量,在path中添加 ;E:\wamp\Apache24\mysql(这是你的mysql安装路径),然后在修改一下配置文件my-default.ini(mysql安装文件夹目录下) 修改其中 ...
- 关于脱离laravel框架使用Illuminate/Validation验证器
1.关于Illuminate/Validation验证器 Validation 类用于验证数据以及获取错误消息. github地址:github.com/illuminate/validation 文 ...
- Laravel框架中的make方法详解
为什么网上已经有这么多的介绍Laravel的执行流程了,Laravel的容器详解了,Laravel的特性了,Laravel的启动过程了之类的文章,我还要来再分享呢? 因为,每个人的思维方式和方向是不一 ...
- Java使用对象流读取文件的问题
把对象进行持久化(把对象存到本地)要用到对象流进行处理,在用对象流处理过程中,在写对象和读对象时候遇到了很多问题,分享一下. 我们处理对象数据的时候不可能只处理一个对象,在系统运行的时候,可能产生的对 ...