CSS は、HTML (標準汎用マークアップ言語のアプリケーション) や XML (標準汎用マークアップ言語のサブセット) などのファイル スタイルを表現するために使用されるコンピュータ言語です。
CSS は Web ページを静的に変更できるだけでなく、さまざまなスクリプト言語と連携して、Web ページのさまざまな要素を動的にフォーマットすることもできます。
CSS は、Web ページ内の要素の位置のレイアウトをピクセルレベルで正確に制御でき、ほぼすべてのフォント サイズとスタイルをサポートし、Web ページのオブジェクトとモデル スタイルを編集する機能を備えています。さらに詳しく学習したい場合は、Baidu で「php 中国語 Web サイト CSS ビデオ チュートリアル」を検索し、オンラインで無料で学習してください。
1. 共通の属性
name: 名前、繰り返し可能、同じにすることも可能、<p class="one two"></p> などの CSS に使用されるクラス名。繰り返しは一般に JavaScript で使用されます。命名規則は他の言語のラベル命名規則と同じです。
title: <img src="1.jpg" /title="これは写真です">;/ などのタグに追加できるタイトル。
2.タグ関係
子孫関係：親子関係（続柄を含む）。
兄弟関係：同胞関係。
3.CSS カスケード スタイル シート
CSS コメント: /コメントの内容はプログラマが見るためにここに書かれており、ページには表示されません/;
CSS 文法規則: すべての記号は英語の入力方法を使用して小文字で入力する必要があり、各属性ステートメントはセミコロンで終了し、属性値はピクセル単位 (px) 形式にする必要があります。 : 属性: 属性値 ;
4. CSSの導入方法
インライン導入: タグ内にスタイルを追加する導入方法 形式: <tag style="background:red; font-size:20px;">内容</tag> 注: コードの保守性は非常に悪い、CSS コードです。と html 構造は分離されていません。影響範囲は現在のタグ内にあります。Web ページの先頭に <style type="text/css">CSS スタイル</style> を追加します。コードの保守性は比較的低く、CSS コードと HTML 構造の分離が実現されており、影響範囲は現在のページのみです。
外部リンクの導入: Web ページの外部に xx.css ファイルを作成し、Web ページのヘッダーで <link rel="stylesheet" type="text/css" href="xx.css"> を使用します。コードは保守性が高く、CSS コードは HTML 構造から完全に分離されており、Web サイト全体で CSS ファイルを導入するすべての Web ページに影響します。
5.CSS コア構文:
構造形式: セレクター {属性: 属性値; 属性: 属性値;...}; 例: p{background:red;color:gray;size:20px;};セレクター: ページ要素を選択するためのツール。
中括弧: スタイルの内容は中括弧内に記述されます。
6. セレクター
基本セレクター:
ユニバーサル セレクター: Web ページのデフォルト スタイルを初期化するために使用され、スタイル シートの先頭に記述されます。形式: *{padding:0;margin:0;}; 指定されたラベルにスタイルを追加します。 {color:green; }; クラスセレクター: クラスセレクターのスタイルを指定します。 注: クラス名は、class="one"; のようにタグで定義されます。いくつかのブロックのコンテンツ スタイルが同じ場合は、それらに同じスタイルを与えるだけです。
ID セレクター: 一意の識別子、繰り返し不可; 形式: #id name{backgound-image:url(1.jpg);} 注: ID 名はタグ id="one" で定義されます。 , 何回 各ブロックのコンテンツスタイルが同じ場合、複数のブロックの ID 名は異なる必要があります;;
ID とクラスの違い: 前の点に注意してください。ID は DOM ノードを一意に決定できなければなりません。記事全体で ID セレクターを使用する場合、2 つの DOM ノード スタイルがまったく同じであっても、ノード スタイルを後で保守する場合は、両方の場所でコードを保守する必要があります。 ！ ！メンテナンスコストが大幅に増加します。
疑似クラス セレクター: シーケンシャル LoVe HAte 原則。ジャンプすることはできますが、順序は変更できません。リンク ステータス (リンク)、訪問済みステータス (訪問済み)、アクティブ ステータス (ホバー)、クリック ステータス (アクティブ) です。
ポイント描画クラス: a:link{color: yellow;} a:visited{color:blue;} a:hover{color:red;} a:active{color:pin;} フォーカス取得時のスタイル a:focus{};注: テキスト属性、背景色、画像を属性に追加できます。{} と a:link{} は同じ効果をもたらします。li:link{color: yellow;};li:visited{color:blue ;} li:hover{color:red;} li:active{color:pin;};注: テキスト シリーズの属性、背景色、画像を属性に追加できます。
複合セレクター:
グループ セレクター (ユニオン セレクター、複数セレクター): 複数の要素に同じスタイルを追加するために使用されます。例: .one、#one、a、span{color:red;font-size:14px;} はクラス 1、#one を意味します。 、a タグ、span タグには共通の属性があります。子孫セレクター: サブクラス要素に属性を追加します。例: .one a{text-decoration:none;} は、クラス 1 の子孫の a タグによって変更されたコンテンツを意味します。子要素セレクター (指定されたセレクター): 指定された子要素に属性を追加します。例: #one>p{color:red;}; id セレクター one プロパティの子の p タグにあるコンテンツを追加することを意味します。
隣接要素セレクター:
1. 2 つの隣接する兄弟セレクターは、それ自体に属性を追加しませんが、次の兄弟に属性を追加するだけです。 2.one~p{background:green};親クラスがある場合、1 つのセレクターの後のすべての p タグ要素に属性を追加します。
属性セレクター:
1. 属性を使用して要素に属性を追加します。 img[id]{background:red;} ID を使用して要素に属性を追加します。
指定した属性値を持つ要素に属性を追加します。 img[src="b.jpg"]{background:red;}b.jpg を持つ要素に属性を追加します。
3. 指定された文字で始まる要素に属性を追加します。 img[src^="b"]{background:red;} b で始まるすべての要素に属性を追加します。 4. セレクターの末尾に指定された属性値が含まれます。 : img[src$="b"]{background:red;}b で終わるすべての要素に属性を追加します。 5. セレクターには、指定された属性値を含む要素が含まれます: img[src*="b" ]{background:red ;} b を含むすべての要素に属性を追加します。
7. 要素の包含（表示方法の分類）
ブロック要素: 植字に使用される典型的な構造には、p、p、li、h1、dt が含まれます。
要素は（幅とは独立して）独自の行に表示されます。幅と高さは設定できます。
ブロックレベルの要素がネストされている場合、子要素の幅が設定されていない場合、子要素の幅は親要素の幅になります。
インライン要素: スタイルを追加するために使用されます。span、a、font、strong、注: インライン要素に上下のマージンとパディングを指定しないでください。上部と下部は無視され、左側と右側は機能します (通常は使用されません)。 );
要素は 1 行に表示されます。
幅と高さを直接設定することはできません。
インラインブロック要素: 画像、入力。
要素は 1 行に表示されます。
幅と高さを設定できます。
変換関係: inline には inline が含まれ、ブロック要素にはブロック要素が含まれ、ブロック要素には inline 要素が含まれる可能性があります。
表示: inline は要素をインライン要素に変換します 表示: inline-block は要素をインライン ブロック要素に変換します
表示：ブロック 要素をブロック要素に変換します
8.CSSプロパティ
フォント関連のプロパティ:
font-size: フォント サイズ、ピクセル数、px; font-weight: フォントの太さ、太字 (700 ～ 900)、標準、100 ～ 900 を書くことができます。 : フォント、Microsoft YaHei、HeiTi;
属性の連結: font: font-style font-weight font-size/line-height font-family; 注: フォント属性の連結には、font-size と font-family を含める必要があります (他の属性は省略できます)。 - 家族の順序は変更できません。
文章：
color: カラー; text-indent: インデント [単位は em]; text-decoration: テキスト行 [下線、上線、取り消し線、なし] 単語間の距離 ;letter-spacing: 文字キー距離; text-align: 水平方向の配置 [デフォルトは左、中央、右];
line-height: 行の高さ、テキストが配置されている行の高さ [行の高さが要素の高さと等しい場合、テキストは垂直方向の中央に配置されます];
サイズ: ブロック要素のサイズです。インライン要素には幅と高さを設定できません。設定したい場合は変換する必要があります。
幅: 幅;
高さ: 高さ;
リスト ul および li の属性: list-style-type は ul に追加できますが、li に追加する必要はありません。
list-style-type:none; 記号、四角形、丸、円盤を削除します。 画像を追加した後にそれらを記述する必要はありません。 list-style-type:none;list-style-image:url(1.jpg)画像の境界線: 1px の実線の赤で全体の境界線を設定します。
list-style-position:outside スタイル画像の配置: 内側、外側;
背景：
背景色background-color; 背景画像background-image 注: 背景画像を設定するときは、必ず背景タイルの幅と高さを設定してください。 x | (水平タイリング) 背景位置 背景位置: 特定の値を設定する場合は、 left| を設定する場合は順序は区別されません。数値、最初の 1 つの値は水平方向を表し、2 番目の値は垂直方向を表します。前面の背景画像の設定形式を背景画像に設定します。背景を固定するかどうかを設定します。background-attachment: スクロール (デフォルト値) 固定。画像は修正されました）;
属性共同書き込み: 数量や順序に制限なし:background:url("") red no-peat 30px 40px;
line-height: ボックスモデル: Web ページのレイアウトに使用され、幅を設定する必要があります
ボックスの境界線のプロパティ: コンポーネント:
境界線の幅と高さ: 境界線の幅: 1px; 境界線の色: 境界線のスタイル: 実線/点線/点線/なし; 境界線: 1px ; 注: 属性を一緒に記述する場合、順序の制限はありません。境界線の色を記述する必要はありません。また、境界線の幅を個別に記述する必要はありません。境界線: 内側のマージン間の距離を設定します。コンテンツとボックスの境界線
マージン: ボックス間の距離を設定します。
p{幅:300px;高さ:200px;border-top:1px ソリッドレッド;border-left:1px ソリッドレッド;border-right:1px ソリッドレッド;border-bottom:1px ソリッドレッド;}
プロパティを個別に設定するには:
ボーダートップカラー:赤;ボーダートップスタイル:ソリッド;ボーダートップ幅:1px;
ボックスサイズ:
ボックス サイズが影響する場所: 継承されたボックスは親ボックスの幅の範囲内にあり、パディング値はボックス サイズに影響しません。幅 = コンテンツの幅 + 左右の境界線 + 左右のパディング。
境界線はボックスのサイズに影響を与える可能性があり、パディングはボックスのサイズに影響を与える可能性があります。
将来、ページ ボックス レイアウトを実装するときに、ボックスに内側の余白が設定されている場合は、対応する値をコンテンツの幅または高さから減算する必要があります。
マージン: ボックス間の距離を設定します。
ボックスを中央に配置: 属性の共同記述:
標準フローの下のボックスは中央に配置されます: margin: 0px auto; 位置決めされたボックスは中央に配置されます: 最初に親ボックスの半分を取り、次にそのボックス自体の幅の半分に戻ります。 Margin: 10px、上、右、下、左。 10pxマージン: 10px、20px、上、下、10px、左右、20pxマージン: 10px 20px 30px 上10px、左右20px、下30px
マージン: 10px 20px 30px 40px 右上下左
知らせ：
属性共同執筆：
パディング: 10px; 上、右、下、左の間の距離は 10px パディング: 10px 20px; 上と下 10px 左と右 20px; パディング: 10px 20px 左と右 20px 下 30px;
パディング: 10px 20px 30px 40px;
2 つのボックスが垂直に表示される場合、マージンは設定された最大値の影響を受けます (マージンを結合する最初のケース) 2 つのボックスが水平に表示される場合、マージンが重なってマージンが崩れます (難しい問題)。次の手順で解決します。
パディング: コンテンツとボックスの境界線の間の距離を設定します。
親ボックスの枠線を設定する
親ボックスに overflow:hidden を設定します。
余白を明確にする:
方法 1: *{パディング: 0; マージン: 0;}
方法 2: Body,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,p,span{margin:0px;padding:0px;}
9.CSSの3大特徴
継承：
継承可能：color、text-align、text-indent、font-size、font-weight、font-family 非継承：text-decoration、border、display、margin、float、padding 継承が発生する前提はタグ間です。ネストされた関係では、テキストの色を継承できます。テキスト関連の属性も継承できます。
特別な機能:
親要素の文字色は継承できません（カスケード）
<h1></h1> タイトルタグは親要素からテキストサイズを継承できません
オーバーラップ: オーバーラップとは、スタイルの範囲を指します。
スタイルのカスケードの性質は、スタイルが呼び出される順序とは関係ありませんが、スタイルが定義される順序に関係します。
カスケードが発生する前提: スタイルの競合
優先度：
重み付け: インライン導入 (1000) > id (100) > クラス (10) > ラベル (1) > 一般 (0) 値が大きいほど優先度が高くなります。
ウェイトは同じで、次のスタイルが機能します。
10. 補足知識メモ
フォーム最適化の書き込み: <lable for="one">ユーザー名:</lable><input type="text" id="one">フォーマット リスト アイコン: list-style: noneフォーム マージ: border-collapse:collapse (設定テーブル境界線のマージ、テーブルに適用可能) Bfc "フォーマットコンテキスト" オーバーフロー:
表示:デフォルト値。コンテンツはトリミングされず、要素ボックスの外側に表示されます。 非表示: 画像の位置が変更されると、親要素の位置も変更されます。親要素は親要素の位置を変更できます。要素の位置は変更されません。 スクロール: コンテンツはトリミングされますが、ブラウザーには残りのコンテンツを表示するためのスクロール バーが表示されます。
auto: コンテンツがトリミングされている場合、ブラウザーには残りのコンテンツを表示するためのスクロール バーが表示されます。
11. 標準フロー:ブロックレベルの要素が 1 行で表示されます。標準フロー表示モード: 要素のデフォルトの表示モードです。
12. フローティング:フローティングは、ナビゲーション バーと Web ページ レイアウトの作成に使用されるテキストと画像の折り返しの問題を解決するために使用されます。
使用法: Float:left| 機能: 任意に浮動します。
フローティングに設定された要素は元の位置 (スクリプト外) を占有しないため、ブロック レベルの要素を 1 行のフロートとして表示でき、インライン ブロック要素に変換できます。
モード変換プロセス中は、可能であればディスプレイを使用してください。
クリアフロート:
定義: float のクリアは float の削除を意味するわけではありません。float のクリアは、float のクリアによる影響を指します。子要素が float に設定され、親要素に高さがないと、ページ レイアウトが混乱します。 ; この場合、フロートをクリアします。
フローティングクリアメソッド: [x] 注: クリアする要素の後に空のブロック要素(<p></p>、タグ)を追加し、追加した空要素にclear:both left |rightを追加します。
13. 配置:方向: 左、右、上、下 (詳細については、PHP 中国語 Web サイトの CSS チュートリアル チャンネルを参照してください)
静的配置: 静的配置は、要素の標準フローの表示方法です。
絶対配置: 配置された要素の親要素または祖先要素を基準にして配置します。親要素と祖先要素が存在しない場合は、元の位置を占めません。
単一要素に絶対位置を設定する場合、ブラウザ（本文）の左上隅を基準に位置が設定されます。ボックスがネストされている場合、親ボックスが位置を設定しない場合、子ボックスはブラウザの左上隅に基づいて位置を設定します。ボックスがネストされている場合、親ボックスが配置されている場合、子ボックスは親ボックスの左上隅に基づいて配置されます。ボックスに絶対位置が設定されており、ボックスはいかなる位置も占有しません (オフスクリプト) インライン要素に絶対位置が設定された後、要素はインライン ブロック要素に変換されます。
注: 要素を絶対位置に設定した後は、特定の方向名を使用して要素の位置を任意に設定できます。
相対位置: 要素の元の位置を基準として、前の位置を占めます。
要素が相対位置に設定されると、要素は自身の位置を基準として元の位置を占めます。 相対位置の設定は要素のモード変換を実行できません。
子は親と同じ位置にある必要があります (子要素は絶対配置に設定され、親要素は相対配置に設定されます)。
固定位置: 安定した位置全体を基準にします。固定位置は位置を占めません (ラベル外)。位置:固定。
階層の問題:
階層的な問題が発生するのは、配置が設定されている場合のみです。兄弟要素間には、HTML 文書構造がどの階層にあるのか、どの階層が最外層 (上位階層) にあるのか、およびその他の配置が存在します。
Z-index: レベルを設定します。位置決めがある限り、値は位置決め設定が使用されます。
14. CSS Elf Rabbit: 透明ドキュメントを選択
ブラウザの座標系の点は正しい方向を正の方向とし、CSS スプライトは Web ページの背景画像を処理する方法であり、スプライトも背景画像の一種です。
スプライトの使用
fw を使用する場合は、スプライト マップをオープン モードで開く必要があります。スプライト マップを背景画像として使用する場合は、スプライト マップ内の要素の座標を測定するために、background-position と組み合わせて使用することがよくあります。セレクタ。
または、ショートカット文字「k」を使用します。
15. CSS の可視性
overflow: hidden 余分な部分を非表示にします。 display: none 要素を直接非表示にします。 display: block 要素を表示します (js とより一致します)。 Visibility: hidden 要素を非表示にします。
可視性: 要素を非表示にし、元の位置を占めます。
16. 画像とテキストを中央に配置する
すべての inlne-block 要素にはデフォルトのvertical-align:baselineがあります。
vertical-align:middle 垂直配置;vertical-align と inline-block の方がよく一致します。
17. 標準外の流れを避ける
Web ページのレイアウトのプロセスでは、可能であれば標準フローを使用してください。標準フローではフローティングを解決できません。
margin-left/margin-right を使用し、値を auto に設定すると、ボックスが外側の 2 辺に自動的に押し込まれます。
18. ラベル封入仕様
p には、標準ストリームの任意のタグを含めることができます。 p タグには、p、title タグ、リスト タグを含めることはできません。 title note には、他のタグを含めることができます。
インライン要素には他のタグを含めないでください
19. 幅と高さの設定の概要
フローティング後、要素は幅と高さを設定できます。絶対配置後、要素は幅と高さを設定できます。
位置を固定した後、要素は幅と高さを設定できます
20. CSS3 へのアップグレード
CSS3 および CSS2: CSS は強力であり、コードは簡潔です
疑似クラスセレクター:
最初の子要素: first-child 最良の要素: last-child n 番目の子要素: nth-child (n); n は子要素の奇数です: nth-child (odd) または (nth-child() 2n+1))
偶数番号の要素: nth-child(even) または (nth-child(2n))
text-shadow: text-shadow: 水平、垂直、シャドウ box-shadow: box-shaadow: 水平、垂直、シャドウ
背景: 背景