2015.11.08

书写高效的CSS

一、使用高效是CSS

①:使用外联样式替代行间样式或内嵌样式。

  不推荐使用内联样式:<style></style>

  不推荐使用内嵌样式:<p style=""></p>

  推荐使用外联样式:<link href="">

②:为了兼容老版本的浏览器,建议使用link引入外部样式表的方式替代@import导入样式的方式。@import是css2.1提出来的,所以老的浏览器不支持。

  不推荐@import导入方法:<style type="text/css">@impory url("style.css");</style>

  推荐引入外部样式表方式:<link rel="stylesheet" href="style.css" type="text/css"/>

③:使用继承:将子元素共同使用的样式赋给父元素

④:使用多重选择器:将元素共同使用到的样式写在一起。比如h1,h2,h3,h4样式一样的部分,就写在一起,不要写成4个独立的。

⑤:使用多重声明。不要像下面那种写法,应该写在一起。

  p { margin: 0 0 1em; }
  p { background: #ddd; }
  p { color: #666; }

⑥:使用简记属性。margin:10px 10px;

⑦:避免使用!important,特定情况下可以使用提高权重级别。

二、维护

①:在样式表开头添加一个注释块,用以描述这个样式表的创建日期、 创建者、标记等备注信息.

②:包括公用颜色标记

  /*
  ---------------------------------
  COLORS
  Body background: #def455
  Container background: #fff
  Main Text: #333
  Links: #00600f
  Visited links: #098761
  Hover links: #aaf433
  H1, H2, H3: #960
  H4, H5, H6: #000
  ---------------------------------
  */

③:给ID和Class进行有意义的命名

④:将关联的样式规则进行整合

#header { ... }
#header h1 { ... }
#header h1 img { ... }
#header form { ... }
#header a#skip { ... }
#navigation { ... }
#navigation ul { ... }
#navigation ul li { ... }
#navigation ul li a { ... }
#navigation ul li a:hover { ... }
#content { ... }
#content h2 { ... }
#content p { ... }
#content ul { ... }
#content ul li { ... }
⑤:给样式添加清晰的注释
三、管理整站的CSS文件

①:组件化CSS

②:特定情况下使用条件注释

<!--[if IE]>
<!--[if IE 5]>
<!--[if IE 6]>
<!--[if lt IE 6]>
<!--[if lte IE 6]>
<!--[if gt IE 6]>
<!--[if gte IE 6]>

时间: 2024-10-05 23:27:17

2015.11.08的相关文章

我关注的一周技术动态 2015.11.08

分布式系统实践 1. 为什么大部分NoSQL不提供分布式事务? http://www.jdon.com/47671?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io 要点: 市面上各种NoSQL数据库种类繁多, 但是大部分NoSQL数据库都不提供分布式事务, 我也经常听到有些同学评价某些NoSQL数据库的缺点时就是说不提供分布式事务. 分布式事务不是实现不了, 而是代价较高, 本文介绍了实现分布式事务需要做出的牺牲和取舍

张珺 2015/07/08 个人文档

姓名 张珺 日期 中蓝公寓蓝芳园D507,2015/07/08 主要工作及心得 在今天的设计工作中, 我完成了客户端数据接收及处理部分的编写工作. 通过今天的编写,我学会了Java中socket通信的相关知识,以及Java中一些相关度数据结构的使用方法. 遇到的问题 对于Java中预定义的一些数据结构的使用缺乏了解. 由于接收的数据的类定义是由小组中其他同学预先编写,对于其中各项的定义,接收时的数据存放方式的理解存在一些问题. 解决方法 通过上网等方式查找资料,了解了Java中的特殊数据结构的使

2015.11.06 学习Ubuntu下常用命令

2015.11.06 学习Ubuntu下常用命令 1.关闭防火墙:ufw disable 2.开启防火墙:ufw enable 3.防火墙状态:ufw status 4.查看占用的端口:#lsof -i 5.查看某一个端口:#lsof -i:8080  或者是: #netstat -apn|grep 8080————接着:#ps -aux|grep 进程号 6.结束占用端口的进程:#killall 进程名 7.自己写一遍,记得牢!

PCB设计软件CadSoft Eagle Professional v7.5 Multilingual +DownStream Products 2015.11

PCB设计软件CadSoft Eagle Professional v7.5 Multilingual Win64 1CDCadSoft Eagle Professiona是一款简单易用的印刷电路板设计软件,其中包含原理图编辑器.PCB编辑 器和自动布线器三个模块,方便设计者更方便操作.CadSoft Eagle Professiona支持中文版 DownStream Products 2015.11 1CD业界领先的PCB后处理解决方案CadSoft.Eagle.Professional.v7

分布式系统一周技术动态 2015.11.22

分布式系统实践 1. 直观理解paxos http://drmingdrmer.github.io/pdf/paxos-slide/paxos.pdf 要点: paxos协议一直以难以理解著称, 以至于该论文发表10年后才被人们认识到重要性, 这篇文章通过具体的例子来阐述paxos协议, 让人感觉到paxos协议不是发明出来的, 而是演化而来的, 让paxos协议不再那么难以理解了. 2. NoSQL数据库模型 http://darkhouse.com.cn/blog/4?hmsr=toutia

我关注的一周技术动态 2015.11.15

分布式系统实践 1. 一致性哈希算法 http://www.javaranger.com/archives/1781?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io 要点: 一致性hash算法是解决分布式系统数据划分的有效手段, 解决了传统hash算法在机器扩容时需要大量移动数据的问题. 这篇文章对一致性hash算法做了简要的介绍, 如果你还不了解一致性hash算法, 那么请读读这篇文章吧 2. 巧用CAS解决数据一致

2015.11.04 学习 Ubuntu下安装gocode

2015.11.04 学习 Ubuntu下安装gocode 1.go get github.com/nsf/gocode,如果不成功 2.网页http://github.com/nsf/gocode,下载包,然后解压,解压后的文件名为gocode-master,修改为gocode. 3.复制gocode文件夹到go的安装目录~/go/github.com/nsf/gocode,(没有的话自行创建) 4.然后命令行执行go install github.com/nsf/gocode.确保安装目录的

2015.11.02 学习 Ubuntu下安装gosublime插件及其配置

2015.11.02 学习 Ubuntu下安装gosublime插件及其配置 1.Ctrl+shift+P 打开package control 输入pcip 回车 2.出现的框中输入gosublime,回车 3.preferences---package setting--gosublime--setting default 打开后在env{}中添加GOROOT和GOPATH 4.保存后全部复制到preferences---package setting--gosublime--setting

使用 VS2013 Update 4 编译 NASM 2.11.08

1. 下载 nasm-2.11.08.zip (here/here) 解压至本地 2. 开始 -> Visual Studio 2013 -> Visual Studio 2013 Tools -> Developer Command Prompt for VS2013 cd 到 NASM 所在路径 参照 Mkfiles\README,执行 nmake /f Mkfiles/msvc.mak 3. 编译成功 完整编译包,如需减小exe大小,可在 makefile 中加上 compiler