CSS初始化、盒子深入

html-css017

CSS初始化、盒子深入,第1张

html元素表现的差异性:虽然html被称为一种标准,但其并非是“强制标准”。——则各个浏览器公司做出来的浏览器产品或多或少总有一些差异。

最终,通常的做法是:我们将所有各个浏览器中的html的初始标签全部“清除”——即实现类似没有“表形”功能的html。

比如很多标签有初始的margin,或padding,或字的大小或粗细,斜体等等效果,则我们使用一些css设置将这些初始表现全部“清空”,比如:

这样之后,所有的每个标签所需要的表现,都需要我们自己来使用css设置。

实际应用中,我们一般都是使用一个通用的css文件来完成此工作。

写在<link rel="stylesheet" type="text/css"href="css/init.css" />

。。。。。

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

以上就是12个:

除此之外,我们还有3个设置线的某方面特性的综合属性:

border-style: 可以使用1-4个值,用来设置4个方向的线的线型,其规则同margin值的设置。

比如:border-style:solid dashed 表示上下边框为实线,左右边框为虚线;

border-width: 同理,可以设置1-4个值,表示4个方向的线宽。

border-color:同理。

还有:4个设置每个方向边框的所有特性的综合属性:

最后,一个最大的综合属性:一次性设置4个方向的3个特性:

border: 线型 线宽 线颜色;

盒子还有背景属性。

背景分两种:

* 背景颜色:只能是纯色,全平铺——css3里面已经可以设置过度色。

background-color:颜色值;

* 背景图片:需要设置图片路径,还可以设置是否重复(平铺),怎么重复,怎么定位。

background:背景色值 背景图值 背景图重复性值 背景图定位值;

以上4个值,几乎可以任意省略(也就是任意使用其中某些)。

其实块盒子和行内盒子的所谓初始表现,并不是什么决定的东西,而只是一个属性的初始值问题:

对块盒子,其display属性的值默认是block

对行内盒子,其display属性的值默认是inline;

实际上,我们完全可以将html盒子的初始表现使用该属性来设置其其它值——即块盒子和行内盒子可以相互转换。

最耗资源的,最简单的

* { padding: 0margin: 0border: 0}

选择性初始化举例(综合)

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,legend,button

form,fieldset,input,textarea,p,blockquote,th,td {

padding: 0

margin: 0

}

3. 参考新浪、雅虎

/* 新浪全局样式 */

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{

  margin:0padding:0border:0

}

body{

  background:#fffcolor:#333font-size:12pxmargin-top:5pxfont-family:"SimSun","宋体","Arial Narrow"

}

ul,ol{

  list-style-type:none

}

select,input,img,select{

  vertical-align:middle

}

a{text-decoration:none}

a:link{color:#009}

a:visited{color:#800080}

a:hover,a:active,a:focus{color:#c00text-decoration:underline}

/* 雅虎全局样式 */

html {

  background: none repeat scroll 0 0 #FFFFFF

  color: #000000

}

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 {

  margin: 0

  padding: 0

}

table {

  border-collapse: collapse

  border-spacing: 0

}

fieldset, img {

  border: 0 none

}

address, caption, cite, code, dfn, em, strong, th, var {

  font-style: normal

  font-weight: normal

}

li {

  list-style: none outside 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 none

  font-variant: normal

}

sup {

  vertical-align: text-top

}

sub {

  vertical-align: text-bottom

}

input, textarea, select {

  font-family: inherit

  font-size: inherit

  font-weight: inherit

}

input, textarea, select {

}

legend {

  color: #000000

}

body {

  font: 13px/1.231 arial,helvetica,clean,sans-serif

}

select, input, button, textarea {

  font: 99% arial,helvetica,clean,sans-serif

}

table {

  font-size: inherit

}

pre, code, kbd, samp, tt {

  font-family: monospace

  line-height: 100%

}

a {

  text-decoration: none

}

a:hover, a:focus {

  text-decoration: underline

}

strong {

  font-weight: bold

}

input[type="submit"] {

  cursor: pointer

}

button {

  cursor: pointer

}