css代码优化作用与意义是什么

这篇文章主要讲解了“css代码优化作用与意义是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css代码优化作用与意义是什么”吧！

css代码美化感导与意义
1、减少占用网页字节。在等同前提下紧缩浏览器下载css代码时日，至关于减速网页打开速率
2、便于维护。简化与标准化css代码让css代码减少，便于往后维护
3、让本人写的css代码更加专业。

css美化方式-需要美化css代码中央
1、缩写css代码。
2、分列css代码。
3、同属性提取共用css决定器。
4、散漫网页色调与后台配置格式（较大站点重要属意）。
5、层次化css代码。

实例说明注解以上几点div css美化方法
1、缩写css代码
经常使用重要缩写css属性代码下列：
bac千克round(后援属性-CSS手册详细意识bac千克round手册)
未美化前
bac公斤round-color:#FFF;对应属性为靠山色采为纯白色
background-image:url(CSS5.gif);对应属性是设置装备摆设CSS5.gif图片为配景
bac千克round-position:bottom;后援图片是居底部
bac公斤round-repeat:repeat-x;配景按X坐标（横坐标）一再紧锁
以上CSS代码可以或许简写为
bac公斤round:#FFF url(CSS5.gif) repeat-x bottom; 
抒发：后盾色彩为纯白色，并以X坐标重复CSS5.gif图片，何况图标居下。未优化css bac千克round属性相通

margin(外补白属性-CSS手册详细熟识margin手册)
未优化前
margin-left:5px; 含义为靠左5px
margin-right:6px; 靠右6px
margin-bottom:7px; 底部伸展7px
margin-top:8px; 顶部皱缩8px
优化简写为
margin:8px 6px 7px 5px; 意思和属性成就同上，可详细理解css margin介绍

padding(内补白属性-CSS手册详细大白padding手册)
未优化前
padding-left:5px; 含义为左补白5px
padding-right:6px; 右补白6px
padding-bottom:7px; 底（下）补白7px
padding-top:8px; 顶（上）补白8px
美化简写为
padding:8px 6px 7px 5px; 含义和属性成就同上，可详细了解css padding介绍

border(边框属性-CSS手册具体了然border手册)
未优化前
border-color:#000000;边框色彩为彩色
border-style:solid;边框花色为实线
border-width:1px;边框宽度为1px

或许简写为
border:1px solid #000000;寄义同上未优化前
假定是只设置右边边框为1px，色采为玄色的实线css代码以下
border-left:1px solid #000000;

font(字体属性-CSS手册具体分明fonts手册)
字体的属性下列：
font-style:italic; 字体格式
font-variant:small-caps; 字体异体
font-weight:bold; 字体加粗
font-size:12px; 字大小为12px
line-height:22px;字行高为22px 
font-family:"黑体" 字体为黑体字
大要缩写为一句：font:italic small-caps bold 12px/22px "黑体";

留心，如果你缩写字体界说，最多要定义font-size与font-family两个值相熟css font能耐。
明白px是甚么

2、分列css代码。
一样平常咱们代码以下布列
 

如许将占css文件许多的空格和回车位空间，这里还占用了12行css文件空间
css5.com.cn建议你改写为

多么将华侈空格和回车位，及css文件行数，从而节流代码文件字节。

3、同属性提取共用css决定器。
这个要明确的是如果有两个一小块的css属性如宽度高度字体色彩都近似，而有很小一点不合，这个时刻咱们就重要提取人人相通的css名堂出来，零丁命名一个css属性决意器，从而节约css代码。
如：

/* CSS css5.com.cn div+css实例演示图 */
.yangshi{ font-size:12px;border:1px solid #000000;padding:5px; width:25px;}
.yangshi2{ font-size:12px;border:1px solid #000000;padding:5px; width:50px;}

这里的yangshi与yanshi2两个技俩有相通的字体大小为12px，边框相反,内补白相斥，只有宽度差异，这个时辰我们就能够提取他们相斥部份偏从新新建个css抉择器与重用

新建css属性决议器演示如下

.gongyong{font-size:12px;border:1px solid #000000;padding:5px;}
.yangshi{ width:25px;}
.yangshi2{width:50px;}

多么在调用css时辰-认识css 引入
<div class="gongyong yangshi">div css名堂</div>
<div class="gongyong yangshi2">div css技俩2</div>
多么就大约让颠末挪用雷同css名目，再分袂调用不合css属性类就可，以上实例还不克不及展示他的好处，但是假如代码多而且有许多处所如以上个性，如许将表现其屈服赋性。

4、分离网页色彩和配景配置样式（较大站点必要注意）。
这点有以上第三点同属性提取共用css决意器共性，但是区别中央，若是站比拟大，需要改一个中央便可篡改整个站点网页的字体颜色花样，靠山图案颜色，边框色调名目。
这个时辰咱们将紧要在div+css开辟的时候特别将的根蒂字体花式、靠山图案色彩、边框等颜色提取到一块儿或放到一个css文件里，如许一来便于咱们护卫整治整个站点根基花式。

5、层次化css代码。
层次化css代码含意是将css代码收拾整顿归类，如管制头部、局部、底部的css代码选择器款式区别开来离别放到一同并与其他中央css代码相互离隔。
如头部的css代码与模式区css代码回车各行隔开

如以上“toubu”与“dibu”以行离隔得以分辨，好处于是后护卫利便，便于识别更改护卫。

感谢各位的阅读，以上就是“css代码优化作用与意义是什么”的内容了，经过本文的学习后，相信大家对css代码优化作用与意义是什么这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！