HTML5 教程学习 - HTML5+CSS3 实战(12) HTML5元素样式
在昨天的教程中，我们给页面的主样式表main.css起了个头，做了一些基本的CSS样式设定及必要的重置；今天我们来看看页面代码中HTML5元素所需要的样式重置；虽然今天的东东在内容篇幅上相对简短一些，不过在目前这个阶段呢，这个知识点对于HTML5页面的正确实现还是比较重要的样子。
鉴于眼下各浏览器对HTML5的兼容支持程度参差不齐，一些浏览器甚至会完全忽视新的元素标签，或将新标签的display属性默认设置为行内(inline)；所以一个好习惯就是，在样式表中将所有用到的HTML5元素标签的display属性设置为块级(block)；我们将下面这段代码添加到昨天的main.css文件中：
/* HTML5 tags */
header, section, footer,aside, nav, article, figure {
display: block;
}
现在，我们可以像对待普通<div>元素那样对这些新元素标签进行样式设定了；不过对于<section>元素，W3C建议不要直接对其做样式设定。
另外一点呢，我们可以在页面代码中看到(参见“HTML5 教程学习 - HTML5+CSS3 实战(10) 页面代码整合”)，<header>、<aside>、<section>等标签都使用了class="body"，这样我们就可以省掉一对大容器标签，而直接使用.body为这些部分设置相同的宽度属性等；当然，这种做法并非绝对；我们把.body的样式代码添加到main.css中：
/***** Layout *****/
.body {clear: both; margin: 0 auto; width: 800px;}
今天就到这里；明天我们将重点学习一下页面头部(header)的样式设定。
译者：Viiiix7210
原文参考：Coding A HTML 5 Layout From Scratch
| < Prev | Next > |
|---|
