css基础代码库整理

简介: css基础代码库整理



title: css基础代码库整理

tags:

  • css
  • 规范

categories: 规范


重置-reset.css

由于考虑到重置样式会存在潜在的问题,例如我们在全局将strong变成了一个普通标记,在用户可编辑内容区域的strong就不会反应出效果来,用户就会产生很大的疑惑,为什么在编辑器中加粗了字体儿实际上显示出来的效果却没反应呢?

所以,为了注重各个浏览器表现、w3c标准、用户体验以及减小开发难度,我们推荐使用下面这套重置方案:

@charset "utf-8";
html {font-size:62.5%}
body {font:12px/1.5 tahoma,arial,simsun,sans-serif; font-size:1.2rem; color:#282828}
body,p,blockquote,ul,ol,dl,dd,form,caption {margin:0;padding:0}
ul,ol,p {margin-bottom:1em}
li ul,li ol {margin:0}
ul,ol {padding-left:40px}
blockquote {margin:0 40px 1em}
table {border-collapse:collapse}
img {border:0; vertical-align:middle; -ms-interpolation-mode:bicubic}
iframe {border:0; vertical-align:top;}
pre {white-space:pre; word-wrap:break-word}
address,cite,dfn,em,var{font-style:normal}
code,kbd,pre,samp {font-family:'courier new',monospace}
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}
input,button,textarea,select,label {margin:0; font-size:100%; vertical-align:middle}
textarea {overflow:auto; vertical-align:top; resize:vertical}
a {text-decoration:none}
a:hover {text-decoration:underline}
h1 {font-size:2em;margin:0.67em 0}
h2 {font-size:1.5em;margin:0.83em 0}
h3 {font-size:1.17em;margin:1em 0}
h4 {font-size:1em;margin:1.33em 0}
h5,h6 {font-size:0.83em;margin:1.67em 0}

通用css -common.css

common.css是预定义的一些简洁的全局通用class, 按需摘取

/* Layout */
.cf {*zoom:1} 
.cf:after {display:block;content:'\20';height:0;clear:both}
.inline-block {display:inline-block; *display:inline; *zoom:1}
.hide {display:none !important}
.hiding {position:absolute !important; 
clip:rect(1px 1px 1px 1px); clip:rect(1px,1px,1px,1px);}
.invisible {visibility:hidden}
.fl {float:left;_display:inline}
.fr {float:right;_display:inline}
/* Alignment */
.tal {text-align:left}
.tar {text-align:right}
.tac {text-align:center}
.vat {vertical-align:top}
.vam {vertical-align:middle}
/* Font */
.fw4 {font-weight:400}
.fw7 {font-weight:700}
.fs12 {font-size:12px}
.fs14 {font-size:14px}
.fs18 {font-size:18px}
/* Color */
.red,.red a {color:#f00}
.green,.green a {color:#090}
.yellow,.yellow a {color:#f90}
.blue,.blue a {color:#06f}
.white,.white a {color:#fff}
.gray,.gray a {color:#999}
.black,.black a {color:#000}

表单- form.css

表单的一些基础样式, 按需摘取

fieldset {border:1px solid #c0c0c0; margin:0 2px; padding:0.35em 0.625em 0.75em}
legend {padding:0 2px; *margin-left:-7px}
input,button,textarea,select,label {margin:0; font:12px tahoma,arial,simsun,sans-serif; vertical-align:middle}
button::-moz-focus-inner,input::-moz-focus-inner {border:0; padding:0}
textarea {resize:vertical; overflow-y:auto; vertical-align:top}
select {height:22px; line-height:18px; padding:2px 0}

html5 -html5.css

基于html5的样式修复, 按需摘取

article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}
audio,canvas,video{display:inline-block; *display:inline; *zoom:1}
audio:not([controls]) {display:none;height:0}
[hidden] {display:none}
svg:not(:root){overflow:hidden}
figure{margin:0}
mark{background:#ff0;color:#000}

参考


相关文章
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
|
前端开发
实验:CSS+Div基础 - 预习报告
网页设计技术实验预习报告。
284 1
实验:CSS+Div基础 - 预习报告
|
Web App开发 前端开发 Windows
CSS基础1 | 青训营笔记
本期作为复习CSS的笔记,比较基础。当然即便最基础的东西也欢迎各路高手指点,以防地基不稳大厦崩塌hhh
CSS基础1 | 青训营笔记
|
前端开发 JavaScript 容器
通俗重制系列--CSS基础
通俗重制系列--CSS基础
129 0
|
前端开发 JavaScript Java
计算机二级web题目(4)--CSS基础
计算机二级web题目(4)--CSS基础
162 1
|
前端开发
CSS基础之选择器
总所周知,css可以为网页设置多种多样的样式,那怎么样可以精确为每一个html标签设置相应的样式呢?
|
前端开发 人机交互
Web开发及人机交互导论 实验三 CSS+DIV基础
Web开发及人机交互导论 实验三 CSS+DIV基础
175 0
Web开发及人机交互导论 实验三 CSS+DIV基础
|
前端开发
CSS基础-塌陷及定位
clear:right; 右侧不允许有浮动元素
124 0
|
前端开发
CSS 基础(下)
CSS 基础(下)
76 0
CSS 基础(下)

热门文章

最新文章

下一篇
无影云桌面