Go语言视频零基础入门到精通

javalearner

在昨天的教程中，我们给页面的主样式表main.css起了个头，做了一些基 本的CSS样式设定及必要的重置；今天我们来看看页面代码中HTML5元素所需要的样式重置；虽然今天的东东在内容篇幅上相对简短一些，不过在目 前这个阶段呢，这个知识点对于HTML5页面的正确实现还是比较重要的样子。 鉴于眼下各浏览器对HTML5的兼容支持程度参差不齐，一些浏览器甚至会完全忽视新的元素标签，或将新标签的display属性默认设置为行内 (inline).

    所以一个好习惯就是，在样式表中将所有用到的HTML5元素标签的display属性设置为块级(block)；我们将下面这段代码添加到昨天的main.css文件中：
   
     
      
      /* HTML5 tags */
header, section, footer,aside, nav, article, figure {
  display: block;
}[/code]
      
     
   
  
   
   
     
   

     
   
  
    现在，我们可以像对待普通<div>元素那样对这些新元素标签进行样式设定了；不过对于<section>元素，W3C建议不要直接对其做样式设定。

另外一点呢，我们可以在页面代码中看到( HTML5+CSS3 实战(7) 页面代码整合”)，<header>、<aside>、<section>等 标签都使用了class="body"，这样我们就可以省掉一对大容器标签，而直接使用.body为这些部分设置相同的宽度属性等；当然，这种做法并非绝对；我们把.body的样式代码添加到main.css中：
  
   
   
    /***** Layout *****/
.body {clear: both; margin: 0 auto; width: 800px;}[/code]
   
   
  
   

复制代码