Mozilla推荐的CSS书写顺序
//显示属性
display
list-style
position
float
clear
//自身属性
width
height
margin
padding
border
background
//文本属性
color
font
text-decoration
text-align
vertical-align
white-space
other text
content
源文件在这里:Mozilla suggested css order
内容如下:
/* mozilla.org Base Styles
* maintained by fantasai
* (classes defined in the Markup Guide - http://mozilla.org/contribute/writing/markup )
*/
/* Suggested order:
* display
* list-style
* position
* float
* clear
* width
* height
* margin
* padding
* border
* background
* color
* font
* text-decoration
* text-align
* vertical-align
* white-space
* other text
* content
*
*/ /* TOC:
Random HTML Styles
Forms
General Structure
Navigation
Quotations
Comments and Other Asides
Emphasis
Computers - General
Code
Examples and Figures
Q and A (FAQ)
Tables
Headers
Meta
Specific to Products Pages
*/
/* Random HTML Styles */ dt {
font-weight: bold;
} dd {
margin: 0 0 1em 1em;
} li {
margin-top: 0.2em;
margin-bottom: 0.2em;
} sup {
font-size: 70%;
} form {
margin:;
display: inline;
} label {
font-weight: bold;
} /* General Structure */ .subtitle {
font-style: italic;
} div.para {
margin: 1em 0;
} div.para > ul,
div.para > ol,
div.para > blockquote {
margin-top: 0.2em;
margin-bottom: 0.2em;
} div.section {
display: block;
padding-left: 3%;
} div.section > h2,
div.section > h3,
div.section > h4,
div.section > h5,
div.section > h6 {
margin-left: -1.3%;
} .block {
display: block;
margin: 0.1em 1em;
} .imgright {
float: right;
margin: 0 0 2em 2em;
} .first {
margin-top:; /* For IE not understanding :first-child */
} /* Navigation */ :link img,
:visited img {
border:;
}
.deepLevel #mainContent :link img,
.deepLevel #mainContent :visited img {
border: medium solid;
}
.deepLevel #mainContent #buttons :link img,
.deepLevel #mainContent #buttons :visited img {
border:;
} .ex-ref {
font-style: italic;
} dl.toc dt {
margin-top: 1em;
font-size: 110%;
}
dl.toc p {
margin:;
text-indent: 1em;
}
dl.toc p:first-child {
text-indent:;
}
dl.toc > dd {
margin-left: 1em;
} ol.toc ol {
list-style-type: circle;
}
ol.toc > li > ol {
font-size: 90%;
} ul.snav {/* section navigation or short navigation, whichever you prefer */
margin: 0.7em 10%;
padding: .2em;
text-align: center;
list-style-type: none;
}
ul.snav > li {
margin:;
padding:;
}
ul.snav > li {
display: inline;
}
ul.snav > li:before {
content: " | ";
}
ul.snav > li:first-child:before {
content: "";
} @media screen, print, handheld, projection {
p.crumbs em {
display: none;
}
} #mainContent > p.crumbs:first-child,
#side > p.crumbs:first-child {
margin-top:;
} a.cont {
display: block;
margin-right:;
text-align: right;
} /* Quotations */ blockquote > address {
padding-left: 1em;
text-indent: -1em;
}
blockquote > address:before {
content: "\2015";
} div.quote,
div.epigraph {
margin: 1em;
}
div.quote q,
div.epigraph q {
display: block;
margin: 0 .5em;
text-indent: -0.5em;
}
div.quote cite,
div.epigraph cite {
display: block;
padding: 0 1em;
text-align: right;
text-indent: -1em;
}
div.quote cite:before,
div.epigraph cite:before {
content: "\2015";
} blockquote.epigraph,
div.epigraph q {
font-style: italic;
text-align: right;
}
blockquote.epigraph em,
div.epigraph q em {
font-style: normal;
}
blockquote.epigraph address,
div.epigraph cite {
font-style: normal;
} /* Comments and other Asides */ .note {
font-style: italic;
}
.note:before {
content: "Note: ";
} .remark {
font-size: smaller;
}
.remark:before {
content: "[";
}
.remark:after {
content: "]";
} .sidenote {
clear: both;
margin: 0.75em 0.5em;
padding: 0.2em;
border: 1px solid; /* Block NS4 from floating */ /*/*/
float: right;
width: 30%;
min-width: 15em;
/* */
}
/* Reduce main header sizes */
.sidenote h1 {font-size: 1.40em;}
.sidenote h2 {font-size: 1.25em;}
.sidenote h3 {font-size: 1.10em;} .key-point > h1:first-child,
.key-point > h2:first-child,
.key-point > h3:first-child,
.key-point > h4:first-child,
.key-point > h5:first-child,
.key-point > h6:first-child {
margin-top:;
} /* Emphasis */ /* em, strong */ strong.stronger {
font-style: italic;
font-weight: bold;
} strong.very-strong {
font-weight: bold;
text-transform: uppercase;
} *.important,
div.important,
p.important {
margin: 1em;
padding: 0.1em;
border: solid #F00;
font-size: larger;
} span.important {
margin:;
padding:;
border:;
font-size: smaller;
color: #c00;
} /* Computers - General */ pre.screen {
overflow: auto;
margin: 1em 0.5em;
padding: 0.2em;
border: solid 1px;
font-family: monospace;
white-space: pre;
} div.screen {
margin: 1em .5em;
padding: 0.2em;
border: solid 1px;
} span.application {
font-style: italic;
} kbd.long {
display: block;
margin: 0.1em 1em;
} kbd.command,
code.command {
white-space: pre;
} code.filename {
font-style: italic;
white-space: nowrap;
} /* Code */ code, pre {
/* override IE6 default */
font-size: 1em;
} code {
white-space: nowrap;
}
code.long {
display: block;
margin: 0.1em 1em;
white-space: normal;
} pre.code {
overflow: auto;
margin: 1em .5em;
padding: .2em;
border: solid 1px;
} pre.code .remark {
font-size: 1em;
font-style: italic;
} /* turn off content generation */
pre.code .remark:before,
pre.code .remark:after,
pre.code .note:before {
content: "";
} /* Examples and Figures */ .example {
margin: 1em 3%;
padding: .25em;
border: solid;
}
.example:before {
display: block;
font-weight: bold;
content: "Example";
}
.example[title]:before {
content: "Example: " attr(title);
} pre.bad,
div.bad {
border: dashed red 3px;
}
.bad.example:before {
content: "Incorrect Example";
}
.bad.example[title]:before {
content: "Incorrect Example: " attr(title);
} pre.good,
div.good {
border: double lime 3px;
}
.good.example:before {
content: "Correct Example";
}
.good.example[title]:before {
content: "Correct Example: " attr(title);
} .figure,
.screenshot {
display: block;
margin: .75em auto;
}
object.figure object,
object.screenshot object,
object.figure img,
object.screenshot object {
display: block;
margin: 0 auto;
}
.screenshot[title]:after,
.figure[title]:after {
display: block;
margin: 0 8% .05em;
font-style: italic;
font-size: small;
text-align: right;
content: attr(title);
} .co,
.callout {
text-decoration: underline;
} /* Q and A (FAQ) */ .qandaset .question {
font-size: large;
font-weight: bold;
} .qandaset .answer {
margin-top: 1em;
} /* Tables */ table.data {
border-collapse: collapse;
margin: 0.5em auto;
border: 1px solid;
} table.data caption {
margin: 1em auto 0.2em;
font-size: small;
font-style: italic;
text-align: center;
} table.data th,
table.data td {
padding: 0.2em;
border: 1px solid;
vertical-align: baseline;
} table.data tbody th:first-child {
text-align: right;
} table.data thead th {
vertical-align: middle;
} /* Meta */ address {
text-align: right;
}
.author {
margin-bottom: 1em;
text-align: left;
} /* Headers */ #mainContent > h1:first-child,
#mainContent > h2:first-child,
#mainContent > h3:first-child,
#mainContent > h4:first-child,
#mainContent > h5:first-child,
#mainContent > h6:first-child,
#side > h1:first-child,
#side > h2:first-child,
#side > h3:first-child,
#side > h4:first-child,
#side > h5:first-child,
#side > h6:first-child {
margin-top:;
} /* Specific to Products Pages */ .productlist {
margin:;
padding: 0 0 0 5px;
} .productlist li {
clear: left;
list-style: none;
padding: 0 0 1em 0;
margin-left:;
} .productlist h3 {
margin: 0 0 0.2em 0;
} .productlist img {
float: left;
margin: 0 0.5em 1em 0;
} /* Random Stuff That Needs To Be Cleaned Up / Deprecated */ .flLeft {
float: left;
margin: 5px 10px 5px 0;
}
.flRight {
float: right;
margin: 5px 0 5px 10px;
}
更多:http://www.shejidaren.com/css-written-specifications.html
Mozilla推荐的CSS书写顺序的更多相关文章
- 推荐的 CSS 书写顺序
//显示属性 display list-style position float clear //自身属性 width height margin padding border background ...
- Mozilla推荐的CSS属性书写顺序及命名规则
传说中的Mozilla推荐 /* mozilla.org Base Styles * maintained by fantasai */ /* Suggested order: * display * ...
- css书写顺序和常用命名推荐
写代码的时候有一个好的规范和顺序能够帮你节省很多时间.下文将推荐相关CSS书写顺序和规范的一些方法.这个文档将会整理进前端规范文档中,如果你有更好的意见,不妨留言告知我们. CSS书写顺序 该代码来自 ...
- CSS书写顺序
CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, margin, padding)3. ...
- 前端开发进阶:推荐的 CSS 书写规范
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...
- 面试准备 css 书写顺序及原理
书写顺序 (1)定位属性:position display float left top right bottom overflow clear z-index (2)自身属性: ...
- CSS书写顺序提高可读性
属性书写顺序 [建议] 同一 rule set 下的属性在书写时,应按功能进行分组,并以 Formatting Model(布局方式.位置) > Box Model(尺寸) > Typog ...
- CSS属性书写顺序及命名规则
/* mozilla.org Base Styles * maintained by fantasai */ /* Suggested order: * display * list-style * ...
- 推荐大家使用的CSS书写规范、顺序
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...
随机推荐
- Oracle RETURNING INTO 用法示例 .
The RETURNING INTO clause allows us to return column values for rows affected by DML statements. The ...
- 引用JS表单验证大全 以后方便查看用
1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长度限制 2.:js判断汉字.判断是否汉字 .只能输入汉字 3:js判断是否输入英文.只能输入英文 4:js只能 ...
- PHP 表单防止刷新提交的方法
当然,最直接的办法就是尽量不要使用自动提交的表单,然而,当我们需要网页主动post表单进行初始化时,就不得不面对这个问题了 -------------------------------------- ...
- Nginx学习之二-配置项解析及编程实现
在开发功能灵活的Nginx模块时,需要从配置文件中获取特定的信息.不过,我们并不需要再编写一套读取配置的系统,Nginx已经为用户提供了强大的配置项解析机制,同时还支持“-s reload”命令,可以 ...
- 一步一步学python(五) -条件 循环和其他语句
1.print 使用逗号输出 - 打印多个表达式也是可行的,但要用逗号隔开 >>> print 'chentongxin',23 SyntaxError: invalid synta ...
- CompressFilterAttribute 文件压缩特性
/// <summary> /// 文件压缩特性 /// </summary> public class CompressFilterAttribute : ActionFil ...
- OC基础10:基本的C语言特性1
"OC基础"这个分类的文章是我在自学Stephen G.Kochan的<Objective-C程序设计第6版>过程中的笔记. 1. 函数和方法的区别? (1).方法包 ...
- meta 标签整理
<!-- 声明文档 --> <meta charset='utf-8'> <!-- 指示IE以目前可用的最高模式显示内容 --> <meta http-equ ...
- android代码集锦
调用root权限的应用: /** * 执行Command命令的函数 * * @param command 命令 * @return 执行结果 */ public static boolean runR ...
- HTML——window.document对象练习题
1.选项卡效果 第一种方法:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...