CSS カスケード スタイル シート_html/css_WEB-ITnose

一般的に、すべてのスタイルには次のルールがあります (4 番目のスタイルが最も優先されます)

1. ブラウザのデフォルト

2. 外部スタイル シート

内部スタイル シート (

タグ内)

インライン スタイル シート (

タグ内)

4. インライン スタイル (HTML 要素内)

で書かれたスタイルHTML 要素は (HTML 要素内に記述され) 最も高い優先順位を持ち、他の形式のスタイルを置き換えます。

CSS 構文は、セレクター、プロパティ、値の 3 つの部分で構成されます。例: selector{property:value}

セレクターは、定義する HTML 要素/タグであり、各属性は、は値であり、属性と値はコロンで区切られ、中括弧で囲まれます。 body{color:black}

値が複数の単語の場合は、二重引用符で囲みます -p{font-family:"sans serif"}

注: 複数の属性を指定する場合は、各属性をセミコロンで区切る必要があります。次の例は、赤色のテキスト演習を定義する方法を示しています

-p {text-align:center;color: red}

スタイル定義を読みやすくするには、次のようにプロパティを別々の行で記述することができます

p{

text-align:center;

color:black;

font-family:arial

}

セレクターを組み合わせることもできます。各セレクターはカンマで区切ります。次の例では、すべての見出し要素を結合し、その色を緑色に変更します

h1,h2,h3,h4,h5,h6{color:green}

セレクター クラスを使用すると、同じタイプの HTML 要素を組み合わせて異なる定義を行うことができますスタイル。たとえば、文書内に 2 つの異なるスタイルの段落を含めるとします。1 つは右揃え、もう 1 つは中央揃えです。これは、スタイルを使用してこれを行う方法を示しています

p.right{text-align:right}

p.center{text-align:center}

HTML ドキュメントでクラス属性を使用する必要があります (効果を表示するには)

この段落は右揃えになります。

この段落は中央揃えになります。

;

注: 各 HTML 要素はクラス属性を 1 つだけ持つことができます

すべての HTML 要素で使用できるように、タグ名を省略して直接定義することもできます。次の例では、すべての HTML で class="center" を使用してすべての要素のテキストを中央に配置できます。

.center{text-align:center}

次のコードの H1 要素と P 要素は両方とも class="center" を持ちます。これは、両方の要素がセレクター "center" のルールに従うことを意味します

この見出しは中央揃えになります

この段落も中央揃えになります。

名前が数字で始まるクラスは、Mozilla/Firefox では正しく動作しないため、使用しないでください。

(id セレクター)

id セレクターを使用すると、異なる HTML 要素に同じスタイルを定義できます

次のスタイル ルールは、id 属性値が "green" の要素と一致します。

#green{ color:green}

上記のルールは h1 要素と p 要素に一致します

一部のテキスト

次のスタイル ルールは、id 属性値が「green」を持つ任意の p 要素と一致します

p#green{color:green}

上記のルールは h1 要素と一致しません (つまり、スタイルがありません)効果が生成されます)

一部のテキスト

クラスと同様に、ID 名の先頭に数字を使用しないでください。そうしないと、次のように表示されます。 Mozilla/Firefox では正しく動作しません。

スタイルシートを挿入するにはどうすればよいですか?

ブラウザはスタイル シートを読み取ると、それ (スタイル シート) に従ってドキュメントをフォーマットします。スタイル シートを挿入するには 3 つの方法があります

1. 外部スタイル シート

3. インライン スタイル

外部スタイル シートを使用するのが理想的な方法です。スタイルを複数の Web ページに適用します。この方法では、1 つのファイルを変更するだけで Web サイト全体の外観を変更できます。 タグを使用して、各ページをスタイル シートにリンクします。 タグは head 領域で使用されます

head>

ブラウザは mystyle.css ファイルからスタイル定義情報を読み取り、それに応じてドキュメントを書式設定します

外部スタイル シートは、任意のテキスト エディタで作成できます。ファイルには HTML タグを含めないでください。そして、拡張子 .css を付けたファイルとして保存します。以下はスタイルシートファイルの内容です

hr{color:sienna}

p{margin-left:20px}

body{background-image:url(images/back40.gif)}

インライン スタイル シート

インライン スタイル シートは、別のドキュメントに特別な使用がある場合に使用する必要があります。スタイリングするときに。

hr{color:red}

p{ margin-left

スタイルシートを利用するための紛らわしいコンテンツとフォーム。通常、このメソッドは、個々の要素のスタイルを変更する必要がある場合に使用され、関連するタグの style 属性を使用してインライン スタイルを追加します。スタイル プロパティには、任意の CSS プロパティを含めることができます。この例では、段落に左スペースを追加し、色を赤に変更する方法を示します

これは段落です

複数のスタイルシート

同じセレクターによっていくつかのプロパティが異なるスタイルに設定されている場合、値はより具体的なスタイルに継承（具体化）されます

たとえば、外部スタイルシートにはこの h3 セレクターがあります

h3{color :red;text-align:left;font-size:8pt}

同時に、このような h3 セレクター属性を持つインライン スタイル シートもあります

h3{text-align:right;font- size:20pt}

ページにスタイル シートが埋め込まれており、同時に外部スタイル シートに接続されている場合、h3 属性は

color:red;text-align:right;font-size:20pt になります

color 外部スタイルシートが継承され、テキストの配置とテキスト サイズが埋め込みスタイル シートに置き換えられます。

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