簡単な CSS _html/css_WEB-ITnose

1. 概念

css、カスケード スタイル シート (英語: Cascading Style Sheets、略称 CSS)、文字列スタイル リスト、階層スタイル シート ファイルとも呼ばれ、構造化ドキュメント (HTML ドキュメントや XML アプリケーションなど) を作成するために使用される

スタイル (フォント、間隔、色など) を追加するためのコンピューター言語。 「カスケード」とは、1 つの

ファイルのスタイルを他のスタイル シートから継承できることを意味します。読者は、ある場所では自分の好みのスタイルを使用し、他の場所では著者のスタイルを継承または「重ね合わせる」ことができます。この階層化アプローチにより、作成者と読者の両方が独自のデザインを追加し、独自の好みを組み合わせることができる柔軟性が得られます。

2. 機能:

(コンテンツとスタイルの分離) 重複が多く、コンテンツと色が統合されているため、色を変更する必要がある場合は、コードを変更する必要があります。現代

コードが多すぎると交換が大変になります。そして、間違いが起こりやすいのです。そこで、HTML ファイルには構造とコンテンツ情報のみが含まれ、CSS ファイルにはスタイル情報のみが含まれると誰かが提案しました。

3. CSS の使用方法

1. コードまたはテキストを配置できる セレクター

を追加します。そして、マークを作成します。マークは、スタイル ファイル内のマーク ファイルを通じて変更できます。

 <font color="0000ff ">阿猫</font> <font color="0000ff ">阿狗</font> <font color="0000ff ">阿兔</font>

2. スタイルシートに対応するタグスタイルを記述します

クラスセレクターを例に挙げます

    <span class="menu">阿猫</span>    <span class="menu">阿狗</span>    <span class="menu">阿兔</span>

3.ウェブページとスタイルシートを一致させる

将来色を変更したい場合は、スタイル ファイルを直接変更できます。数百または数千の Web ページが 1 つのスタイル ファイルに対応している場合、変更ははるかに簡単になります。

うーん注意: 並列セレクターは、セレクター間に共通の属性がある場合に使用できます。各セレクターはカンマで区切ることができます

.menu{    color:#00f;                     /*在这里Ctrl+J会自动列出代码的样式*/}

4. CSS のセレクターの種類:

1. クラス セレクター、上記の例はクラス セレクター

2. ID セレクター

<link href="StyleSheet1.css" rel="stylesheet">

注: ID セレクターとクラス セレクターが同じ属性に対して異なる値を設定した場合、ID セレクターが優先されます

3. HTML タグ セレクター (body タグ内のコンテンツ用)

.menu,.title{    background-color:#ffd800;}

<span id="special" class="menu">阿猫</span>      #special{    font-weight:bold;          /*粗体*/}

タグの優先順位selector: HTML セレクター

その他、ユニバーサル セレクター、属性セレクター、擬似セレクターもありますので、興味のある方はご自身で選択してみてください。

4. セレクターの継承関係 セレクター内にセレクターがある場合、後のセレクターは前のセレクターを継承します。例:

body {    color :#ffd800;}

の途中の「one」のスタイルを変更する使用法:

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">       </span>

I h 注: This と SPAN の間にはスペースが必要ですが、スペースの数は制限されません

🎜 🎜 🎜 🎜 🎜 2 つのセレクターが同じ属性の異なる値を表す場合、CSS 内の順序は正確に 🎜🎜 🎜 となり、最初にランク付けされたものが上書きされます。後ろの人。 🎜 🎜 CSS の核心は、Web ページのコンテンツとスタイルを分離することです。 HTML ファイルは表示されるテキストのみを担当します。特定の表示をカプセル化する方法 🎜 🎜 それを行うには、スタイル ファイルに移動します。この方法では、フロントエンドの表示スタイルを変更するときに、スタイル ファイルを直接変更できるため、便利でエラーが発生しません。オブジェクト指向🎜🎜プログラミングの考え方に沿っています。 🎜 🎜 🎜