CSS 优化

来源：互联网发布：qq炫舞头像源码编辑：程序博客网时间：2024/05/21 21:43

属性值的简写形式

1.如果给出2个属性值，前者表示上下的属性，后者表示左右的属性；

2.如果给出3个属性值，前者表示上的属性，中间的数值表示左右的属性，后者表示下的属性；

3.如果给出4个属性值，依次表示上、右、下、左的属性，即顺时针排序。

{margin-top :5px; margin-right:10px; margin-bottom:5px; margin-left:10px;}

{margin:5px 10px 5px 10px};

CSS 的优化

1：网络性能把css 写到字节数最少加快下载速度自然可以让页面快

2：语法性能：同样都能实现某些效果

CSS压缩

例如

.test{    background-color:#ffffff;    background-image:url(a.jpg);}

经过压缩后会变成这样

.test{ background-color:#fff;  background-image:url(a.jpg)}

合写CSS

除了压缩的方式，我们还可以通过少写CSS属性来达到减少CSS字节的目的，拿个最常见的例子

.test{ background-color: #000; background-image: url(image.jpg); background-position: left top; background-repeat: no-repeat;}

我们可以改写一下上面的CSS，达到同样的效果

.test{  background: #000 url(image.jpg) top left no-repeat;}

在CSS中还有很多类似的属性可以合写

font

{font-style: oblique; font-weight: bold; font-size: 16px; font-family: Helvetica, Arial, Sans-Serif;}{font: oblique bold 16px Helvetica, Arial, Sans-Serif;}

margin/padding

{margin-top: 5px; margin-right: 10px; margin-bottom: 20px; margin-left: 15px;}{margin: 5px 10px 20px 15px;}

{padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px;}{padding: 5px 10px}{padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px;}{padding:5px;}

background

{background-color: #000; background-image: url(image.jpg); background-position: left top; background-repeat: no-repeat;}{background: #000 url(image.jpg) top left no-repeat;}

border

{border-width: 2px; border-style: solid; border-color: #000;}{border: 2px solid #000;}

{border-top: 2px; border-right: 5px; border-left: 10px; border-bottom: 3px;}{border: 2px 5px 10px 3px;}

抽离、拆分CSS，不加载所有CSS

抽离CSS是指把一些通用的CSS放到一个文件内，而不是写道各个页面，这样一次下载后，其它页面用到的时候就可以利用缓存了，减少不必要的重复下载。

应用抽离原则，在很多时候我们把页面通用的CSS写到了一个文件，这样加载一次后就可以利用缓存，但这样做并不适合所有场景，以前我写CSS把一些前端插件用的CSS全写到了一个页面，但是有时候页面只会用一个Dialog、有的页面只用到了一个TreeView，但却把十多个插件的CSS都下载到了页面，这就是问题了，所以虽然把CSS写道一个文件可以减少http请求，但像刚才的这种情况是不应该这样做的，对一些所有页面都会用到的我们可以这样做，所以我们在抽离和拆分的时候可要想好了。

CSS放在head中，减少repaint和reflow

相信做web的同学都知道这条建议，但为什么CSS放在页面顶部有利于网页优化呢？浏览器渲染页面大概是这样的，当浏览器从上到下一边下载html生成DOM tree一边根据浏览器默认及现有CSS生成render tree来渲染页面，当遇到新的CSS的时候下载并结合现有CSS重新生成render tree，刚才的渲染工作就白费了，如果我们把所有CSS都放到页面顶部，这样就没有重新渲染的过程了。对浏览器工作原理有兴趣的同学可以看看神文

选择器优先级

当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，CSS有一套优先级的定义。

不同级别

在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
作为style属性写在元素内的样式
id选择器
类选择器
标签选择器
通配符选择器
浏览器自定义或继承

同一级别

同一级别中后写的会覆盖先写的样式

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div.test{
            background-COLOR:#a00;
            width:100px;
            height: 100px;
        }

        .test.test2{
            background-COLOR:#0e0;
            width:100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="test test2"></div>
</body>
</html>

内联样式表的权值为 1000
ID 选择器的权值为 100
Class 类选择器的权值为 10
HTML 标签选择器的权值为 1

我们可以把选择器中规则对应做加法，比较权值，如果权值相同那就后面的覆盖前面的了，div.class的权值是1+10=11，而.test1 .test2的权值是10+10=20，所以div会应用.test1 .test2变成绿色

行内(inline)元素的一些属性

并不是所有的属性对行内元素都能够生效

行内元素不会应用width属性，其长度是由内容撑开的
行内元素不会应用height属性，其高度也是由内容撑开的，但是高度可以通过line-height调节
行内元素的padding属性只用padding-left和padding-right生效，padding-top和padding-bottom会改变元素范围，但不会对其它元素造成影响
行内元素的margin属性只有margin-left和margin-right有效，margin-top和margin-bottom无效
行内元素的overflow属性无效，这个不用多说了
行内元素的vertical-align属性无效（height属性无效）

我们对span设置的width和height属性并没有生效，margin-top和margin-bottom无效，padding-top和padding-bottom会改变元素范围（背景区域变大了），但并没有影响下面元素位置

一些互斥的元素

对于absolute和fixed定位的(固定大小，设置了width和height属性)元素，如果设置了top和left属性，那么设置bottom和right值就没有作用了，应该是top和left优先级高，否则同时写了浏览器怎么知道按照谁定位
对于absolute和fixed定位的元素，如果设置了top、left、bottom、right的值后margin属性也就不起作用了
对于absolute和fixed定位的元素，如果设置了top、left、bottom、right的值后float属性同样会失效
块元素如果设置了float属性或者是absolute、fixed定位，那么vertical-align属性不再起作用

0 0