当前位置: 网站建设 > 网页设计 > 建站经验 >

CSS样式表教程之浏览器默认样式

时间:2013-03-02 03:46来源:未知 作者:admin 点击:

标签:CSS样式表教程之浏览器默认样式 CSS(655)浏览器(54)Interne(1)这段(1)样式(83)代码(82)教程(56)默认(15)
这段代码在Internet Explorer中使用的字体是Times New Roman,而在Firefox和Opera中使用的是体系默认字体。因此我们要为<h1>在CSS中设定一个同一的样式。 reset.css是每个页面都必需的款式文件(或者你已经把它内置到相干的CSS文件中了), CSS样式表在网页
CSS样式表教程之浏览器默认样式》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302334142013.htm

这段代码在Internet Explorer中使用的字体是Times New Roman,而在Firefox和Opera中使用的是体系默认字体。因此我们要为<h1>在CSS中设定一个同一的样式。

reset.css是每个页面都必需的款式文件(或者你已经把它内置到相干的CSS文件中了),CSS样式表在网页设计中的特性,是咱们实现跨阅读器设计的不可缺乏的一环。

不外当初说的可不仅是这些,CSS样式表在网页设计中的4个特性。基础上,不同内核的两个浏览器在某些元素的表现都会存在差异,比如缩进的大小、字体取舍、字符样式等。兴许一个很美丽的CSS样式表在一个浏览器上表现良好,在另外一个浏览器上即便是不CSS Bug的情形也会变得构造凌乱起来,我都是浏览器默认样式在作祟。

至于哪些元素应该被重设?Yahoo!已经为我们做了比拟出的总结。依据雅虎的倡议,你须要把这些规则放到一个名为Reset.css的文件中独自援用(推举这种做法):

--> [网站建设之]CSS样式表教程之浏览器默认样式

html, body, div, span, applet,CSS样式如何实现Logo立体盒子效果, object, iframe,
h1,css样式名规范命名建议, h2, h3, h4, h5, h6, p, blockquote, pre,CSS样式书写之选择器详解,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0,CSS样式中的图片Referer差异判断;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

因而,我们在天生CSS样式规矩的时候,一个必做的步骤就是重设浏览器的默认样式,也就是笼罩掉浏览器的默认样式。和使用 * {padding:0;margin:0}有所不同,并不是所有的元素都存在padding和margin的差别(元素列表、有序列表在Internet Xplorer和Firefox中的不同是因为它们的缩进采取了margin缩进和padding缩进)。例如下面这段代码:

和Yahoo!一样,Eric Meyer在他的网站也给出了一个新的写法:

html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,CSS样式 background-position说明,li,h1,h2,h3,h4,h5,h6,pre,form,
fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style: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;
}
你要做的就是把这些规则简单地保留到reset.css中,而后在页面中使用。在需要给这些元素增添新的样式的时候,和其它元素的设定没有什么不同。

然而,假如我们像应用* {padding:0;margin:0}一样去使用通配符“*”来简略地设定全局样式,那么一个很显明的问题就会呈现,比方像form元素、input元素、textarea等在某些浏览器中会疏忽对它们的从新设定,CSS权重的问题 选择器权重值的计算,更主要的是这将会重大损坏这些元素的外观,所以你又不得不去手动去逐一为它们重新设定一个padding值跟margin值。所以我们应当废弃简单地使用“*&rdquo,CSS有趣实例 让整个网页翻转效果;,而是为第一个存在表示不一致的元素进行重设,如body,CSS有趣代码 远离IE6毁灭IE6抵制IE6,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre等等。

<h1> Headlines are very important Elements in XHTML</h1>

在文中他还提到了 Internet Explorer 中解决 inherit 的问题(我研究之后也想简单写一下),值得研讨(查看原文:Reset Reloaded)。实在这两个reset.css差异并不大,能够抉择其中之一或者合并使用。

留神:上面reset.css中 input,textarea,select{*font-size:100%;} 只有Internet Explorer可以意识,这样的设定是为了使在Internet Explorer中可以缩放表单控件字体的大小。而 legend{color:#000;} 是由于在Internet Explorer中lengend元素使用字体色彩和系统有关(甚至和系统作风有关)。这里还要指出的是,html{color:#000;background:#FFF;} 这条规则虽是细节,却很重要,因为在某些时候他直接影响了页面的整体外观,百度就存在这样的设计失误(雅虎没仿佛也没有给这一条,但是在某个示例中好像涌现了)。

同时,元素的默认样式可能会破坏页面的外观。好比<b>元素会把文字加粗,<blockquote>会大段缩进,<em>会使文字倾斜等,如果你想请求页面文本外观一致的话,也应该在CSS中把这些元素的外观进行重设。同时,有时候我们要求这些元素的外观和父元素一样,可以直接使用 inherit从父元素继续即可。

Tag:样式   默认   浏览器   教程    

不同浏览器对雷同元素的默认样式并不一致,这也是为什么我们在CSS的最开端要写 * {padding:0;marging:0};

 


(责任编辑:网站建设)
CSS样式表教程之浏览器默认样式相关文章
上一篇:CSS样式表在网页设计中的特性 下一篇:CSS样式表注释书写规范
回到顶部