1. CSS でのスタイル選択 1) 内部スタイル (インライン スタイル) ; 2) インライン スタイル < /style> <p> 3) 外部スタイル </p><link type="text/css" href="URL" rel="stylesheet" /><p> 4) インポートスタイル </p>@import url();<p> </p>注: 優先インライン > > インライン > インポート (近接原理) <p> </p> 2. CSS でよく使用されるセレクター <p class="sycode"> 1) タグセレクター </p> タグ名を直接使用してタグ属性を定義します。ドキュメント全体のすべてのタグには、同じ属性が定義されます。 <p> 2) 型セレクター </p> .ClassName を使用して型の属性を定義します。 label 要素に class="" 属性が含まれる場合、その要素には定義されたスタイルがあります。 <p> 3) ID セレクター </p> #IdName を使用して ID 要素の属性を定義します。タグ要素内の ID がその定義された ID と同じである場合、タグには定義された属性があります。 <p> </p>注: 優先度 ID > タイプ > タグ <p> </p> 3. CSS の特殊セレクター (特殊な場合に使用) <p class="sycode"> サブオブジェクト セレクター </p> 構文: E1 > E2。オブジェクト E1 の下のすべてのサブオブジェクトとしてすべてを選択することとして表現されます。 <p>属性セレクター 1 </p>構文: E1[attr]。 [attr] 属性を持つすべての E1 オブジェクトを表します。 <p>属性セレクター 2: </p>構文: E1[attr=value]。属性値が value と等しい [attr] 属性を持つ E1 オブジェクトを選択します <p> </p> 4. CSS でよく使用される属性 <p class="sycode"> フォント フォント </p>1) font 属性は、フォントの全体的な制御を提供します。 (一度に複数の属性を設定できます) <p> </p> <p> </p>2) color 属性、フォントの色を変更および制御します。 <p> </p>3) font-family、テキストのフォントを変更します。 <p> </p>4)font-size、テキストのフォント サイズを定義します。 <p> </p>5)font-stretch: テキストフォントの太さを定義および変更します (normal: 標準、narrower: 細く、wide: 太字) <p> </p>6)text-decoration: テキストの変更を設定し、コンテンツを装飾します。 <p> </p> <p> Text text </p>1)vertical-align: オブジェクトのコンテンツの垂直方向の配置を設定または取得します。 <p> </p>2) text-align: オブジェクト内のテキストの配置を設定または取得します。 <p> 背景 背景 </p>1) 背景: 背景の全体的なプロパティを制御し、その複合プロパティを設定します。 <p> </p>2) 背景色: オブジェクトの背景色を設定します。 <p> </p>３）background-image: オブジェクトの背景画像を設定します <p> </p>４）background-repeat: オブジェクトの背景画像の配置を設定します。 <p> 位置決め 位置決め </p>1) 位置: オブジェクトの位置決め方法を設定します。 <p> </p>2) 上、下、左、右: オブジェクトの配置距離をピクセル単位で設定します。 <p> 境界線 </p>1) border: 境界線の全体的なプロパティを制御し、その複合プロパティを設定します <p> </p> <p> </p> 2) border-color: オブジェクトの境界線の色を設定します。 <p> </p>3) border-style: オブジェクトの境界線のスタイルを設定します。 <p> </p>4) border-width: オブジェクトの境界線の幅を設定します。 <p> リスト リスト </p>list-style: リスト全体のプロパティを制御し、その複合プロパティを設定します <p> </p> <p> レイアウト </p>1) float: このプロパティの値は、オブジェクトがフローティングするかどうか、およびどのようにフローティングするかを示します。 <p> </p>2) クリア*: 物体を浮遊させないでください。両方: 両側に物体を浮かせることはできません。 left/right: オブジェクトを左/右に浮かせることはできません。 none: 浮動小数点値はありません。 <p> </p>3)display: オブジェクトを表示するかどうか、およびどのように表示するかを設定または取得します。 <p> Margin/Padding </p>Margin: オブジェクトの外側のマージンを設定します <p> </p>Padding: オブジェクトの内側のマージンを設定します <p> </p> <p> </p> 5. 疑似セレクタ <p class="sycode"> よく使用される疑似セレクタ </p>a:link a の値を前に設定しますスタイル属性にアクセスします。 <p> </p>a:hover ホバー時のオブジェクトのスタイル プロパティを設定します。 <p> </p>a:active オブジェクトがアクティブ化されたときに、そのオブジェクトのスタイルシート プロパティを設定します。 <p> </p>a:visited リンクが訪問されたときのオブジェクトの属性を設定します。 <p> </p>a:focus オブジェクトがフォーカスになったときのスタイルシートのプロパティを設定します。 <p> </p> <p> </p>
