2022年CSS 缩写技巧CSSHTML教程.docx

《2022年CSS 缩写技巧CSSHTML教程.docx》由会员分享，可在线阅读，更多相关《2022年CSS 缩写技巧CSSHTML教程.docx（6页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、2022年CSS 缩写技巧CSSHTML教程 Web网站可用性的关键指标是速度，更准确地说，是页面能以多快的速度出现在访问者的阅读器窗口里。影响速度的因素有许多种，包括Web的速度、访问者的Internet连接状况，以及阅读器必需下载的文件大小。尽管你无法限制服务器和连接的速度，但是你可以限制构成网站Web页面的文件大小。 为了让网站能够更快，Web的建设者都会按常规地压缩和优化网站上的每一个图像文件，这经常使得为了将文件的大小削减几个百分点而牺牲了图像的质量。由于CSS样式表是纯文本文件，和图像相比相对较小，所以Web建设者很少考虑实行措施削减其CSS样式表文件的大小。但是，通过运用CSS缩

2、写以及的一些简洁技巧，你可以在很大程度上削减样式表的大小。在我对自己样式表的一次非正式的特殊测试中，我把文件的大小降低了大约2550。 运用CSS的缩写性质 CSS的缩写性质（shorthand property）是一些专用的性质名，用来代替多个相关性质的集合。例如，间隙性质（padding property）是顶部间隙（padding-top）、右侧间隙（padding-right）、底部间隙（padding-bottom）和左侧间隙（padding-left）的缩写。 运用速写性质让你能够把多特性质属性对（property/attribute pair）压缩进CSS样式表的一行代码里。例如

3、，想一想下面的代码：.sample1 { margin-top: 15px; margin-right: 20px; margin-bottom: 12px; margin-left: 24px; padding-top: 5px; padding-right: 10px; padding-bottom: 4px; padding-left: 8px; border-top-width: thin; border-top-style: solid; border-top-color: #000000; }将它用一些缩写性质来替代就能够把代码削减为下面这样，两者的实际效果是完

4、全一样的：.sample1 { margin: 15px 20px 12px 24px; padding: 5px 10px 4px 8px; border-top: thin solid #000000; }要留意，缩写性质还有多个属性，每一个（属性）都对应一个被组合进入缩写性质的常规性质。属性由空白隔开。当属性是类似的值的时候，例如用于边框空白性质（margin property）的线性测量的时候，接在缩写性质之后的属性的依次很重要。属性的次序是从顶部（顶部的边框空白）起先，然后围绕格子（box）按顺时针次序接着。假如缩写性质的全部属性都是相同的，那么你可以简洁地列出单

5、个属性，然后在前面将它复制四遍。因此，下面的两特性质是相等的： margin: 5px 5px 5px 5px; margin: 5px; 类似的，你可以运用接在边框空白或者间隔性质之后的两个属性来代表顶部底部和右侧左侧属性对。 margin: 5px 10px 5px 10px; margin: 5px 10px; 属性的依次在它们是不相像的值的时候是不重要的。因此，边框颜色、边框风格和边框宽度等属性可以以任何依次接在大纲性质（outline property）之后。忽视某个属性等同于从样式规则里忽视掉对应的常规性质。下面是CSS缩写性质的列表以及它们所表示的常规性质。Background（

6、背景）：背景附件、背景颜色、背景图像、背景位置、背景重复Border（边框）：边框颜色、边框风格、边框宽度border-bottom（底部边框）：底部边框颜色、底部边框样式、底部边框宽度border-left（左侧边框）：左侧边框颜色、左侧边框样式、左侧边框宽度border-right（右侧边框）：右侧边框颜色、右侧边框样式、右侧边框宽度border-top（顶部边框）：顶部边框颜色、顶部边框样式、顶部边框宽度cue（声音提示）：前提示、后提示font（字体）：字体、字号、字体样式、字体粗细、字体变体、线高度、字体大小调整、字体拉伸list-style（列表样式）：列表样式图像、列表样式位置、

7、列表样式类型margin（空白）：顶部空白、右侧空白、底部空白、左侧空白outline（大纲）：大纲颜色、大纲样式、大纲宽度padding（间隙）：顶部间隙、右侧间隙、底部间隙、左侧间隙pause（暂停）：后暂停、前暂停削减空白削减CSS样式表大小的另一种方法是从文档里删掉大多数无用的空白。换句话说，将每条规则打破放进一行代码里，即把原来插入到代码里用来把每特性质属性分割到不同行的换行符和缩进符删掉。例如，下面的代码示例在内容上相同，但是其次个要精炼得多：h1 { font-size: x-large; font-weight: bold; color: #FF0000; }h1 {font-size: x-large; font-weight: bold; color: #FF0000}删掉注释将注释从你的CSS代码里删掉是削减文件大小的另一种方式。尽管注释对于代码的阅读很有用，但是它无助于阅读器生成你的Web页面。许多Web建设者都习惯给每一行代码都加上注释，或者至少给每一条规则声明都加上。这样的慷慨注释在CSS样式表里是极少须要的，因为大多数CSS性质和属性都很简单阅读和理解。假如你对类、ID，以及其他的选择器都运用有意义的名称，你就可以省掉大多数的注释，同时仍旧能够保持代码的可读性和可维护性。 本新闻共2页,当前在第1页12