HTML元素的默认CSS设置介绍

2016-02-19 21:41 4 1 收藏

今天图老师小编要向大家分享个HTML元素的默认CSS设置介绍教程,过程简单易学,相信聪明的你一定能轻松get!

【 tulaoshi.com - Web开发 】

以下是引用片段:
/**default css style**/
html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre { display: block }
li { display: list-item }
head { display: none }
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell; }
caption { display: table-caption }
th { font-weight: bolder; text-align: center }
caption { text-align: center }
body { margin: 8px; line-height: 1.12 }
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,strong { font-weight: bolder }
blockquote { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address { font-style: italic }
pre, tt, code,
kbd, samp { font-family: monospace }
pre { white-space: pre }
button, textarea,
input, object,
select { display:inline-block; }
big { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }
sup { vertical-align: super }
table { border-spacing: 2px; }
thead, tbody,
tfoot { vertical-align: middle }
td, th { vertical-align: inherit }
s, strike, del { text-decoration: line-through }
hr { border: 1px inset }
ol, ul, dir,
menu, dd { margin-left: 40px }
ol { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
u, ins { text-decoration: underline }
br:before { content: "A" }
:before, :after { white-space: pre-line }
center { text-align: center }
abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em }
:link, :visited { text-decoration: underline }
:focus { outline: thin dotted invert }
/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }
@media print {
h1 { page-break-before: always }
h1, h2, h3,
h4, h5, h6 { page-break-after: avoid }
ul, ol, dl { page-break-before: avoid }
}

来源:http://www.tulaoshi.com/n/20160219/1626856.html

延伸阅读
标签: Web开发
块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊,它只能用来容纳其他块元素。 如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排。而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想...
标签: Web开发
1. position:static|无定位 position:static是所有元素定位的默认值, 一般不用注明,除非有需要取消继承的别的定位 example: #div-1 { position:static; } 2. position:relative|相对定位 使用position:relative,就需要top,bottom,left,right4个属性来配合,确定元素的位置。 如果要让div-1层向下移动20px,左移4...
标签: Web开发
代码如下: -webkit-transition: all 0.5s; color: #b91003; margin-left: 40px !important; 效果是 在0.5秒内容字体颜色逐渐红 向左边逐渐margin-left直到40px
标签: Web开发
html,address, blockquote, body,dd,div, dl,dt,fieldset,form, frame,frameset, h1,h2,h3,h4, h5,h6,noframes, ol,p,ul,center, dir,hr,menu,pre { display:block} li { display:list-item} head { display:none} table { display:table} tr { display:table-row} thead { display:table-header-group} tbody { display:table-row-group...
标签: Web开发
选择器 p[name^=my]{font-size:14px} 选择器 ^= 讲规则应用到所有 name属性以my开头的p元素标签 p[name$=my]{font-size:14px} 选择器 $= 讲规则应用到所有 name属性以my结尾的p元素标签 p[name*=my]{font-size:14px} 选择器 $= 讲规则应用到所有 name属性包含my结尾的p元素上 选择器 、 + 、~ 选择器表示受影响的元素是第一个元素的子...

经验教程

820

收藏

82
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部