[转载]样式表编写效率手册 [ 日期:2004-10-15 ] [ 来自:Plod ]
水平有限,如有纰漏恳请拨冗斧正......
效率的好处
CSS最受追捧的优点就是减小页面体积,从而减少了下载时间,无论是在页面第一次被下载时,还是此后直接从缓存中加载。事实的确如此,但是,这个在页面首次被下载过程中节省下来的体积往往又有很大一部分被浪费掉了,原因就是极度冗余的样式表代码。
好吧,一切都结束了,让我们重新开始。你将学习一些高效的样式表编写“密技”,开始对你的样式表敲骨吸髓榨干到最后一滴汁。当然,你不可能藉此节省“巨大”的页面体积,不过,对于那些在激烈的竞争中求生存的网站,省一个字节是一个字节,这些节省的字节对他们而言是极具价值的。
有这么几个范围可以进行“字节瘦身”,包括简写属性、多重声明、使用默认值、属性继承和空白的处理。
简写属性
在如何设置页面边距为零(Zeroing page margins)一文谈及了几个CSS简写属性,不过关于这个主题仍然有很多可以说的。
常用的简写属性包括:
font — 字体,控制"font-size"(字体尺寸)、"font-weight"(字体磅数)、"line-height"(行高)等
background — 背景,控制元素的背景、定位、重复等
list-style — 列表样式,设置列表项目符号的属性
margin — 边距,定义盒装模型各条边框旁留出的空白的宽度
border — 边框,定义盒状容器各条边框的样式属性,此处会涉及到另几个涉及边框的简写属性
padding — 内边距,定义盒状容器各条边框内侧留出的补白宽度
以上列表项可以直接链接到W3C CSS 2 specifications中相关的内容章节。
例如,font(字体)属性是一次性同时设置font-style(字体样式)、font-variant(字体变体)、font-weight(字体磅数)、font-size(字体尺寸)、line-height(行高)和font-family(字型组)的简写属性。然而,并不是所有这些属性都必须在简写属性中同时用到。当简写格式中的某些值被省略时,每个“失踪”的属性实际上都被指定使用它的默认值,这些值都可以在W3C specifications的font property(字体属性)内容部分中找到。如果在一个样式表文件中大量使用了字体相关的样式控制属性,那么使用这个简写属性将能显著缩减样式表的体积。
background(背景)和list-style(列表样式)属性也有类似的作用。列表中剩下的几个简写属性涉及到一个CSS盒状容器的四条边框,和前几个属性情况有所不同。
盒状容器边框的简写属性
任何一个区块级元素(divs—区块、tables—表格、lists—列表、paragraphs—段落,等等)的四条边框都有各自的margins、borders和padding属性,可以各自单独设置它们的宽度。就拿borders来说,每条边框都可以独立分配border-style(边框式样)和border-color(边框颜色)。要是将所有这些属性统统拼写出来,乖乖,单这一条规则集就够冗长的了!使用简写规则可以极大地减少工作量。
时钟
假如盒状容器四条边框的某个边框属性都一样,那样的话只要使用基本的简写属性就可以了,比如这样写:
border-width: 5px;
padding: 5px;
可是,假如出现其中几条边框的值并不相同的情况,这时候,一种我们称之为“时钟”的CSS特性开始起作用了。让我们把一个盒状容器想象成一个钟面。当指针向上直指,它们所指的相当于盒状容器的顶边,也正是简写属性的第一个值。接下来是三点钟的位置,相当于盒状容器的右侧边。然后是六点钟位置,相当于盒状容器的底边,最后九点钟方位指代左侧边。
来看个例子。我们想在页面上放一个盒状容器,它的顶边距宽10px、右边距宽5px、底边距宽3px、没有左边距。那么用margin简写属性可以这么写:
在声明属性时,这些属性值之间必须用也只能用空格分隔。并且,除非属性值为零,否则每个值都必须标注单位。
注意一下边距为零时值被定义成0,因为无论什么值只要是零,单位就无关紧要。任何一种单位(px, em, %, 等)的零值等于任何其他单位的零值。
改型时钟
当某几条边框相同时,边框的简写属性可以更大程度地浓缩。如前文所述,当所有边框都一致时,所有边框使用同一值,可是,假如顶边和底边一致,而右侧边和左侧边一致,这样的情况下,边距的代码可以写成如下这样:
这样写将顶边和底边的边距设置成10px,两侧的侧边距为5px。还有一招,就是当顶边和底边不同而侧边一致的情况。顶边距10px、左侧和右侧边距5px、底边距20px,我们就这么写:
这全都取决于简写属性用到的值得数目以及次序。记住,一个值=所有的边框;两个值=顶/底边框,两侧边框;三个值=顶边框,两侧边框,底边框;四个值=遵循钟面原则。好了,不太难记吧?
边框差异
border shorthand properties(边框简写属性)和padding(内边距)同样也可以使用这种“时钟”简写方法。border-width,border-color,border-style和padding和margin(边距)的操控方式相同。不过,border属性还是有一点差异的。border属性可以同时设置盒状容器的四条边框的border-width、border-style和border-color。
当四条边框全都一样时很好处理,但是如果他们不一样呢?难道我们还要回到从前诸如border-top、border-right的日子么?好吧,也许可以。幸运的是,我们另高招。
譬如说盒状容器各边框的式样和颜色都相同,唯独宽度各不相同。最直接有效的写法是照常使用基本的border简写属性定义border-width、border-style和border-color,然后单独使用border-width属性定义不同的边框宽度来覆盖前面的设置,象下面这样:
border-width: 10px 5px 3px 0;
如果四条边框的所有边框属性都各不相同,那么这个办法就派不上大用场了,不过这种情形毕竟不常发生。如果仅是border-style或者border-color属性各有变化,那么用这个办法稍作修改就能像处理border-width那样来处理这些属性了。
接下来我们一起来看另一种情况,看看高效的CSS编写方式有什么不同。
多重声明
譬如说我们有六个绝对定位的区块(Dreamweaver中的层),它们全都一样,所不同的是它们彼此隔开一定距离横排在页面顶部。由于它们的页面定位不同,必须给它们取单独的类名或ID,除此之外它们其余的属性统统一样。
用排版编辑器的话或许会为每个ID单独编写样式规则,包括所有的字体规则、文本规则、定位声明等等。像这样不停地重复那些完全一样的规则看上去实在不是什么明智之举,不是么?没错。下面就是如何最大限度地精简这些规则的方法:
#second {left: 100px;}
#third {left: 200px;}
#fourth {left: 300px;}
#fifth {left: 400px;}
#sixth {left: 500px;}
#first, #second, #third, #fourth, #fifth, #sixth {
position: absolute;
top: 0;
width: 75px;
font-size: .9em;
font-weight: bold;
text-align: center;
line-height: 1.4em;
background-color: silver;
color: navy;
padding: 5px;
border: 1px solid navy;
}
通过逐个列出这些相同区块的ID,并用逗号紧跟一个空格来分隔这些ID,后面大段的样式规则将同时应用于所有这六个区块。显而易见,如果每个ID都重复定义这些属性,整个CSS就会臃肿不堪。这可能是唯一最有效减小样式表体积的办法了。
使用默认值
多数CSS属性都有初始默认值,而当你为元素的这些属性重新定义了值的时候,它们的默认值也就被覆盖了。例如内边距的各个属性,padding-top、padding-right、padding-bottom和padding-left,它们的初始值都是0。如果不希望目标元素有内边距,那么内边距属性就可以省略不写。
例如: Opera浏览器预设body元素的内边距为8px。h1-h6标题和段落元素通常默认的边距都不为零。不同的浏览器,为lists(列表)和list-items(列表项)预设的内外边距非零默认值也不尽相同。
属性继承
避免编写冗余代码的另外一个办法就是注意子元素从父元素那里继承下来的属性。可以继承的属性着实不多,可其中很多还是不常用到的属性,像voice-family。常用的可继承属性的列出来也没几个(按字母顺序):
font (and related properties) — 字体及相关属性
letter-spacing — 字距
line-height — 行高
list-style (and related properties) — 列表样式及相关属性
text-align — 文本对齐
text-indent — 文本缩进
text-transform — 文本转换
white-space — 空白
word-spacing — 词距
在某些旧版浏览器中继承特性存在很多问题,而现在的新版浏览器一般来说都能正确实现继承。只要了解了哪些属性可以继承,你就又能少写不少多余代码了。重申一下,要查阅完整的属性列表请查看CSS 2 Property Index(CSS 2 属性索引)。
空白的处理
这里说的空白不是CSS里那个有特定值的white-space属性,这里说的是样式表文件里面本来就存在的空白间隔。这些个间隔来自于那些用于产生新行的换行符,以及那些在单独一行里有助提高可读性的空格。尽管移除这些间隔可以省出几个字节的体积,但是通常也省不了多少。
假如这些空隔被移除了,样式表会变得晦涩难读,更别提以后做修改了。如果工程明确要求删除每一个多余的字节,那你最好新建一个方便阅读的“主”样式表文件,然后复制一份,再把其中所有的空白移除,这份样式表就是使用中的“现场版”样式表。要是今后要修改的话,在那份易读的主样式表里修改,再像上面那样复制一份并移除空白,继续作为“现场版”。
总结
至此你已经学习了如何使你的样式表更简洁经济高效的几种方法。经常使用这些技巧的好处不仅仅是节省样式表体积、加快下载,更令样式表常葆清爽整洁,通常易读易懂的代码也易于后期必要的修改维护。即便你是用排版编辑器来创建你的样式表,你一样可以用本文中所提及的这些方法来将你的“成品”编写得更合理更高效!
Holly 'n John e-mail
©positioniseverything
Last updated: July 3, 2004
Created November, 2003
Translated by POPOEVER on October 10, 2004
—————————— 全文完 ——————————
译者注: 本文在翻译过程中有几点引起我的注意,主要是一些专属名词如何翻译最为恰当,我原本也有看过不少国内的Web Standards相关的翻译作品以及中文本土作品,其间对于一些名词一直纠缠不清,各说一词,我也就暂且不去管他们了,汉语博大精深,想要统一一个单词往往不是件容易事,更何况本来就是“舶来”的术语。比如padding,有翻成“填充”的,有翻成“补白”的,还有翻成“补丁”,对于后二者我倒觉得可以接受,至少谐音可以方便洋文差的朋友记忆,不过我还是坚持把它翻成“内边距”,因为这样从表意上说最形象,padding本来就是边框到内部文本的距离么,不叫“内边距”叫什么。至于margin究竟是译作“空白”还是“留空”或是“间隙”、“间隔”、“边距”,哪个更好,我母亲从前是做高级编辑的,她跟我说应该叫“白边”,既然我已经把padding翻成“内边距”,那么看来margin也只能凑成一对地翻作“边距”喽。还有一个是box,见得最多的是翻成“盒模型”或“盒对象”,我也懒得去罗嗦什么了。无论如何,只是一己之见,也就故妄译之,但愿没有混淆视听~~~
--POPOEVER原创翻译,翻译著作权所有,谢绝转载,原文版权归属原作者所有
http://www.loveyuki.com/trackback.asp?tbID=722
http://www.loveyuki.com/trackback.asp?tbID=722&CP=GBK
[转载]样式表编写效率手册 [ 日期:2004-10-15 ] [ 来自:Plod ]相关推荐
- [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器...
一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...
- 内联样式表 和 内部样式表
此处保存的是我学习前端的笔记和一些日常练习,放在这里方便查看.成长之路难免会有错误,这时候才形象生动的体现那句经典名言:"失败是成功之母!" 哈哈哈哈...... 话不多说. ...
- 怎样编写质量手册(转载)
怎样编写质量手册 http://www.quality-world.cn/guanli/475.html 什么是质量手册? 对于贯彻实施2000版ISO9001标准的组织,标准要求编制和保持质量手册. ...
- 《Excel效率手册:早做完,不加班》
<Excel效率手册:早做完,不加班> 基本信息 作者: 陈锡卢 杨明辉 出版社:清华大学出版社 ISBN:9787302350743 上架时间:2014-5-8 出版日期:2014 ...
- Mysql5.1大表分区效率测试
mysql5.1开始支持数据表分区了,原来的分表可以不用了,分表的不足在于多表查询不方便.呵呵,下面来简单测试下表分区的查询效率. 1.用来测试的数据为discuz论坛的数据库,表为cdb_posts ...
- Excel效率手册:早做完,不加班(套装共3册)
好书推荐.视频分享,公众号"读书ReadBook"与您一起进步 下载地址...... 1.网站地址或点击阅读原文 https://51dr.cn/book/detail/27236 ...
- WEB入门三 CSS样式表基础
学习内容 Ø CSS的基本语法 Ø CSS选择器 Ø 常见的CSS样式 Ø 网页中3种使用CSS的方式 能力目标 Ø 理解CSS的 ...
- 目前最新《脑动力 html+css标签速查效率手册[刘丽霞] 》
介绍: HTML是所有网页制作技术的核心和基础,也是每个网页制作者必须掌握的基本知识.CSS是用于控制网页内容显示效果的一种标记语言,可以制作更美观的页面.两者在网页设计中不可或缺. <脑动力: ...
- 样式表贴图定位(CSS Sprites):图像切片的死亡之吻
<CSS Sprites: Image Slicing's Kiss of Death>是一篇旧文,于2004年3月5日发表于alistapart的第173期,作者是大名鼎鼎的CSS禅意花 ...
最新文章
- python语言入门r_小结:jieba分词的Python与R语言基础用法介绍
- Observer Pattern 观察者模式
- IPC$概念及入侵方式研究
- dmx512协议c语言编程,DMX512协议+c程序代码.pdf
- VisualSVN Server安装过程
- 如何压测基于容器服务ACK托管的DUBBO服务
- UVA - 10253 Series-Parallel Networks(递推式、记忆化搜索写法)
- hibernate mysql cascade_Hibernate第五篇【inverse、cascade属性详解】
- Python list去重,去掉list中元素为字典的且字典部分key相同的list元素(列表去重、字典去重)
- No module named sqlite3解决
- 编译原理第三版 作业一
- qq邮件exchange服务器,解决Exchange邮件系统无法接收QQ邮件的问题
- 说说技术总监的三板斧(十年肺腑之言)
- 计算机应用开机禁止打开,怎样设置电脑开机启动项禁止
- 如何删除word中表格后面的空白页
- Hitters数据集数据分析
- 论文投稿指南——中文核心期刊推荐(电工技术)
- MySQL工程师干什么,MySQL DBA工程师岗位职责
- 复旦大学信息科学与工程考研经验
- 大三寒假实习了半个月很困惑
热门文章
- 【Python爬虫学习实践】多线程爬取Bing每日壁纸
- SparkGraphX快速入门
- 使用EXCEL绘制三维地图(超简单的五分钟绘制地图方法,妈妈再也不用担心我不会画地图啦~)
- 面试题整理 自问自答
- BIT2023 智慧社区综合管理系统-一周目
- Python——利用协程实现视频的拖影效果
- 大数据技术原理与应用(林子雨)-NoSQL数据库单元测验
- rundeck 警告邮件QQ邮箱设置
- codeforces869EThe Untended Antiquity(二维树状数组)
- python海龟教程_Python 零基础 快速入门 趣味教程 (咪博士 海龟绘图 turtle) 7. 条件循环...