Maison > interface Web > tutoriel HTML > css优化篇 - beidan

css优化篇 - beidan

WBOY
Libérer: 2016-05-22 17:19:47
original
1304 Les gens l'ont consulté

平时总说如何如何优化,今天就详细的写一下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;
Copier après la connexion

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>
Copier après la connexion
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>
Copier après la connexion

border:5px solid red;  

<span style="color: #008080;">1</span> border:<strong>border-width</strong>,<strong>border-style</strong>,<strong>border-color</strong>;
Copier après la connexion

不要使用 @import

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

利用继承

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

  • 由于继承而发生样式冲突时,最近祖先获胜。
  • 继承的样式和直接指定的样式冲突时,直接指定的样式获胜。
  • 直接指定的样式发生冲突时,样式权值高者获胜。
     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"  
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal