站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
建站程序
开发
服务器
办公软件
开发教程
服务器教程
软件使用教程
运营教程
热门电子书
WordPress教程
宝塔面板教程
CSS教程
Shopify教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
WordPress:CSS Shorthand
”
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
跳转至:
导航
、
搜索
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
These are techniques for [[WordPress:WordPress_Housekeeping#Site Optimization|condensing, combining, and shortening]] your CSS code. Used wisely, they can make your stylesheets smaller (so they will load a little faster) and easier to read. 这些方法是用于[[WordPress:WordPress_Housekeeping#Site Optimization|压缩, 结合, 缩写]]你的CSS代码。使用得当,CSS代码会使得你的样式表更小(这样样式表载入会更快),阅读也更容易。 == Grouping selectors == == Grouping 选择符 == For example: 例如: <pre>h1 {margin:0; font-weight:bold; font-size:130%; color:blue; padding-left:5px; padding-top:10px} h2 {margin:0; font-weight:bold; font-size:120%; color:navy; padding-left:5px} h4 {margin:0; font-weight:bold; font-size:105%; font-style:italic; color:blue; padding-top:1.5em}</pre> <pre>h1 {margin:0; font-weight:bold; font-size:130%; color:blue; padding-left:5px; padding-top:10px} h2 {margin:0; font-weight:bold; font-size:120%; color:navy; padding-left:5px} h4 {margin:0; font-weight:bold; font-size:105%; font-style:italic; color:blue; padding-top:1.5em}</pre> The mouth-full of code above can be condensed into something a little more manageable. As shown below, CSS permits grouping selectors and giving them a shared declaration. See how the selectors can be grouped on one line with commas as separators? 上述的完整代码可以压缩为更容易管理的代码。如下显示,CSS能将选择符聚合在一起,并且使得这些选择符共享一个声明。看看选择符可以怎样组合在一组中,用逗号分开? <pre>h1, h2, h4 {font-weight:bold} h1, h4 {color:blue} h1, h2 {padding-left:5px} h1, h2, h4 {margin:0} h1 {font-size:130%;padding-top:10px} h4 {padding-top:1.5em;font-size:105%;font-style:italic} h2 {font-size:120%;color:navy}</pre> <pre>h1, h2, h4 {font-weight:bold} h1, h4 {color:blue} h1, h2 {padding-left:5px} h1, h2, h4 {margin:0} h1 {font-size:130%;padding-top:10px} h4 {padding-top:1.5em;font-size:105%;font-style:italic} h2 {font-size:120%;color:navy}</pre> == Shorthand properties == == Shorthand 属性 == CSS shorthand properties set several related properties with one declaration. The most common are <tt>background, border, font, padding</tt>, and <tt>margin</tt>. CSS shorthand 属性使用一个声明设置几个相关的属性。最常见的是<tt>background, border, font, padding</tt>, and <tt>margin</tt>。 Lengths for margins, padding, and borders are sequenced in '''clock-wise positions''': ''top'', ''right'', ''bottom'', ''left'', e.g. : Margins,padding,和borders的长度列在'''clock-wise positions''': ''顶上方'', ''右边'', ''底部'', ''左边'', 等等 : <pre>.box {margin-top: 10px; margin-right: 20px; margin-bottom: 10px; margin-left: 20px; }</pre> <pre>.box {margin-top: 10px; margin-right: 20px; margin-bottom: 10px; margin-left: 20px; }</pre> Consolidate all of that into [[WordPress:Glossary#CSS|CSS]] shorthand and it abbreviates to: 将所有变为[[WordPress:Glossary#CSS|CSS]] shorthand,缩略为: .box {margin: 10px 20px 10px 20px; } .box {margin: 10px 20px 10px 20px; } There are other modifications you can use when the margin values are repeated. In the example above, the top and bottom margins of 10px, and the left and right margins of 20px, would condense to: Margin 参数值重复的时候,你也可以做其它的更改。在上述的例子中,顶上方和底部10px的页面空白,以及左右20px的页面空白,会压缩为: .box {margin: 10px 20px} .box {margin: 10px 20px} You can also streamline your border codes. Here is a border [[WordPress:Glossary#CSS|CSS]] code for a box: 你也可以streamline边框代码。下面有个框的[[WordPress:Glossary#CSS|CSS]]边框代码。 <pre>.box {border-top: 1px; border-right: 1px; border-bottom: 1px; border-left: 1px; border-color: blue; border-style: solid}</pre> <pre>.box {border-top: 1px; border-right: 1px; border-bottom: 1px; border-left: 1px; border-color: blue; border-style: solid}</pre> This can all be consolidated down to the [[WordPress:Glossary#CSS|CSS]] shorthand of: 这个代码可以缩略为[[WordPress:Glossary#CSS|CSS]] shorthand: .box {border: 1px blue solid} .box {border: 1px blue solid} Not all CSS codes can be grouped and condensed, but this article has described the most common ones. 并不是所有的CSS代码都可以组合并且缩略,但是这篇文章介绍了最常见的CSS缩略代码。 ===CSS Shorthand Resources=== ===CSS Shorthand 资源=== * [http://www.w3.org/TR/REC-CSS2/selector.html W3's CSS-2 Selector Specifications] * [http://www.w3.org/TR/REC-CSS2/about.html#shorthand W3.or's CSS-2 Shorthand Properties] * [http://skaiste.elekta.lt/Books/O'Reilly/Bookshelfs/books/webdesign/css/ch02_02.htm O'Reilly's Definitive CSS Guide: Grouping] * [http://www.websiteoptimization.com/speed/tweak/grouping/ WebSiteOptimization's CSS: Group Selectors and Declarations] * [http://www.websiteoptimization.com/speed/tweak/shorthand/ WebSiteOptimization's CSS: Use Shorthand Properties] * [http://www.communitymx.com/content/article.cfm?cid=A43B828960590F55&print=true Writing Efficient CSS] * [http://home.no.net/junjun/html/shorthand.html Introduction to CSS Shorthand Properties] * [http://www.sorehead.org/css/shorthand.html Sorehead's CSS shorthands] * [http://hotwired.lycos.com/webmonkey/03/36/index0a.html Streamlining with Web Standards] * [http://home.no.net/junjun/html/shorthand.html Introduction to CSS shorthand properties] * [http://www.sitepoint.com/article/966 Sitepoint's Introduction to CSS Shorthand] * [http://www.w3.org/TR/REC-CSS2/selector.html W3's CSS-2 选择符规定] * [http://www.w3.org/TR/REC-CSS2/about.html#shorthand W3.or's CSS-2 Shorthand属性] * [http://skaiste.elekta.lt/Books/O'Reilly/Bookshelfs/books/webdesign/css/ch02_02.htm O'Reilly's Definitive CSS 指南: Grouping] * [http://www.websiteoptimization.com/speed/tweak/grouping/ WebSiteOptimization's CSS: Group Selectors and Declarations] * [http://www.websiteoptimization.com/speed/tweak/shorthand/ WebSiteOptimization's CSS: 使用Shorthand 属性] * [http://www.communitymx.com/content/article.cfm?cid=A43B828960590F55&print=true 编写有效的 CSS] * [http://home.no.net/junjun/html/shorthand.html CSS Shorthand 属性介绍] * [http://www.sorehead.org/css/shorthand.html Sorehead的 CSS shorthands] * [http://hotwired.lycos.com/webmonkey/03/36/index0a.html Streamlining with Web Standards] * [http://home.no.net/junjun/html/shorthand.html CSS shorthand 属性介绍] * [http://www.sitepoint.com/article/966 Sitepoint的CSS Shorthand介绍]
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)