5步减小你的CSS样式表
第一步:学会如何组合选择器
什么是选择器?
如果你还不知道什么叫做”选择器”,你可以先参考一下w3schools.com的CSS语法概述。
未优化的CSS代码
在下面的图例中,你会看到来自三个不同选择器的同样的CSS属性声明。
点击小图浏览清晰大图
优化的CSS代码
你可以将上面的css代码优化组合,让所有CSS选择器使用同一组属性。每个选择器之间用逗号分割开,像下面这样。
font-size: 1.5em;
padding: 10px 10px 10px 25px;
margin: 10px 0;
border: 1px solid #ddd;
background: #f0f0f0 url(crown.gif) no-repeat 5px 10px;
}
第二步:了解CSS选择器优先级
什么是CSS优先级?
选择器优先级是用于在CSS代码中同一个选择器使用不同属性时CSS优选处理哪些属性的规则。对选择器优先级不了解的话可以参考:Juicy Studio –选择器优先级
未优化的CSS代码
理解优先级规则中不同等级重要性是很必要的,如果写了同样优先级的CSS声明将有可能导致代码冲突和代码臃肿。
点击小图浏览清晰大图
优化的CSS代码
当你完全掌握CSS选择器优先级之后,你便能通过合并统一的属性声明来所见代码量,然后再单独声明元素的独有属性。你会很快找到优化CSS代码的技巧,对完成合并和匹配代码。下面是关于优化上图代码的实例:
font-size: 1.5em;
padding: 10px 10px 10px 25px;
margin: 10px 0;
border: 1px solid #ddd;
background: #f0f0f0 no-repeat 5px 10px;
}
h2.best {background-image: url(crown.gif);}
h2.fav {background-image: url(heart.gif);}
h2.comments {background-image: url(balloon.gif);}
h2.twitter {background-image: url(balloon_twitter.gif);}
#featured h2.twitter {
background-color: #fffdd7;
border: 1px solid #ddd991;
}
你还可以参考以下相关文章:
第三步:学会如何合并类和ID
和之前类似,你也可以通过匹配合并class名和id值来优化你的CSS代码。请记住,为同一个元素添加不同的多个class,你就可以通过组合不同的属性声明在实现你希望的效果。在适当的位置添加id属性也是可以让你对样式有更多的控制权。
HTML
<h2 class="best double">Best of</h2>
<h2 class="fav double">Popular Posts</h2>
</div>
<div id="disable">
<h2 class="comments double">Comments</h2>
<h2 class="twitter double">Twitter</h2>
</div>
CSS
h2.best {background-image: url(crown.gif);}
h2.fav {background-image: url(heart.gif);}
h2.comments {background-image: url(balloon.gif);}
h2.twitter {background-image: url(balloon_twitter.gif);}
h2.tools {background-image: url(wrench_screwdriver.gif);}
h2.double {
width: 263px;
float: left;
margin: 0;
}
#featured h2.double {
background-color: #ffe2e2;
}
#disable h2 {
filter:alpha(opacity=40);
opacity:.40;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
background-color: #d5d5d5;
}
第四步:学会CSS简写
CSS简写可以让你将多行的CSS属性声明缩写成简单的一行代码。现在你在很多地方都可以找到CSS缩写的相关教程,你也可以浏览以下CSS缩写教程:
- 整理及优化CSS代码的7个原则
- 10个CSS简写技巧让你永远受用
- Sitepoint – Introduction to CSS Shorthand
- 456 Berea St – Efficient CSS with Shorthand Properties
- Leigeber – CSS Short Hand Cheat Sheet
第五步:将你的样式表分成几部分–@import
在你完成一个比较大的网站项目时,你的样式表中的代码量是相当庞大的,也许会有很多不同模块的CSS声明及注释。这种情况下,你可以考虑使用将一个庞大的样式表切割成几个不同模块的小样式表,然后再用@import将他们组合起来。
HTML
你可以像平常一样调用一个样式表
CSS – styles.css
这时styles.css作为你的主样式表,它将负责调用其它子样式表。(我会把子样式表放在’styles’ 目录下以便于组织管理,纯属个人习惯,你也可以有自己的习惯)
@import "styles/checkout.css";
@import "styles/shoppingcart.css";
译者注:@import虽然能够为某个大的CSS文件减肥,但是它在页面读取方面(尤其IE)还是有弊端的。感兴趣的读者可以看看这篇文章:
《Don’t Use @import》
你还可以参考以下相关文章:
5步减小你的CSS样式表的更多相关文章
- WEB入门三 CSS样式表基础
学习内容 Ø CSS的基本语法 Ø CSS选择器 Ø 常见的CSS样式 Ø 网页中3种使用CSS的方式 能力目标 Ø 理解CSS的 ...
- 深度理解CSS样式表,内有彩蛋....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS样式表
CSS样式及属性 样式标的基本概念 样式表的分类 1.内联样式表 和html联合显示,控制精确,但可重用性差,冗余多. 例:<p style="font-size:14px;" ...
- JS 控制CSS样式表
JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline. ...
- HTML基础(三)——css样式表
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...
- DOM与CSS样式表
在前文 <DOM与元素节点内联样式>中我们了解了用 DOM 提供的接口操作元素节点内联样式的方法,今天我们来学习一下如何用 DOM 操作 CSS 样式表. CSS 样式表概况 通过使用 H ...
- 一起学HTML基础-CSS样式表-基本概念、分类、选择器
一.基本概念: CSS (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...
- CSS样式表继承详解
最近在恶补css样式表的基础知识.上次研究了css样式表之冲突问题详解 .这次是对 css 继承 特性的学习. 什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始. ...
- 2016年10月27日--css样式表
CSS样式表 样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. !doctype html> <html> <head> <met ...
随机推荐
- flask json
导入 from flask import Flask,jsonify 1.列表 def index(): arr=['mkdir','md','touch'] return jsonify(arr) ...
- Dubbo入门到精通学习笔记(十一):Dubbo服务启动依赖检查、Dubbo负载均衡策略、Dubbo线程模型(结合Linux线程数限制配置的实战分享)
文章目录 Dubbo服务启动依赖检查 Dubbo负载均衡策略 Dubbo线程模型(结合Linux线程数限制配置的实战分享) 实战经验分享( ** 属用性能调优**): Dubbo服务启动依赖检查 Du ...
- FVWM_SMALLEST_CONFIG
... # ----------------------------------------------------------------- # HANDBOOK: # http://yaoqian ...
- 解压lzma格式的img文件报“Filename has an unknown suffix, skipping”怎么办
1 确认img文件是什么压缩格式 file 文件名 2 报标题错误怎么办? mv initrd.img initrd.img.xz xz -d initrd.img.xz cpio -ivd < ...
- B. Light bulbs(2019 ICPC上海站)
There are NN light bulbs indexed from 00 to N-1N−1. Initially, all of them are off. A FLIP operation ...
- 前端实现预览ppt,word,xls,pdf文件
1.前端实现pdf文件在线预览功能 ps:刚好工作上有这个需求,所以到处找了一下处理方案,大家有需要可以试一下这几种方案,找到合适自己的 方式一. pdf文件理论上可以在浏览器直接打开预览但是需要打开 ...
- linux磁盘分区、挂载、查看
实战: 34 查看本机所有磁盘 fdisk -l 35 查看磁盘挂载情况 lsblk -f 36 39: ...
- JFinal教程
自学JFinal总结 前言:每次搭建ssm框架时,就像搬家一样,非常繁杂,并且还容易出错.正好了解到JFinal极简,无需配置即可使用,在这里记录下学习的过程. 感谢:非常感谢此网站发布的教程,非常详 ...
- 【centos】 error: command 'gcc' failed with exit status 1 错误
转载自 :http://blog.csdn.net/fenglifeng1987/article/details/38057193 用安装Python模块出现error: command 'gcc' ...
- linux redis的启动---后台启动
1.启动redis服务: redis-server 如果想要开启后台进程: 1.找到redis.conf里边的 把no 改为yes. 2.redis-server redis.conf(这个是针对两个 ...