コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > HTML5 CSS3応用の詳しい解説_html5チュートリアルスキル

HTML5 CSS3応用の詳しい解説_html5チュートリアルスキル

WBOY
リリース： 2016-05-16 15:48:21
オリジナル
1464 人が閲覧しました

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

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

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

レイアウトを徐々に受け入れ、外部スタイル シートを呼び出すようになりました。しかし、残念なことに、複雑な Web デザインにはさまざまなタグ構造コードが多数必要であり、これを「
-soup」症候群と呼んでいます。次のコードに精通しているかもしれません:


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



Div スープのデモンストレーション





何とか、なんとか。

;

ローレム イプサム テキスト何とか何とか。

ロレム イプサム テキスト何とか何とか。


タグ: HMTL、コード、デモ


class=" 脇">

content"> ;

Lorem ipsum テキストなんとかなんとかなんとか。


Lorem ipsum テキストなんとか何とかなんとか。


Lorem ipsum テキストなんとかなんとか。



タグ: HMTL、コード、デモ







これは少し気が進まないかもしれませんが、上記の例は、HTML4 を使用して複雑なデザインをコード化するのは依然として肥大化していることを示しています (実際、xHTML1.1 はそれ以上のものではありません)。しかし、興味深いのは、HTML5 が「
-soup」症候群を解決し、一連の新しい構造要素を提供していることです。これらの新しい HTML5 要素には、無意味な
タグを置き換えるより詳細なセマンティクスがあり、同時に CSS 呼び出しに「自然な」CSS フックを提供します。

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



コードをコピーします

コードは次のとおりです:


<セクション>


Div スープのデモンストレーション


2009 年 7 月 11 日に投稿




Lorem ipsum テキストなんとかなんとかなんとか。


Lorem ipsum テキストなんとかなんとかなんとか。


Lorem ipsum テキストなんとかなんとかなんとか。




タグ: HMTL、コード、デモ






接線情報




Lorem ipsum テキストなんとかなんとかなんとか。


Lorem ipsum テキストなんとかなんとかなんとか。


Lorem ipsum テキストなんとかなんとかなんとか。




タグ: HMTL、コード、デモ






私たちが考えているように、HTML5 は、これらの大量の無意味な

の代わりに、より多くのより高度にカスタマイズされた構造化コード フレームを使用する可能性があります。语义また、CSS に必須であった class と id プロパティも大幅に削減されています。実際、CSS3 はすべての class と id を盗用することもできます。

跟クラス属性说再见，欢迎整洁的标签

HTML5 には、豊富な文言認識が組み込まれており、CSS3 は Web デザインのネットワークに一般的な機能を提供します。HTML5 の能力により、より多くの文コードの制御が可能になりますCSS3 のエネルギー、我们の制御权は無穷大に考慮します!

これらの高レベルの CSS セレクタがない場合でも、この種のプロパティをクラスや ID に関係なく、さまざまなコンテナを使用して大規模な HTML5 条項で調整できます。 イメージ通りの DIV レイアウトで、CSS でこのように調整できる可能性があります: div #ニュース {}


复制代码代码如下:
div.section {}
div .article {}
div.header {}
div.content {}
div.footer {}
div.aside {}

我们再来看看HTML5 ベースの例: セクション {}


复制代代码如下:
記事 {}
ヘッダー {}
フッター {}
サイド {}


これは進歩ですが、解決する必要がある問題がまだいくつかあります。
インスタンスでは、class または id 属性を通じてページ内の要素を呼び出す必要があります。このロジックにより、全体または個別に、ドキュメント内の任意の要素にスタイルを適用できるようになります。たとえば、
の例では、.section 要素と .content 要素を簡単に配置できます。ただし、HTML5 の例では、実際のドキュメントには多くのセクション要素が含まれます。実際には、特定の属性セレクターを追加して、これらのさまざまなセクション要素を呼び出すこともできますが、ありがたいことに、現在、さまざまなセクション要素を対象とする高度な CSS セレクターがいくつかありません。

HTML-5 要素の検索にクラスと ID を使用しないでください

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

子孫セレクター: [CSS 2.1]: EF
兄弟セレクター: [CSS 2.1]: E F
子セレクター: [CSS 2.1]: E >

クラスと ID を使用せずにセクション要素をドキュメント内に配置する方法を見てみましょう:

最も外側の
要素を見つけます

この例は HTML5 コードの完全なセットではないことを考慮して、 要素の下に
関連ラベル：
css3 html5
ソース：php.cn
前の記事：HTML5 WebSocket 全二重通信の詳細な学習 example_html5 チュートリアル スキル 次の記事：HTML5 は WeChat マスターベーション game_html5 チュートリアル スキルを実装します
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページのメインディスプレイに画像を表示するにはどうすればよいですか? 私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...
から 2024-04-06 15:33:12
0
1
433
PDF ファイルは HTML5 と JavaScript を実行できますか? PDF に埋め込まれるため、どのコンピュータでもブロックされないプログラムを作成してみようという愚かな考えがあります (JavaScript は PDF 内で実行できると聞きました...
から 2024-04-05 12:57:00
0
1
456
HTML5 の enctype と formenctype の違いは何ですか? HTMLLivingStandard (別名、新しい HTML5 仕様) の属性 enctype と formenctype の違いは何でしょうか?私は HTML Standard...
から 2024-04-02 11:47:56
0
1
275
ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
から 2024-04-01 20:42:38
0
1
259
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート