css优化篇 - beidan-html教程-PHP中文网

css优化篇 - beidan

php中文网

发布： 2016-05-22 17:19:47

原创

1763人浏览过

平时总说如何如何优化，今天就详细的写一下css如何优化，嘿嘿。

首先，CSS的优化工作主要从两个方面着手

网络性能：把CSS写到字节数最少，加快下载速度，自然可以让页面渲染的更快一些
语法性能：同样都能实现某些效果，但并不是所有的方式效果都相同，我们看过不少关于JavaScript方面的语法优化知识，其实CSS里面也有一些

合写CSS ：能合写的属性不要分开写，部分例子如下

background属性

<span style="color: #008080;">1</span> <span style="color: #000000;">.test{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">  background: #000 url(image.jpg) left top no-repeat;
</span><span style="color: #008080;">3</span> <span style="color: #000000;">} 
</span><span style="color: #008080;">4</span> <span style="color: #000000;">background-image: url(image.jpg);
</span><span style="color: #008080;">5</span> <span style="color: #000000;">background-position: left top;
</span><span style="color: #008080;">6</span> background-repeat: no-repeat;

登录后复制

margin/padding

<span style="color: #000000;">{margin-top: 5px; margin-right: 10px; margin-bottom: 5px; margin-left: 10px;}

{margin: 5px 10px 5px 10px;} 顺时针
{border-top: 2px; border-right: 5px; border-left: 10px; border-bottom: 3px;}

{border: 2px 5px 10px 3px;}</span>

登录后复制

font

<span style="color: #000000;">{font: oblique bold 16px/35px Helvetica,Arial}
 
font-style: oblique;
 
font-weight:bold;
 
font-size: 16px;   line-height:35px;
 
font-family:Helvetical,Arial;</span>

登录后复制

`border:5px solid red;`

<span style="color: #008080;">1</span> border:<strong>border-width</strong>,<strong>border-style</strong>,<strong>border-color</strong>;

登录后复制

不要使用 `@import`

与 `<link>` 标签相比，`@import` 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。替代办法有以下几种：使用多个 `<link>` 元素，最好是发布的时候合并压缩css，减少http请求个数

利用继承

Frase

Frase是一款出色的长篇 AI 写作工具，快速创建seo优化的内容。

122

查看详情

说到继承，就需要了解权重相关知识，也顺便总结一下各种情况下哪个属性优先，防止滥用属性

立即学习“前端免费学习笔记（深入）”；

由于继承而发生样式冲突时，最近祖先获胜。
继承的样式和直接指定的样式冲突时，直接指定的样式获胜。
直接指定的样式发生冲突时，样式权值高者获胜。

css选择器权值
标签选择器 1
类选择器 10
ID选择器 100
内联样式 1000
伪元素(:first-child等) 1
伪类(:link等) 10

!important的样式属性不被覆盖。不能滥用!important。
外联式样式（属于外部样式表）

1. 它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的

2. CSS文件后面的会覆盖前面的

嵌入式样式（属于内部样式表）

　　导入式会在整个网页装载完后再装载CSS文件

内联式样式（属于内部样式表）

style="font-size:10px;font-color:#ff0000"

大家都在看：

如何使用CSS和JavaScript实现鼠标悬停显示隐藏元素（例如：巨型菜单）实现下拉菜单在地图上方显示：CSS层叠上下文与z-index实践利用CSS优化表格单元格内伪元素对齐：实现稳定分隔线效果解决纯CSS加载动画伪元素延迟不同步问题：原理、调试与优化动态控制固定元素可见性：基于滚动位置和屏幕尺寸的实现教程

css优化篇 - beidan

合写CSS ：能合写的属性不要分开写，部分例子如下

background属性

margin/padding

border:5px solid red;

不要使用 @import

与 <link> 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。替代办法有以下几种： 使用多个 <link> 元素，最好是发布的时候合并压缩css，减少http请求个数

大家都在看：

`border:5px solid red;`

不要使用 `@import`

与 `<link>` 标签相比，`@import` 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。替代办法有以下几种：使用多个 `<link>` 元素，最好是发布的时候合并压缩css，减少http请求个数