CSS(css reset)重置到底要怎么写？

html-css015

CSS(css reset)重置到底要怎么写？,第1张

(文章来源于：玉溪无痛人流因为各种浏览器的算法不一样，从而导致CSS在不同的浏览器中存在一部分不一样的效果，CSS重置就是写一段初始化CSS将这些浏览器不同的初始化设置指定同一种显示效果。使用了CSS重置以后，各不同浏览器的初始化设置将一致，后面再写CSS的时候就不会因为浏览器的初始化不同从而导致显示的效果不一致了。CSS重置使用的误区下面这段代码是网上很多网站CSS开始之前使用的CSS重置代码，看着就让人头晕，可能连网站设计者自己都搞不懂里面很多标签的含义。html, body, div, span, applet, object, iframe, h1, h2, h3, h4,h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite,code, del, dfn, em, img,ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt,dd, ol, ul, li, fieldset, form, label, legend, table,caption,tbody, tfoot, thead, tr, th, td, article,aside, canvas, details, embed, figure, figcaption, footer, header,hgroup, menu, nav, output, ruby,section,summary,time, mark, audio, video {margin: 0padding: 0border: 0font-size: 100%font: inheritvertical-align: baseline}我们写CSS重置要考虑到自己的网站的具体设计，如上面那段CSS代码所示，你的网站可能只有用到里面的其中一小部分标签，但是你却把所有的全部复制到你的CSS里面，你考虑过CSS渲染的问题吗？对你没用的东西你为什么要写进去呢？写程序是一件很严谨的事情，你写的每一段代码你至少需要知道其含义是什么，原样复制连自己都弄不清楚是什么意思有想到会造成什么后果吗？

使用DW让网页图片置顶，可分三种情况：1. css reset 在HTML标签在浏览器里有默认的样式，例如 p 标签有上下边距，strong标签有字体加粗样式，em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉根据本题提问主要涉及到以下CSS Resethtml, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, aside, 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, caption, tbody, tfoot, thead, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0padding:0border:0outline:0vertical-align:baseline}table { border-collapse:collapseborder-spacing:0}fieldset, img { border:0}td, td img { vertical-align:top }2. 图片为页面中插入的img，如<img src="../images/1.jpg" />如果已经设置了以上的css reset ，在没有专门设置其它任何间距的情况下，图片默认也是置顶的。3. 图片为背景图片 如 div{width:100%height:50pxbackground:url(../images/1.jpg) left top no-repeat} 其中的left top 就是定义图片位置的，让图片水平居左垂直居上显示，也就是说此时图片也是置顶的；left top 也可以换成数值 如 background:url(../images/1.jpg) 0 0 no-repeat

编辑方法如下：

一.使用 HTML5 的 声明

在 HTML 4.01 和 XHTML 中那段长长的 DTD 类型声明应该是所有标签中最难记住的标签了，但在 HTML5 中， DTD 声明非常简单：

1

<!DOCTYPE html>

就是这么简洁，要使用 HTML5 ，第一步肯定是先使用 HTML5 的 <!DOCTYPE>声明。

二.加入 html5.js

可以在主题的 head 元素内加入一段 js 来让 IE8 及以下的 IE 完全支持 HTML5 的标签。

下载由 html5shiv 提供的这个 html5.js 文件。

1

2

3

<!--[if lte IE 9]>

<script type="text/javascript" src="./js/html5.js"></script>

<![endif]-->

代码中使用了条件注释针对低版本的 IE（IE8 及以下版本）浏览器来调用这个 js 文件，其他浏览器会忽略掉这段代码，不会造成浪费的 HTTP 请求。

三.CSS Reset

CSS Reset 是为了把浏览器提供的默认样式去掉的一段 CSS ，详细的介绍可以参见 Kayo 之前所写的一篇文章 《关于 CSS Reset 》，本文中的 CSS Reset 是根据前文的 CSS Reset 改造的，主要是加入了对 HTML5 中新加入的标签的重置。下面是 Kayo 针对 HTML5 的 CSS Reset ，供大家参考，也可以参照前文定制更适合个人情况的 CSS Reset 。

/*** 加入 HTML5 新标签的样式重置 ***/

html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, 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: 0padding: 0border: 0outline: 0font-size: 100%vertical-align: baselinebackground: transparent}

body{line-height: 1text-align: left}

:focus {outline: 0}

/*** 将一些可以代替 div 标签的 HTML5 标签定义为块状元素 ***/

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display: block}

ol, ul {list-style: none}

blockquote, q {quotes: none}

blockquote:before, blockquote:after, q:before, q:after {content:''content:none}

ins {text-decoration: none}

mark {background-color: #ff9color: #000font-style: italicfont-weight: bold}

del {text-decoration: line-through}

table {border-collapse: collapseborder-spacing: 0}

input, select {vertical-align: middle}

现在，可以放心的在 WordPress 主题中使用 HTML5 标签了。

四.修改主题中的标签为语义化的 HTML5 标签

在网页重构中，舍弃了没有任何语义的 table 布局，取而代之的是新的标记，最常见的莫过于 div 这个标签，不过在设计复杂的页面时，新的问题出来了—— div 的滥用导致页面变得臃肿并且难于理解。值得兴奋的是， HTML5 为开发者引入了新的语义化标记，下面给大家介绍一些适合在 WordPress 主题中使用的 HTML5 标签。

<header>用于定义文档的页眉，可以代替原本包裹页眉的 <div>。

<footer>用于定义文档的页脚，可以代替原本包裹页脚的 <div>。

<nav>用于定义导航链接的部分，即代替包裹菜单的 <div>。

<article>用于定义独立的内容，很适合代替包裹文章的 <div>，如 WordPress 首页、归档页或文章页的文章列表中可使用该标签包裹文章。

<aside>该标签用于定义其所处内容之外的内容，并且 aside 的内容应该与附近的内容相关，因此很适合用来包裹 WordPress 的侧边栏。

另外 <time>, <small>, <section>等 HTML5 标签也适合用来改造升级 WordPress 主题，这些标签的具体意义可以参见 W3school 。

五.为主题加入 HTML5 微数据

关于 HTML5 微数据的介绍和使用方法可以参见 Kayo 之前所写的文章 《HTML5 之微数据》，这里主要介绍一些适合 WordPress 使用的微数据规范，因此建议读者先阅读前文再阅读下文。

这里使用的是 schema.org 的微数据规范，加入微数据是为了让机械（如搜索引擎）识别网页内容的意义，可以说是华丽丽的 SEO 。

下面列举一些适合的微数据规范：

http://schema.org/WPHeader 这是定义网页版头的微数据，需要注意的是 WPHeader 的 “WP” 不是指 WordPress ，而是 Web Page 的缩写，不过用在 WordPress 上也是非常合适的。

http://schema.org/WPFooter 定义网页页脚。

http://schema.org/BlogPosting 定义一篇博客文章。

http://schema.org/Review 定义一条评论。