forked from sofish/typo.css
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathreset.css
More file actions
141 lines (108 loc) · 6.29 KB
/
reset.css
File metadata and controls
141 lines (108 loc) · 6.29 KB
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
@charset "utf-8";
/* ------------------------------------------------------------
Css Reset v0.9
Created: 2011-04-25
Last Updated: 2011-05-13
Author: cloudYan
Contact: qqGroup:187260298
------------------------------------------------------------ */
/* =更新日志
* 2012-10-11 新计划noreset,精良保持浏览器默认的属性或统一默认属性值而非直接去掉默认的属性(如:ul,ol等)
* 2012-05-11 html5新增语义化的标签(除figure外)不必重置样式,默认就没有样式-陈林
* 2012-04-04 新项目参考了alipay,yahoo,html5Doctor等结合模块化开发进行研究,html5的Doctype声明,不必写type="text/css" 但是必须要有 rel="stylesheet"
* 2011-09-24 解决了IE下超链接使用绝对定位后失效的问题(使用background:url(about:blank)解决是最佳方案)
* 2011-09-19 原项目代号Ocode取义Original code,参考http://www.tcreator.info/labs/projects/2011/css-reset.html
* 研究规划
* 第一步通用reset.css
* 第二步全站公共样式—common.css
包括全站统一样式定义;如:a,a:hover等
基础的模块组合样式;如:.f14,.mt10,.tc等
* 第三步css模块—c_common.css
包括模块公共样式提取
公共模块样式
模块个性化样式(类似新模块,但多处使用的)
* 第四步网站架构css差异化如何书写及管理css
单页面/项目css(个性化css)规划
------------------------------------------------------------ */
/* 升级原则——渐进增强(Progressive Enhancement)
渐进增强(Progressive Enhancement)是为了确保没有页面特效后基本功能也是可用的。简单来讲,渐进增强是指在确保页面在禁用JavaScript后能正常运作后,再对页面添加各种特效(JavaScript动画、Ajax异步等等)。我们同样可以运用"渐进增强"原则来使用CSS3(或者一些CSS2)、HTML5以及其他IE6所不支持的web规范。
某些情况下,是无法让所有用户在任何浏览器下都完全一模一样,特别是那些使用IE6的用户。运用渐进增强策略,可以保证让那些用户至少能使用到你网站(或网络应用)的基本功能。
------------------------------------------------------------ */
/* RESET */
/* 内外边距通常让各个浏览器样式的表现位置不同 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,figure,menu{margin:0;padding:0;}
ol,ul{list-style-type:none}
/* 新计划中涉及的属性
/* 语义化的标签的样式默认的margin,padding都为0,不用reset */
article,aside,details,figcaption,footer,header,hgroup,menu,nav,section{}
/* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */
article,aside,details,embed,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block;}
/* HTML5 媒体文件跟 img 保持一致 */
audio,canvas,video{display:inline-block;*display:inline;*zoom:1;}
command,datalist,keygen,mark,meter,progress,rp,rt,ruby,time,wbr{display:inline;}
/* 去掉各Table cell 的边距并让其边重合 */
table{border-collapse:collapse;border-spacing:0;}
/* IE bug fixed: th 不继承 text-align*/
th{text-align:inherit;}
/* 去除默认边框 */
fieldset,img{border:0;}
/* ie6 7 8(q) bug 显示为行内表现 */
iframe{display:block;}
/* webkit内核浏览器会默认给:focus状态的元素加上outline的样式 没必要去除浏览器默认的outline属性 */
:focus {outline:0;}
/* 去掉 firefox 下此元素的边框 */
abbr,acronym{border:0;font-variant:normal;}
/* 一致的 del 样式 */
del{text-decoration:line-through;}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500;}
/* 对齐是排版最重要的因素, 别让什么都居中 */
caption,th {text-align:left;}
/* 来自yahoo, 让标题都自定义, 适应多个系统应用 */
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:500;}
button,input,select,textarea{font-size:100%;}
q:before,q:after {content:'';}
/* 统一上标和下标 */
sub,sup {font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
/* 默认不显示下划线,保持页面简洁 */
ins,a {text-decoration:none;}
/* 让链接在 hover 状态下显示下划线 */
a:hover {text-decoration:underline;}
/* 修复火狐下图片和文字之间的间隙,添加img{vertical-align:top;}、img{vertical-align:middle;}或img{display:block}属性即可解决,推荐前者 */
img{vertical-align:middle}
/* 清除浮动 */
.clearfix:after,.wrap:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}
.clearfix,.wrap{*zoom:1}/* for IE6 IE7 */
/* 空标签清除法 */
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;}
.wrap,.bc{margin-left:auto; margin-right:auto}
.wrap{ width:980px;}
/* 这条分割线以上的属性会提取到css reset.css中
==================================================================================================== */
/* 全站级公用样式 */
/* 要注意表单元素并不继承父级 font 的问题 根据自身需求设置 这里可以注意下建议在使用表单元素的时候再定义 */
body,button,input,select,textarea{font:12px/1.5 Tahoma,Arial,\5b8b\4f53;}
blockquote,pre{white-space:pre-wrap;word-wrap:break-word;}
/* 使Chrome支持12px以下的字体 */
.text-size{-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;}
/* 两端对齐 */
.text-justify{text-align:justify;text-justify:inter-ideograph;}
/* 半透明 */
.opacity {opacity:.5;filter:alpha(opacity=50);}
/* 文本过长变成省略号,需要定义宽度 */
.text-ell{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
/* css3属性 */
.css3_shadow{transition:all 1s ease-out 0s;border-radius:5px;box-shadow:0 0px 4px rgba(206, 201, 170, 0.8);}
.css3_shadow:hover{box-shadow:0 0px 5px rgba(206, 201, 170, 1);}
/* 定义全站级统一样式
a{color:#06c}a:hover{color:#c06;}.view_more{color:#06c;padding:0 2px;}
.yahei{font-family: "Microsoft YaHei","\5FAE\8F6F\96C5\9ED1"}
*/
/*
<!--以下修复IE6使之支持png透明(必须放到html页面中),可自定义设置标签或class -->
<!--[if ie 6]>
<script src="/assets/js/DD_belatedPNG-min.js"></script>
<script>DD_belatedPNG.fix('.ie6png');</script>
<![endif]-->
*/