css代码优化

时间: 2019-05-29阅读: 219标签: 优化

css代码优化作用与意义

1、减少占用网页字节。在同等条件下缩短浏览器下载css代码时间,相当于加快网页打开速度
2、便于维护。简化和标准化css代码让css代码减少,便于日后维护
3、让自己写的css代码更加专业。


css优化方法

1、缩写css代码。
2、排列css代码。
3、同属性提取共用css选择器。
4、分离网页颜色和背景设置样式(较大站点需要注意)。

5、条理化css代码。


1、缩写css代码

background
未优化前
background-color:#FFF;对应属性为背景颜色为白色
background-image:url(divcss5.gif);对应属性是设置divcss5.gif图片为背景
background-position:bottom;背景图片是居底部
background-repeat:repeat-x;背景按X坐标(横坐标)重复延伸
以上CSS代码可以简写为
background:#FFF url(divcss5.gif) repeat-x bottom; 
解释:背景颜色为白色,并以X坐标重复divcss5.gif图片,并且图标居下。未优化css background属性相同


margin
未优化前

margin-left:5px; 意思为靠左5px
margin-right:6px; 靠右6px
margin-bottom:7px; 底部延伸7px
margin-top:8px; 顶部延伸8px
优化简写为
margin:8px 6px 7px 5px; 意思和属性效果同上


padding
未优化前

padding-left:5px; 意思为左补白5px
padding-right:6px; 右补白6px
padding-bottom:7px; 底(下)补白7px
padding-top:8px; 顶(上)补白8px
优化简写为
padding:8px 6px 7px 5px; 意思和属性效果同上


border
未优化前

border-color:#000000;边框颜色为黑色
border-style:solid;边框样式为实线
border-width:1px;边框宽度为1px

可以简写为

border:1px solid #000000;意思同上未优化前
如果是只设置左边边框为1px,颜色为黑色的实线css代码如下

border-left:1px solid #000000;


font
字体的属性如下:

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技巧。


2、排列css代码。

通常我们代码如下排列

<style>
	.yangshi {
		font-size: 12px;
		border: 1px solid #000000;
		padding: 5px;
	}
	.yangshi2 {
		font-size: 12px;
		border: 1px solid #000000;
		padding: 5px;
	}
</style>

这样将占css文件很多的空格和回车位空间,这里还占用了12行css文件空间,建议你改写为

/* CSS 实例演示*/-这里是css 注释
.yangshi{ font-size:12px;border:1px solid #000000;padding:5px;}
.yangshi2{ font-size:12px;border:1px solid #000000;padding:5px;}

这样将节约空格和回车位,及css文件行数,从而节约代码文件字节。


3、同属性提取共用css选择器。

这个要了解的是如果有两个部分的css属性如宽度高度字体颜色都相同,而有很小一点不同,这个时候我们就需要提取大家相同的css样式出来,单独命名一个css属性选择器,从而节约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时候
<div>div css样式</div>
<div>div css样式2</div>
这样就可以让通过调用相同css样式,再分别调用不同css属性类即可,以上实例还不能展示他的优点,但是如果代码多而且有很多地方如以上特点,这样将显示其功能特点。


4、分离网页颜色和背景设置样式(较大站点需要注意)。

这点有以上第三点同属性提取共用css选择器特点,但是区别地方,如果站比较大,需要改一个地方即可改变整个站点网页的字体颜色样式,背景图案颜色,边框颜色样式。
这个时候我们将需要在div+css开发的时候特别将的基本字体样式、背景图案颜色、边框等颜色提取到一起或放到一个css文件里,这样一来便于我们维护管理整个站点基本样式。


5、条理化css代码。

条理化css代码意思是将css代码整理归类,如控制头部、局部、底部的css代码选择器样式区别开来分别放到一起并与其他地方css代码互相隔开。
如头部的css代码与内容区css代码回车各行隔开

如以上“toubu”与“dibu”以行隔开得以区分,好处是以后维护方便,便于辨认更改维护。


吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 网页游戏  直播/交友   H5游戏

链接: http://www.fly63.com/article/detial/3480

CSS 性能优化还有哪些方法?

CSS 必须通过一个相对复杂的管道,就像 HTML 和 JavaScript一样,浏览器必须从服务器下载文件,然后进行解析并将其应用于DOM。由于优化程度极高,这个过程通常非常快——对于不基于框架的小型 web 项目,CSS通常只占总资源消耗的一小部分

webpack常用构建优化总览

读了《深入浅出webpack》总结一下常用的webpack的构建优化策略,可通过以下手段来提升项目构建时的速度,理论上我们项目的第三方依赖均应在自己的工程的node_modules下,所以我们可以设置查找目录

如何对 React 函数式组件进行优化?

本文只介绍函数式组件特有的性能优化方式,类组件和函数式组件都有的不介绍,比如 key 的使用。另外本文不详细的介绍 API 的使用,后面也许会写,其实想用好 hooks 还是蛮难的。

网站性能优化实战

读取缓存→DNS查询→TCP链接→发起请求→接收响应→处理HTML元素→加载完成。CSS属性读写分离:浏览器每次对元素样式进行读操作时,都必须进行一次重新渲染(重排 + 重绘)

如何让你的 JS 写得更漂亮?

网上有不少关于JS编写优化建议,这里我根据自己的经验提出一些比较有用的意见。1. 按强类型风格写代码,JS是弱类型的,但是写代码的时候不能太随意,写得太随意也体现了编码风格不好。下面分点说明:

首页白屏优化实践

自从前端三大框架React、Vue、Angular面世以来,前端开发逐渐趋向规范化、统一化,大多数时候新建前端项目,首先想到使用的技术一定是三大框架之一,框架给前端开发带来了极大的便利和规范,但是由于这三大框架都是JS驱动

网站搜索引擎优化,值得关注的4个策略有哪些?

在做网站搜索引擎优化的过程中,对于企业站而言,由于SEO人员都是处于执行层面,甚至即使你有权制定SEO优化方案,偶尔也是草草就上手操作。当你运营到一定阶段的时候

webpack优化分享

Webpack 就像一条生产线,要经过一系列处理流程后才能将源文件转换成输出结果。 这条生产线上的每个处理流程的职责都是单一的,多个流程之间有存在依赖关系,只有完成当前处理后才能交给下一个流程去处理

如何提升网站访问速度?

但网站打开速度变的不可科学的时候,怎么检测打开速度是多少?检测网站是否被劫持、域名是否被墙、DNS污染检测、网站打开速度检测等信息。如果你是网站使用者,你可以通过升级宽带、光纤、升级CPU内存

React 中 的 9 种优化技术

谷歌的数据表明,一个有 10 条数据 0.4 秒可以加载完的页面,在变成 30 条数据加载时间为 0.9 秒后,流量和广告收入减少了 20%。当谷歌地图的首页文件大小从 100kb 减少到 70~80kb 时,流量在第一周涨了 10%,接下来的三周涨了 25%

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全