DIV+CSS 入門_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

DIV+CSS 入門_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:54 AM

少し前に csdn で遊んでいたとき、Web ページに QQ と Weibo を追加するのはすごいと思いました。ブリスケットを学んだ後、私は B/S を学ぶという本当の旅を始めました。

最初は、

が何なのか、CSS が何に使われているのか分かりませんでした。入力後に振り返ってみると、少し理解できた気がします。 BSが入っています、間違っていたら訂正してください。

CSS

一般に、CSS には、フォント、色、配置、余白を制御するためのさまざまなスタイル属性が含まれています。これらは、Web ページのスタイル

の一部にすぎません。 CSS スタイルプロパティは 2 つのカテゴリに分類されます。

レイアウト属性: Web ページ上の要素の位置に影響を与える属性 (マージン、パディングなど) で構成されます。

書式設定プロパティは、Web サイト内の要素の視覚的な表示に影響を与えるプロパティ (フォントの種類、サイズ、色など) で構成されます。

CSS のカスケード

CSS スタイルシートのカスケードは、スタイルシートのルールが HTML ドキュメント要素に適用される方法、つまり、CSS スタイルシート内のスタイルが階層を形成する方法などを表します。特定のスタイルは共通のスタイルをオーバーライドします。スタイルルールの優先順位は、平準化効果を実現するために CSS の階層構造によって決定されます。これは、サブクラスが親クラスの特性を継承する、継承に似た関係とみなすこともできます。基本的なスタイルルールはスタイルシート全体に適用されますが、より具体的なスタイルルールによってオーバーライドできます。

簡単な例を見てみましょう。下の文字の色がわかるでしょうか？

<span style="font-family:KaiTi_GB2312;font-size:18px;"><div style="color:green">	this text is green.	<p style="color:blue"> this text is blue.</p>	<p> this text is stil green.</p></div></span>

ログイン後にコピー

这样の結果は、スタイル属性 color による

& & lt; ラベルです。したがって、

タグは元々緑色です。

タグは

タグの子であるため、緑色のテキストスタイルが

のテキスト

に渡されます。ただし、最初の

タグは色のスタイルをオーバーライドし、青に変更します。最終結果は、最初のテキストが青、2 番目のテキストが緑になります。

DIV+CSS

同様の形式とフォントを使用する Web ページが 3 つ以上ある場合、それらのスタイルシートを作成し、そのスタイルを Web ページ内の HTML に直接適用することができます。 Beef Brisket で使用されている div+css は、かつて私たちが遊んだ小男に服を着せるゲームに非常によく似ています。 div は基本的なコンポーネントを作成し、css は各コンポーネントのスタイルを決定します。 div は、帽子、コート、ジュエリー、靴があることを教えてくれます。 css は、さまざまなスタイルと色の服や帽子です。より専門的に言えば、div+css を使用して構造とパフォーマンスを分離することです。

。これらのブロックは、インターネットに接続されていない要素を配置するために使用されます。これにより、要素が段落、

であっても、HTML 内のすべての要素が「ボックス」とみなされる「ボックスモデル」が導入されます。ボックスには一貫したプロパティがあります。次の図は、ボックスモデルの図であり、各 HTML ブロックレベル要素に使用できる境界線、パディング、およびマージンと、それらの境界線、パディング、およびマージンがどのように適用されるかを示しています。言い換えれば、すべての要素のコンテンツと境界線の間に何らかのパディングがあります。

Web ページは非常にシンプルですが、大きな Web ページがネストされたテーブルでレイアウトされている場合、テーブルが完全に読み取られるまでテーブルが表示されないため、Web ページの表示に非常に悪影響を及ぼします。フォームを読むのに時間がかかる

ので、ユーザーが Web ページを読むのに役立つわけではありません。 Web ページの表示が非常に遅い場合、ユーザーは通常「やめてください」と言うでしょう。待っててください。」 +DIV+CSS レイアウトの最大の利点は、Web レイアウトを変更する場合、大きなテーブルとネストされたテーブルを含む Web ページレイアウトをコンパイルするだけで済むことです。 Web ページのメンテナンスと最適化が大幅に容易になります。

上で説明したのはテーブルのレイアウトであることに注意してください。 table タグの役割を否定するのではなく。

上記は HTML コンテンツについてのある程度の理解です。 BSはまだ始まったばかりです。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。