1、高效的,可维护的, 组件化的,【译】,你对CSS了解多少?,”,“如何写出更加高效,的CSS呢?,让我们来看看4个关键点,高效的CSS,可维护的CSS组件化的CSS,hack-free CSS,书写高效CSS,使用外联样式替代行间样式或者内嵌样式.,不推荐使用行间样式:,!DOCTYPE HTML PUBLIC “-/W3C/DTD HTML 4.01/EN“,“http:/www.w3.org/TR/html4/strict.dtd“,Page title,.,不推荐使用内嵌样式:,!DOCTYPE HTML PUBLIC “-/W3C/DTD HTML 4.01/EN“,“http:/ww
2、w.w3.org/TR/html4/strict.dtd“,Page title,p color: red; ,.,推荐使用外联样式:,!DOCTYPE HTML PUBLIC “-/W3C/DTD HTML 4.01/EN“,“http:/www.w3.org/TR/html4/strict.dtd“,Page title,.,为了兼容老版本的浏览器，建议使 用link引入外部样式表的方来代替 import导入样式的方式.,译者注：,import是CSS2.1提出的所以老的浏览器不支持，点击查看 import的兼容性。import和link在使用上会有一些区别， 利用二者之间的差异，可以在实
3、际运用中进行权衡。 关于import和link方式的比较有几篇文章可以拓展阅读： import vs link、dont use import 、 Flash of Unstyled Content (FOUC) .,不推荐import导入方式:,!DOCTYPE HTML PUBLIC “-/W3C/DTD HTML 4.01/EN“,“http:/www.w3.org/TR/html4/strict.dtd“,Page title,import url(“styles.css“);,.,推荐引入外部样式表方式:,!DOCTYPE HTML PUBLIC “-/W3C/DTD HTML 4.
4、01/EN“,“http:/www.w3.org/TR/html4/strict.dtd“,Page title,.,使用 继承,低效率的:,p,font-family: arial, helvetica, sans-serif; ,#container ,font-family: arial, helvetica, sans-serif; ,#navigation ,font-family: arial, helvetica, sans-serif; ,#content ,font-family: arial, helvetica, sans-serif; ,#sidebar ,font-f
5、amily: arial, helvetica, sans-serif; ,h1 font-family: georgia, times, serif; ,高效的:,body ,font-family: arial, helvetica, sans-serif; ,body ,font-family: arial, helvetica, sans-serif; ,h1 ,font-family: georgia, times, serif; ,使用 多重选择器,低效率的:,h1 color: #236799; h2 color: #236799; h3 color: #236799; h4 c
6、olor: #236799; ,高效的:,h1, h2, h3, h4 color: #236799; ,使用 多重声明,低效率的:,p margin: 0 0 1em; ,p background: #ddd; ,p color: #666; ,译者注：,对于十六进制颜色值，个人偏向于色值不缩写且英文字 母要大写的方式.,高效的:,p ,margin: 0 0 1em; background: #ddd; color: #666;,使用 简记属性,低效率的:,body ,font-size: 85%;,font-family: arial, helvetica, sans-serif; ba
7、ckground-image: url(image.gif); background-repeat: no-repeat; background-position: 0 100%; margin-top: 1em; margin-right: 1em; margin-bottom: 0; margin-left: 1em; padding-top: 10px; padding-right: 10px;,padding-bottom: 10px; padding-left: 10px; border-style: solid; border-width: 1px; border-color: r
8、ed; color: #222222;,高效的:,body ,font: 85% arial, helvetica, sans-serif;,background: url(image.gif) no-repeat 0 100%; margin: 1em 1em 0; padding: 10px;,border: 1px solid red; color: #222;,避免使用 !important,慎用写法:,#news background: #ddd !important; ,特定情况下可以使用,以下方式提高权重级别:,#container #news background: #ddd;
9、 ,body #container #news background: #ddd; ,那么,如何让(后续)维护你站点的人更容易理解你的样式代码呢？,书写可维护的CSS,在样式表开头添加一个注 释块，用以描述这个样式 表的创建日期、创建者、 标记等备注信息.,/* -,Site: Author: Updated:,Site nameNameDate and time,Updated by: Name - */,包括公用颜色标记,/* - COLORS,#def455 #fff #333 #00600f #098761 #aaf433 #960 #000,Body background: Cont
10、ainer background: Main Text: Links: Visited links: Hover links: H1, H2, H3: H4, H5, H6: - */,给ID和Class进行有意义的命名,不推荐的命名方式:,.green-box . #big-text . ,推荐使用的命名方式:,.pullquote . ,#introduction . ,将关联的样式规则进行整合,#header . ,#header h1 . ,#header h1 img . #header form . #header a#skip . ,#navigation . ,#navigat
11、ion ul . #navigation ul li . #navigation ul li a . ,#navigation ul li a:hover . ,#content . ,#content h2 . #content p . #content ul . #content ul li . ,给样式添加清晰的注释,/*,- header styles,- */,#header . ,#header h1 . ,#header h1 img . #header form . ,/*,- navigation styles,- */,#navigation . ,接下来, 如何管理你整站
12、,的CSS文件呢？,组件化 CSS,举个例子: 你的Html 文档引入了一个主样式表,HTML文档,主样式表,HTML 文档,步骤一 将主样式表拆分成独立的样式文件container.css,header.csscontent.css,为什么要拆分样式文件?,更易于查找样式规则.简化维护，方便管理.还可以针对某,一页面提供特定的样式.,步骤二添加一个桥接样式文件,HTML 文档,桥接样式文件,为什么要添加桥接样式？,你可以随时添加或移除样式而不需要修改HTML文档.,步骤三引入桥接样式文件,HTML 文档,桥接样式文件,!DOCTYPE HTML PUBLIC “-/W3C/DTD HTML
13、4.01/EN“,“http:/www.w3.org/TR/html4/strict.dtd“,Page title,link rel=“stylesheet“ href=“bridging.css“,type=“text/css” media=“screen, projection“,.,为什么要定义两种媒体类型？,NN4不支持import，故识别,不到桥接样式.,步骤四将(分离的)CSS文件导入桥接样式中,HTML 文档,桥接样式文件,import header.css; import content.css; import footer.css;,imports 如何工作?,它将所有CS
14、S规则从一个文,件导入到另外一个文件. import 不能被老的 浏览器所识别.,概述?,HTML 文档,桥接样式文件,对于大型站点来 说，这是一个理 想的概念.,Home,bridge1,headernav,footerhome,Section 1,bridge2,headernav,footerSection 1,Section 2,bridge3,headernav,footerSection 2,Hack-free CSS,处理诸如IE这样烦人的浏览器的兼容性是我们最头疼的事儿之一.,很多朋友使用CSS,hack来解决这些问题.,问题是当IE版本进行升级,更替，改进对CSS的支持后，之
15、前使用的hacks将会无效!,你是怎么解决这个问题的呢？,“我们要求你在不使用CSS,hacks 的情况下更新你的页面.假如你想针对IE或者避开IE，你可以使用条,件注释.”,条件注释如何工作？,步骤一,针对IE，创建一个新的样式文件,Home,bridge1,headernav,footerhomeIE,步骤二,在HTML文档的开头添加条件注释代码,!DOCTYPE HTML PUBLIC “-/W3C/DTD HTML 4.01/EN“,“http:/www.w3.org/TR/html4/strict.dtd“,Page title,.,只有指定的IE浏览器版本识别这个心的样式，其它的浏
16、览器将会彻底忽略它.,Home,bridge1,headernav,footerhomeIE,平常的浏览器识别:,Home,bridge1,headernav,footerhomeIE,特定IE版本识别:,Home,bridge1,headernav,footerhomeIE,举个例子, 大多数浏览器会,将补白加进容器的宽度里，,但是IE5不会.这种情况下， IE5显示的是一个比较小的,容器.,main.css (被包含IE5在内的所有浏览器识别):,#container ,width: 600px;,padding: 100px;,ie5.css (只有IE5识别):,#container width: 800px; ,为什么条件注释是一个好的解决 方案呢？,1. No hacks,特定的CSS规则仅出现在新的样式表里.,2. 文件分离,针对特定版本的IE定义的样式脱离了主样式表，可以在IE浏览器升级更新对属性支持时轻松移除这些文件.,3. 针对性,可对不同版本的IE浏览器有针对性的进行相关属性的定 义。,高效的 CSS,可维护的 CSS,组件化的 CSS hack-free CSS,作者: Russ Weakley,http:/.au,翻译: Jeanne,http:/,
