CSS と HTML の使用に関するよくある誤解

今回は、CSS と HTML の使用におけるよくある誤解について説明します。CSS と HTML を使用する際の 注意事項 は何ですか?実際の事例を見てみましょう。

通説 1. ポリープ症候群

<p class="nav">
    <ul>
       <li><a href="/home/">Home</a></li>
       <li><a href="/about/">About</a></li>
       <li><a href="/concact/">Concact</a></li>
    </ul>
</p>

上記の冗長な p タグの使用は「

ポリープ症候群」と呼ばれますが、これは次のように簡略化する必要があります

<ul class="nav">
      <li><a href="/home/">Home</a></li>
      <li><a href="/about/">About</a></li>
      <li><a href="/concact/">Concact</a></li>
</ul>

通説 2. 多クラス症候群 注このクラスはページ上の任意の数の要素に適用でき、コンテンツ タイプや他の同様のアイテムを識別するのに非常に適しています

ニュース (ニュース タイトル、ニュース詳細)

<h1 class="news-head">Elastic Layout Example—View Source for the HTML and CSS</h1>
<p class="news-head">Lorem ipsum dolor sit amet.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

news-head と news- を使用します上記のクラス名のテキストは、「

polyclassism」パフォーマンスと呼ばれ、要素のスタイルを区別するために多くのクラスを使用する必要はありません

セマンティクスを持たない代わりに、

p (pision) を使用して部分を表す方が良いです。 (ほとんどの人は p にはセマンティクスがないと誤解しています!!!)、実際、 p はニュース項目全体を識別するために、ドキュメントをいくつかの意味のある領域

に分割できます。次に、カスケード スタイルを使用してニュースのタイトルとテキストを識別できます。これは次のように変更する必要があります

<p class="news">
    <h1>Elastic Layout Example—View Source for the HTML and CSS</h1>
    <p>Lorem ipsum dolor sit amet.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</p>

をグループに拡張するか、インライン要素を識別します

<h2> Andy wins an Oscar for his cameo in Iron Man</h2>
<p>Public and on <span class="date">Februray 22nd, 2009</span>
    By <span class="author">Harry Knowles</span>
</p>

誤解3. IDの使用に関する誤解ページ要素 (サイト ナビゲーション、ヘッダー、フッターなど) の特定の項目を識別するために使用され、永続的な構造要素 (メイン ナビゲーション、コンテンツ エリアなど) を識別するためにも使用できます。ページ上の特定の要素 (サイト ナビゲーション、ヘッダー、フッターなど) を識別するために使用され、一意である必要があります。また、永続的な構造要素 (メイン ナビゲーション、コンテンツ領域など) を識別するためにも使用できます

この記事の事例を読んで方法をマスターした方は、さらに興味深い情報を入手してください。php 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

Baidu Tiebaの3D反転効果

css3で自転車のアニメーション効果を実現

以上がCSS と HTML の使用に関するよくある誤解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。