年轻,更要脱颖而出
对于网站建设,我们有活力,有态度
我们的优势: 多年经验网站设计人员 配备阿里云主机,BGP多线,高速访问 网站数据连接通畅快速打开 免费协助工信部网站备案 承诺24小时内快速解决网站问题

在网站建设中CSS样式缩写技术其实很重要的

作为一名网站建设师,你或许从前听说过一个网页尽量不要超越30KB的巨细主张,可是跟着互联网的日益遍及,网络带宽的在飞速拓展,许多设计师现已不再考虑这条30KB的抱负原则,加上越来越受欢迎的CSS布局和Javascript对网站用户体会的强化,使得这种现象越来越遍及,尤其是关于大型网站来说,只是一个CSS文件就现已超越了30KB的上限。即便如此,咱们仍是要看到用户体会的重要性,在网站建设的一起也很有必要考虑CSS代码的缩写优化,它还能让你的CSS代码更有条理、更高效。你将会学到更多关于CSS代码优化的常识,这能帮你更了解CSS代码的规范性。了解这些概念还能让你成为更全面的网站建设师,然后写出更优化的CSS代码。
在网站建设中CSS样式缩写技术其实很重要的
何为CSS缩写技能?不难理解,CSS缩写技能就是在CSS等效的前提下,把多句CSS代码简化成一句。在济南网站建设看来,CSS缩写技能是网站建设不行疏忽的技能,是很有必要的,CSS缩写建设网站的必要性主要有三点:一是CSS缩写削减代码输入时刻,写起来便利;二是CSS缩写削减了网站需求加载的字节数,有网站翻开速度的进步;三是CSS缩写后代码就相应少了,看上去一望而知,保护起来也便利。那么,CSS缩写技能包含哪些呢?哪些CSS特点能进行CSS缩写?以下是济南网站建设总结的一些能够缩写的CSS特点,助您的客户早一点翻开您的网站。
 
CSS文本缩写
 
font:italic small-caps bold 12px/1.5em arial,verdana;
 
等效于:
font-style:italic;font-variant:small-caps;font-weight:bold;font-size:12px;line-height:1.5em;font-family:arial,verdana;
 
次序:font-style | font-variant | font-weight | font-size | line-height | font-family
 
注:简写时,font-size和line-height只能经过斜杠/组成一个值,不能分隔写。
 
CSS background缩写
 
background:#fff url(bg.gif) no-repeat fixed left top;
 
等效于:
background-color:#fff;background-image:url(bg.gif);background-repeat:no-repeat;background-attachment:fixed;background-position:left top;
 
次序:background-color | background-image | background-repeat | background-attachment | background-position
 
CSS margin & padding缩写
 
margin:1px 0 2em -20px;
 
等效于:
margin-top:1px;margin-right:0;margin-bottom:2em;margin-left:-20px;
 
次序:margin-top | margin-right | margin-bottom | margin-left
 
padding的简写和margin彻底相同。
 
CSS border缩写
 
border:1px solid #000;
 
等效于:
border-width:1px;border-style:solid;border-color:#000;
 
次序:border-width | border-style | border-color
 
这三句也是简写,等于是把四边的款式合而为一了。
 
CSS border-top / border-right / border-bottom / border-left缩写
 
border-top:1px solid #000;
 
等效于:
border-top-width:1px;border-top-style:solid;border-top-color:#000;
 
次序和border相同
 
CSS list-style缩写
 
list-style:square outside url(bullet.gif);
 
等效于:
list-style-type:square;list-style-position:outside;list-style-image:url(bullet.gif);
 
次序:list-style-type | list-style-position | list-style-image
 
关于四边的简写一般如下:
 
padding:1px 2px 3px 4px;
 
等效于:
padding-top:1px;padding-right:2px;padding-bottom:3px;padding-left:4px;
 
次序:top | right | bottom | left
 
不论是边框宽度,仍是边框色彩、边距等,只需css款式触及四边,次序统统都是“上右下左”顺时针方向。
 
假如四边的值省掉一个,只写三个:
 
padding:1px 2px 3px;
 
则等效于:
padding-top:1px;padding-right:2px;padding-bottom:3px;padding-left:2px;
 
省掉的“左”值等于“右”
 
假如四边的值省掉两个:
 
padding:1px 2px;
 
则等效于:
padding-top:1px;padding-right:2px;padding-bottom:1px;padding-left:2px;
 
省掉的“下”值等于“上”
 
假如四边只要一个值:
 
padding:1px;
 
则等效于:
padding-top:1px;padding-right:1px;padding-bottom:1px;padding-left:1px;
 
关于css缩写就先写到这儿,假如您还感觉不行给力,那么您也能够试着紧缩CSS,以到达更好的作用,相同的道理,您也能够对HTML和JS等进行优化紧缩哦,咱们有什么问题欢迎与咱们沟通。

文章引用:http://www.njhsnet.com/news/jzzs/299.html
 
QQ在线咨询
售前咨询电话
025-66167090
手机服务电话
189-12902115