HTML5+CSS3アプリの詳しい説明-htmlチュートリアル-php.cn

この記事では主に HTML5+CSS3 アプリケーションの詳細な説明を紹介しますので、必要な方はぜひ参考にしてください。実際に私たちのデザインを次のレベルに引き上げられるかどうか見てみましょう

Web デザイナーは HTML4 と CSS2.1 を使用して素晴らしいことを実現できます。古い表ベースのレイアウトを使用せずに、ドキュメントの論理構造を完成させ、コンテンツが豊富な Web サイトを作成できます。インラインのタグや
を使用せずに、美しく繊細なスタイルを Web サイトに追加できます。実際、私たちの現在のデザイン能力は、ブラウザー戦争、独自のプロトコル、ちらつき、スクロール、フラッシュだらけの醜い Web ページの恐ろしい時代から私たちを遠くに連れて行ってくれました。

現在、HTML4 と CSS2.1 が一般的に使用されていますが、さらに改善できる可能性があります。コードを再構築し、ページコードをよりセマンティックにすることができます。ページに美しい外観を与え、よりスケーラブルにするスタイリングコードの量を減らすことができます。さて、HTML5 と CSS3 が本当に私たちのデザインを次のレベルに引き上げることができるかどうかを見てみましょう...

以前は、デザイナーはテーブルベースのセマンティックレイアウトの頻繁な使用とは無関係であることがよくありました。しかし最終的には、Jeffrey Zeldman や Eric Meyer のような革新者のおかげで、賢明なデザイナーはテーブルレイアウトの代わりに比較的セマンティックな

レイアウトを徐々に受け入れ、外部スタイルシートを呼び出すようになりました。しかし、残念ながら、複雑な Web デザインにはさまざまなタグ構造コードが必要であり、これを「

-soup」症候群と呼んでいます。おそらく、次のコードに精通しているかもしれません:

コードをコピーしますコードは次のとおりです:

 <div class="section"> 
      <div class="article"> 
        <div class="header"> 
            <h1>Div Soup Demonstration</h1> 
            <p>Posted on July 11th, 2009</p> 
        </div> 
        <div class="content"> 
            <p>Lorem ipsum text blah blah blah.</p> 
            <p>Lorem ipsum text blah blah blah.</p> 
            <p>Lorem ipsum text blah blah blah.</p> 
        </div> 
        <div class="footer"> 
            <p>Tags: HMTL, code, demo</p> 
        </div> 
      </div> 
      <div class="aside"> 
        <div class="header"> 
            <h1>Tangential Information</h1> 
        </div> 
        <div class="content"> 
            <p>Lorem ipsum text blah blah blah.</p> 
            <p>Lorem ipsum text blah blah blah.</p> 
            <p>Lorem ipsum text blah blah blah.</p> 
        </div> 
        <div class="footer"> 
            <p>Tags: HMTL, code, demo</p> 
        </div> 
      </div> 
  </div> 
</div>

ログイン後にコピー

これは少し気が進まないですが、上記の例は次のことを行うことができます。複雑なデザインは、コード化された後でもまだ肥大化しすぎています (実際、xHTML1.1 はそれ以上のものではありません)。しかし、興味深いのは、HTML5 が「

-スープ」症候群を解決し、一連の新しい構造要素を提供してくれることです。これらの新しい HTML5 要素には、無意味な

タグを置き換えるより詳細なセマンティクスがあり、同時に CSS 呼び出しに「自然な」CSS フックを提供します。

以下は HTML5 ソリューションの例です:

コードをコピーしますコードは次のとおりです:

<section> 
      <article> 
        <header> 
            <h1>p Soup Demonstration</h1> 
            <p>Posted on July 11th, 2009</p> 
        </header> 
        <section> 
            <p>Lorem ipsum text blah blah blah.</p> 
            <p>Lorem ipsum text blah blah blah.</p> 
            <p>Lorem ipsum text blah blah blah.</p> 
        </section> 
        <footer> 
            <p>Tags: HMTL, code, demo</p> 
        </footer> 
      </article> 
      <aside> 
        <header> 
            <h1>Tangential Information</h1> 
        </header> 
        <section> 
            <p>Lorem ipsum text blah blah blah.</p> 
            <p>Lorem ipsum text blah blah blah.</p> 
            <p>Lorem ipsum text blah blah blah.</p> 
        </section> 
        <footer> 
            <p>Tags: HMTL, code, demo</p> 
        </footer> 
      </aside> 
  </section> 
</section>

ログイン後にコピー

ご覧のとおり、HTML5 では、より多くのセマンティック構造を置き換えることができます。 code タグ意味のない

タグが大量にあります。このセマンティクス機能は、Web ページの品質とセマンティクスを向上させるだけでなく、コード内で CSS のために呼び出す必要がある class 属性と id 属性を大幅に削減します。実際、CSS3 ではすべてのクラスと ID を無視することもできます。

クラス属性に別れを告げ、きちんとしたタグを歓迎しましょう

新しいセマンティックタグが豊富な HTML5 と組み合わせることで、CSS3 は Web デザイナーに Web ページに神のような力を提供します。 HTML5 の力により、ドキュメントコードをより詳細に制御できるようになり、CSS3 の力で制御できるようになります。

高度な CSS セレクターがなくても、class や id などの属性を気にせずに、強力な HTML5 句を通じてさまざまなコンテナーを呼び出すことができます。前の p レイアウトと同様に、CSS で次のように呼び出すことができます: p#news {}

コードをコピーしますコードは次のとおりです:

div.section {} 
div.article {} 
div.header  {} 
div.content {} 
div.footer  {} 
div.aside  {}

ログイン後にコピー

HTML5 に基づいた例を見てみましょう: セクション {}

コードをコピーしますコードは次のとおりです:

article {} 
header  {} 
footer  {} 
aside  {}

ログイン後にコピー

これは進歩ですが、解決する必要がある問題がまだいくつかあります。

の例では、class または id 属性を通じてページ内の要素を呼び出す必要があります。このロジックにより、全体または個別に、ドキュメント内の任意の要素にスタイルを適用できるようになります。たとえば、

の例では、.section 要素と .content 要素を簡単に見つけることができます。ただし、HTML5 の例では、実際のドキュメントには多くのセクション要素が含まれます。実際には、特定の属性セレクターを追加して、これらのさまざまなセクション要素を呼び出すこともできますが、ありがたいことに、現在、さまざまなセクション要素をターゲットにするための高度な CSS セレクターがいくつかありません。

クラスと ID を使用せずに HTML-5 要素を検索する

クラスと ID を使用せずに HTML5 ページ要素のインスタンスを検索する方法を見てみましょう。インスタンス内の要素を検索して識別するために 3 つの CSS セレクターを使用できます。以下の通り:

后代选择器:[CSS 2.1]: EF
兄弟选择器:[CSS 2.1]: E + F
子元素选择器:[CSS 2.1]: E > F

下面让我们来看看如何不使用class和id而完成对文档中的那些section元素的定位吧:

定位最外层的

元素

　　考虑到我们的例子并不是一套完整的HTML5代码，所以我们假定在元素下有个

元素与

元素是兄弟元素。这样的话，我们就可以向下面代码那样定位最外层的

了:

复制代码

代码如下: