为HTML5元素设计样式 [英] Styling HTML5 Elements

问题描述

我知道对< section> 标记进行风格化是不正确的，但是< header> 和< footer> 标记。如果使用这些标签提供了更多的语义标记，那么应该使用它们，但是如果它们不能被样式化，那么仍然需要在内部插入< div>

我知道< header> 可以做样式，

所以问题是：如果html5标签是样式，或者应该是< div> / code>放在里面以照顾样式？

解决方案

规格中没有任何内容说你不能或不应该样式化HTML5元素，例如< section> 或< article> 。它只是说，你不应该放置一个语义HTML5元素在为了样式的东西。请改用< div> 。

因此，如果您有语义原因要添加< section> 或< article> ，那么一切都表示添加 AND 以风格它。但如果你必须包装你的标记的一部分为样式的目的（例如，添加一个边框，或左浮动等），但该部分在你的标记没有任何语义意义，然后使用< div> 。

例如：

 < div class =mainBox> 
< nav class =breadcrumbs> 
< ol> 
< li> ...链接列表（snip）....< / li> 
< / ol> 
< / nav> 
 
< section> 
< h1>最新Tweets来自Twitter< / h1> 
 
< article> 
 // ... a Tweet（snip）... // 
< / article> 
 
< article> 
 // ... a Tweet（snip）... // 
< / article> 
 
 // ...更多Twitter帖子（snip）... // 
 
< / section> 
 
< / div> 
  

< section> 您的页面的主要部分（即您的tweets列表），并且在开始时有一个标题是必需的。但它被包装在一个div.mainBox元素，因为也许你想包裹一个边框周围的面包屑和部分，即。它纯粹是为了造型。但是没有什么可以阻止你对< section> 和< $>

I know that it's incorrect to style a <section> tag but how about the <header> and <footer> tags. If using these tags provides a more semantic markup then they should be used, however, if they can't be styled then a <div> would still need to be inserted inside the tag to wrap the content and style it.

I know that <header> can be styled but I'm not sure if it's correct to do so.

So the question is: Should html5 tags be styled or should a <div> be placed inside to take care of the styling?

解决方案

Nothing in the spec says you can't or shouldn't style HTML5 elements such as <section> or <article>. It only says that you shouldn't place a semantic HTML5 element somewhere 'for the sake of' styling something. Use a <div> instead.

So if you have a semantic reason to add the <section> or <article> somewhere, then by all means add it AND also feel free to style it as well. But if you have to wrap a section of your mark-up for styling purposes (eg. to add a border, or float left etc.), but that section does not have any semantic meaning in your mark-up, then use a <div>.

For instance:

<div class="mainBox">
    <nav class="breadcrumbs">
        <ol>
            <li>...list of links (snip)....</li>
        </ol>
    </nav>

    <section>
        <h1>Latest Tweets From Twitter</h1>

        <article>
            //... a Tweet (snip)... //
        </article>

        <article>
            //... a Tweet (snip)... //
        </article>

        //... lots more Twitter posts (snip)... //

    </section>

</div>

The <section> element is the main part of your page (ie. your list of tweets) and also has a heading at the start which is required. But it's wrapped in a div.mainBox element because maybe you want to wrap a border around the both the breadcrumbs and section parts, ie. it's purely for styling. But there's nothing to stop you styling the <section> and <article> elements also.

这篇关于为HTML5元素设计样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！