ホームページ >ウェブフロントエンド >htmlチュートリアル >カスケード スタイル シート CSS_html/css_WEB-ITnose

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

WBOY
WBOYオリジナル
2016-06-24 11:52:301149ブラウズ

??

1. カスケード スタイル シートとは何ですか?
CSS は Web ページ上のスタイルの表示を制御します
2. CSS を設定するいくつかの方法
インライン スタイル (インライン スタイル)
ラベルのスタイル属性を設定します
インライン スタイル シートを使用する場合、html4.01 標準では次の追加を推奨しています

理由: 新しいバージョンの html では、 CSSを使用するだけでなく、HTML内のXMLの表示効果を制御するためにtext/smlを使用するなど、他の方法も使用できます

欠点: 各タグで設定する必要があり、インラインスタイルシートはすべてのメディアで機能します
埋め込みスタイル シート
タグ内で
を定義します
: ブラウザーが CSS をサポートしないようにするため

タグのペアで定義される各スタイル ルールの基本形式は次のとおりです。 value;property:value;.. .}
セレクター: スタイル ルールを定義する場合、このルールの影響を受ける Web 要素を指定する必要があります。
ルールで定義される Web 要素は、セレクター (セレクター) であり、スタイル ルールの影響を受ける Web 要素
プロパティ: 変更するスタイル名、つまり color などの CSS プロパティを指定します
値: プロパティに割り当てられる値、つまり CSS 属性値

欠点: 各ページは外部ファイルを記述する必要がありますスタイル シート
rel="styleSheet" href="test.css" type="text/css" media="screen">

type 属性と media 属性はオプションです

外部スタイル シートをバッファを使用すると、Web ページの読み込みを高速化できます

利点: Web ページをスリムにすることができます

スタイル シートをインポートします
CSS の @import ステートメントを使用して、外部スタイル シート (CSS ファイル) を他の 2 つの CSS にインポートできますファイル、およびインポートされた CSS

ファイル内のスタイル ルール定義ステートメントは、入力 CSS ファイルの一部になります。

@import ステートメントを使用して、Web ページの タグに CSS ファイルをインポートすることもできます。インポートされた CSS ファイル内の
スタイル ルール定義ステートメントは

3. スタイルルールのセレクター
HTMLセレクター: htmlタグ
クラスセレクター:
HTMLタグによって作成された各Webページ要素をいくつかのカテゴリに分割するには、このHTMLタグのclass属性を異なる値に設定する必要があります

段落 1


;

段落 1
スタイル シートでは、HTML タグのカテゴリごとにスタイル ルールを定義できます


スタイル シートでは、カテゴリのすべての HTML タグのスタイル ルールを定義できます。
< style>
.blueone(color:blue)


青色のタイトル


青色の段落
ID セレクター
ID 属性は、特定の HTML 要素を定義するために使用されます。Web ページ ファイル内の 1 つの要素のみが特定の ID 属性値を使用できます。
ID セレクターは、スタイルに特定の ID 属性値を持つ HTML 要素を選択します。ルール定義ステートメント。

terst
スタイルシートでは、id 値 yellowone を持つ HTML 要素のスタイルルール定義ステートメントは次のとおりです。