Java学習編 - CSSの基礎(1)_html/css_WEB-ITnose

CSSの基礎知識(1)

1. CSSスタイル:

読み込むCSSスタイルは4種類あります:

1)、外部スタイル
2)、内部スタイル
3)、インラインスタイル
4 ), Import style

<link href="layout.css" rel="stylesheet" type="text/css" />

この形式は、cssを別途cssファイルに記述し、ソースコード内にリンクとしてリンクする形式です。その利点は、このページだけでなく他のページも呼び出せることです。最もよく使用される形式です。

<style>h2 { color:#f00;}</style>

このフォームは、 で終わり、ソース コードの head タグに記述されます。このようなスタイルシートはこのページでのみ有効です。他のページには適用できません。

<p style="font-size:18px;">内部样式</p>

タグ内で style とマークされているこのタイプのスタイルは、タグ内の要素に対してのみ有効です。そのため、インライン スタイルは、コンテンツから分離されていないため、推奨されません。これを使って。

@import url("/css/global.css");

リンク スタイルは、@import URL タグでリンクされた外部スタイル シートであり、通常は別のスタイル シート内で使用されます。ホームページで使用されるスタイルがlayout.cssの場合、グローバルに必要な共通のスタイルをglobal.cssファイルに配置し、レイアウトで@import url("/css/global.css")を使用できます。 css の形式でグローバル スタイルをリンクするため、コードの再利用性が高くなります。

2. CSS の優先順位:

1)、ID の優先順位はクラスよりも高くなります
2)、後のスタイルは前のスタイルをオーバーライドします
3)、指定されたスタイルは継承よりも高くなります
4)、インライン スタイルは内部または外部スタイル
概要: 単一 (id) は共有 (クラス) より上位です。指定されていなければ、指定されたものを使用します。

3. CSS ボックス モデル。構成:

Web 標準を学ぶには、まず最初に理解する必要があります。私たちが理解しているのは、DIV レイアウトの核となるこのボックス モデルです。従来のテーブル レイアウトでは、さまざまなサイズのテーブルとテーブル ネストを使用して Web ページ コンテンツを配置およびレイアウトします。CSS レイアウトに切り替えると、CSS で定義されたさまざまなサイズのボックスとボックス ネストを使用して Web ページが配置されます。この組版方法の Web ページ コードはシンプルで、パフォーマンスとコンテンツが分離されており、保守が容易で、PDA デバイスなどのより多くのブラウザと互換性があり、通常に閲覧することもできます。

では、なぜボックスと呼ばれるのでしょうか?まず、Web デザインでよく聞く属性名について説明します。content、padding、border、margin はすべてこれらの属性を持ちます。

実際には上部に開口部のある箱として想像できます。そして、上から見下ろすと、境界線は箱の厚さに相当し、内容はオブジェクトの空間に相対的です。衝撃防止の目的で箱に詰められた発泡体は、簡単に取り外せるように箱の周囲に一定のスペースを残すことに相当します。ボックスモデルはこんな感じでわかりやすいでしょうか？

つまり、ページ内のボックスモデル全体の幅は、左ボーダー + 左ボーダー + 左パディング + コンテンツ + 右パディング + 右ボーダー + 右ボーダーで構成され、CSS スタイルの width で定義される幅はコンテンツのみです部分の幅。

ここでの境界は外側マージンとも呼ばれ、外側のパッチは内側マージンおよび内側パッチとも呼ばれます。

著作権声明: この記事はブロガーによるオリジナルの記事であり、ブロガーの許可なく複製することはできません。