扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
/* CSS Document */
成都创新互联公司是专业的广河网站建设公司,广河接单;提供成都网站建设、成都网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行广河网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
html, body, div, span, object, iframe,h1, h2,
h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn,
em, img, ins,kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd,
ol, ul, li,fieldset, form, label, legend,table, caption, tbody,
tfoot,thead,tr, th, td,article, aside, canvas, details, figcaption,
figure, footer, header, hgroup, menu, nav, section, summary,time, mark,
audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
outline-style:none;/*FF浣跨敤*/
}
body {
line-height:1;
}
a{
margin:0;
padding:0;
border:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
a:hover,a:focus{
text-decoration:none;
bblr:expression(this.onFocus=this.blur());/*IE浣跨敤*/
outline-style:none;/*FF浣跨敤*/
}
table {
border-collapse:collapse;
border-spacing:0;
}
input, select {
vertical-align:middle;
}
网络上有很多这种初始化的代码,你也要看你自己需要!最好没一句都看懂,有个印象。否者也会影响到后面的布局,你却找不到原因。
这样定义初始化css,自己将需要用到的标签添加到里边就行,样式更具实际情况追加
body,div,span,h1,h2,h3,h4,p,ul,li,table,tr,th,td,a,img{margin:0;padding:0}
首先我们要知道,每一个html标签都有其自己的默认样式,而css则可以改变html的样式。
比如一个div元素,它存在默认的margin值,而设计需要其对齐左上角,那么就要修改其margin值,对于大量的div设置就很麻烦,所以初始化css样式就很重要。
楼主,你不是不懂css,而是不懂html。
h1,h2,h3,h4,h5,h6 { margin: 0; padding: 0; font-size: 12px; }
h1到h6是html六种标题标签,在word里也有不同大小的标题预设值,他们分别有字体大小不同,边距不同、行高不同,也就是默认css属性font-size、margin-top、margin-bottom、line-height的值不同。
ul、ol是列表标签,如果不用css修饰,ul里每一项是以符号开始,ol是以数字开始
li是列表项标签。
dl、dt、dd这套和ul、ol差不多,但这一套把列表项可以分成dt和dd两种,但没有开始符号或数字。
你写的这几个css都是为了统一html的标签样式以便操作。
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, address, code, em, img, strong, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
意思是页面中的所有html标签、body标签、div标签、span标签.......tr标签、th标签、td标签的填充、边距、边框、外边线都为0,其中outline是ie不支持,在ff下是外边线,比如用它可以改变元素聚焦时候的虚线样式。
cssReset几乎每个网站都有,打开一个页面就可以看,至于注释,我认为绝对没人给这东西标注释,因为这是简单的不能再简单的css了,都已经接近白话文了,只有复杂的css框架才会有相关的api或者注释。
初始化css可以避免不必要的麻烦。
很多html都会有默认属性,而且对不同浏览默认值可能不同,很容易导致兼容性问题。而且对于默认值,也容易被自己或他人忽略而造成样式没有达到预期效果。
比如body在浏览器中会有默认的margin如果不清除,对于我们后面的代码编写会造成影响,明明没有写的属性却被设置了。对于其他如p元素、input元素等亦是如此。
最耗资源的,最简单的
* { padding: 0; margin: 0; border: 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:0;padding:0;border:0;
}
body{
background:#fff;color:#333;font-size:12px; margin-top:5px;font-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:#c00;text-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;
}
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流