【CSS】CSS言語の使い方と詳細説明_完全チュートリアル(まとめ)
（一）CSSの概要：
1、CSS名詞の解釈:
CSS:Cascading Style Sheets中国語意味:積層スタイルシート.
2、CSS定義:
Webページの表示効果を定義します.
3、CSS作用:
(1)htmlコードによるスタイル定義の重複を解決することができ、
(2)ポストスタイルコードの保守性が向上し、
(3)ウェブページの表示効果機能を強化した.
4、CSSの簡単な説明:
CSSはWebコンテンツと表示スタイルを分離し、表示機能を向上させた.
(二)CSSとHTMLのウェブページでの結合方式:
(1)styleプロパティ(2)styleラベル(3)インポート(4)リンク
例:☆1、style属性方式
<p style="background-color:#FF0000; color:#FFFFFF">
p 。
p>☆2、スタイルタグ方式
<style type=”text/css”>
p { color:#FF0000;}
style>☆3、導入方式
<style type="text/css">
@import url(myDiv.css)
style>
☆4、リンク方式
"stylesheet" type="text/css" href="css_3.css" media="screen" />
注意して、このいくつかの方式はふだん使うのがとても普遍的で、すべての方式はすべて自分の特徴があります.
（三）CSS文法：
CSSルールは、セレクタと1つ以上の宣言の2つの主要な部分で構成されています.
selector {declaration1; declaration2; … declarationN }
セレクタは通常、スタイルを変更する必要があるHTML要素です.
各宣言は、属性と値で構成されます.
プロパティ(property)は、設定するスタイルプロパティ(style attribute)です.各プロパティには値があります.属性と値はコロンで区切られます.
selector {property: value}
(四)セレクタ:
セレクタの分類:
(1)htmlタグ名セレクタ
(2)classクラスセレクタ
(3)idセレクタ
【注意】:
各ラベルにはclassプロパティとidプロパティが定義されています.ラベルを識別するために使用され、ラベルの操作を容易にします.
定義では、JavaScriptでよく使用されるため、複数のラベルのclassプロパティ値は同じでもよく、id値は一意である必要があります.
セレクタの優先度:
ラベル名セレクタ
(五)拡張セレクタ:
☆関連セレクタ:
ラベルはネストできます.同じラベルの異なるラベルに異なるスタイルを表示するには、このセレクタを使用します.例:
p { color:#00FF00;}
p b { color:#FF000;}
<p>P <b> b> p>
<p>P p>
☆コンビネーションセレクタ:
を選択して設定できます.たとえば、「divの
.cc, div b{/* */
background-color:#0000ff;
color:#fff;
}
☆擬似要素セレクタ:
実はhtmlで予め定義されているセレクタの中には、偽要素と呼ばれています.
書式:ラベル名:擬似要素.クラス名ラベル署名.クラス名:擬似要素.
例:
ハイパーリンクaラベルの疑似要素:
a:linkハイパーリンクがクリックされていない状態.a:visitedがアクセスされた状態.a:hoverカーソルがハイパーリンクに移動した状態(クリックしていません).a:activeハイパーリンクをクリックしたときの状態.
段落pラベルの擬似要素:
p:first-line段落の最初の行のテキスト.p:first-letter段落の最初のアルファベット.
カスタム擬似要素:
:focusフォーカス要素