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书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...
随机推荐
- FTP配置参数
格式 vsftpd.conf 的格式非常简单,每行要么是一个注释,要么是一个指令.注释行以#开始并被忽略掉.指令行格式如下: 配置项=参数值 很重要的一点是,这个格式里不存在任何空格. 默认的,每一个 ...
- Ice_cream's world I--hdu2120
Ice_cream's world I Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...
- How Many Tables(并查集)
How Many Tables Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)T ...
- TensorFlow 深度学习笔记 Stochastic Optimization
Stochastic Optimization 转载请注明作者:梦里风林 Github工程地址:https://github.com/ahangchen/GDLnotes 欢迎star,有问题可以到I ...
- 关于Asp.net超时,延长读取sql server数据库的超时时间!(已解决)
昨天,接到客户反映说应用报“超时时间已到.在操作完成之前超时时间已过或服务器未响应”问题.从网上了一些资料,发现这个问题还是很普遍的.主要有以下两种解决方法: 第一种方法:在web.config中加上 ...
- shell基础——字符串连接
#!/bin/sh str1="hello" str2="world" echo str1=$str1, str2=$str2 strconn1=$str1$s ...
- Thinking in C++: 第1章 为什么C++会成功(改进了C的缺点,可复用C的知识与库,执行效率相当)
本文内容摘抄自C++经典书籍:<Thinking in C++> 操作概念:OOP程序像什么 我们已经知道,用C 语言编写的过程程序就是一些数据定义和函数调用.要理解这种程序的含义,程 ...
- 关于GPS偏移的基础知识
转载地址 我们平时用到的地球坐标系统,叫做WGS84坐标,国家保密插件,也叫做加密插件或者加偏或者SM模组,其实就是对真实坐标系统进行人为的加偏处理,按照几行代码的算法,将真实的坐标加密成虚假的坐标, ...
- 2.x ESL第二章习题2.5
题目 描述 $y_i=x_i^T\beta+\epsilon_i$$\epsilon_i\sim N(0,\sigma^2)$ 已有训练集$\tau$,其中$X:n\times p,y:n\times ...
- Monthly Expense(二分) 分类: 二分查找 2015-06-06 00:31 10人阅读 评论(0) 收藏
Description Farmer John is an astounding accounting wizard and has realized he might run out of mone ...