何とか、なんとか。
;ローレム イプサム テキスト何とか何とか。
ロレム イプサム テキスト何とか何とか。
ホームページ > 記事 > ウェブフロントエンド > HTML5 CSS3応用の詳しい解説_html5チュートリアルスキル
HTML5 CSS3応用の詳しい解説_html5チュートリアルスキル
- WBOYオリジナル
- 2016-05-16 15:48:211410ブラウズ
Web デザイナーは、HTML4 と CSS2.1 を使用して、いくつかの素晴らしいことを実現できます。古い表ベースのレイアウトを使用せずに、ドキュメントの論理構造を完成させ、コンテンツが豊富な Web サイトを作成できます。インラインの タグや
を使用せずに、美しく繊細なスタイルを Web サイトに追加できます。実際、私たちの現在のデザイン能力は、ブラウザー戦争、独自のプロトコル、ちらつき、スクロール、フラッシュだらけの醜い Web ページの恐ろしい時代から私たちを遠くに連れて行ってくれました。
私たちは現在 HTML4 と CSS2.1 をよく使用していますが、もっと改良できるはずです。コードを再構築し、ページ コードをよりセマンティックにすることができます。ページに美しい外観を与え、よりスケーラブルにするスタイリング コードの量を減らすことができます。さて、HTML5 と CSS3 が私たちのデザインを本当に次のレベルに引き上げることができるかどうかを見てみましょう...
これまで、デザイナーはセマンティクスを持たずにテーブルベースのレイアウトを使用することがよくありました。しかし最終的には、Jeffrey Zeldman や Eric Meyer のような革新者のおかげで、賢明なデザイナーはテーブル レイアウトの代わりに比較的セマンティックな
レイアウトを徐々に受け入れ、外部スタイル シートを呼び出すようになりました。しかし、残念なことに、複雑な Web デザインにはさまざまなタグ構造コードが多数必要であり、これを「
-soup」症候群と呼んでいます。次のコードに精通しているかもしれません:
class=" 脇">
content"> ;
これは少し気が進まないかもしれませんが、上記の例は、HTML4 を使用して複雑なデザインをコード化するのは依然として肥大化していることを示しています (実際、xHTML1.1 はそれ以上のものではありません)。しかし、興味深いのは、HTML5 が「
コードをコピーします
コードは次のとおりです:Div スープのデモンストレーション
Lorem ipsum テキストなんとかなんとかなんとか。
Lorem ipsum テキストなんとか何とかなんとか。
Lorem ipsum テキストなんとかなんとか。
タグ: HMTL、コード、デモ
これは少し気が進まないかもしれませんが、上記の例は、HTML4 を使用して複雑なデザインをコード化するのは依然として肥大化していることを示しています (実際、xHTML1.1 はそれ以上のものではありません)。しかし、興味深いのは、HTML5 が「
-soup」症候群を解決し、一連の新しい構造要素を提供していることです。これらの新しい HTML5 要素には、無意味な
<セクション>
タグを置き換えるより詳細なセマンティクスがあり、同時に CSS 呼び出しに「自然な」CSS フックを提供します。
以下は HTML5 ソリューションの例です:
以下は 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 ベースの例: セクション {} div .article {}
div.header {}
div.content {}
div.footer {}
div.aside {}
复制代代码如下:
記事 {}
ヘッダー {}
フッター {}
サイド {}
これは進歩ですが、解決する必要がある問題がまだいくつかあります。
ヘッダー {}
フッター {}
サイド {}
これは進歩ですが、解決する必要がある問題がまだいくつかあります。
インスタンスでは、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 >
最も外側の
この例は HTML5 コードの完全なセットではないことを考慮して、 要素の下に
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。