CSS默认样式表

发表于 | 分类于

网页设计，让人最头疼的莫过于让页面兼容各大浏览器，准确些是兼容它们“默认”的CSS样式表。

第一部分

第一种方式
1
* {margin:0px; padding:0px;}

这行代码虽然简单，但却让网页解析太慢。
于是出现了几种CSS重置方法：

第二种方式
1
2
3
4
5
6
7
8
9
10
11
12
body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,
li, dl, dt, dd, form, a, fieldset, input, th, td
{margin: 0; padding: 0; border: 0; outline: none;}
body{line-height: 1;font-size: 88% /* Decide for yourself if you want to include this. */;}
h1, h2, h3, h4, h5, h6{font-size: 100%;padding: .6em 0;margin: 0 15px;}
ul, ol{list-style: none;}
a{color: black;text-decoration: none;}
a:hover
{text-decoration: underline;}
.floatLeft{float: left;padding: .5em .5em .5em 0;}
.floatRight{float: right;padding: .5em 0 .5em .5em;}
`

NETTUTS上的 Jeffrey Way写了篇文章Weekend Quick Tip: Create Your Own Simple Reset.css File
释出自己用来重置CSS样式表的方法,这个方法适用于大多数的网页设计。

第三种方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}

/* remember to define focus styles! */
:focus {outline: 0;}

/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del { text-decoration: line-through;}

/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse;border-spacing: 0;}

这个重置的太多

第四种方式
1
2
3
4
5
6
7
8
9
10
11
12
13
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
        margin:0;
        padding:0;
}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img { border:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;
font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym { border:0;}

第二部分

CSS通用样式
1
2
3
4
5
6
7
8
9
10
11
body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,p,input,select,textarea,form{margin: 0; padding: 0;}
body{font:14px/1.5 "宋体";}
img{border:none;}
ul,ol{list-style:none;}
input,select,textarea{outline:none;border:none;background:none;}
textarea{resize:none;}
a{text-decoration:none;}

/*清浮动*/
.clearfix:after{content:"";*display:block;*clear:both;}
.clearfix{zoom:1;}
选择
1
2
::selection {background-color:#669900; color:#ffffff; text-shadow:none;}
::-moz-selection {background-color:#669900; color:#ffffff;text-shadow:none;}
去掉a的下划线
1
2
a {blr:expression(this.onFocus=this.blur())} /*if IE*/
a {outline:none;}/*if 火狐等现代浏览器浏览器*/
省略号
1
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
英文自动换行
1
word-break: break-all;
强制不换行
1
2
3
4
5
white-space:nowrap;


contenteditable="true"
`
clearfix完整版
1
2
3
4
5
.clearfix:before,.clearfix:after { content:""; display:table;}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}
--------------------
expression(this.onFocus=this.blur())