CSS の基本 {プロパティ: 値;}

1.CSS は Cascading Style Sheets の略称で、HTML 要素の表示形式を定義するために使用されます。
a. 外部スタイル シート:

b.シート:

c. インライン スタイル シート:
属性名は style です。 例:

3. CSS のセレクター:
a: 要素セレクター;

b: クラスセレクター; .class name { 属性: 値 } ドットがあることに注意してください。

c: ID セレクター; #id name { 属性: 値 } # があることに注意してください。ID セレクターは 1 回のみ参照できますが、クラス セレクターは複数回参照できます。
D：擬似クラスセレクター。直接接続された 2 つのセレクターで構成され、その結果、それぞれの要素範囲の交差部分が選択されます。
最初のものはタグ セレクター、2 つ目はカテゴリ セレクターまたは ID セレクターである必要があります。これら 2 つのセレクターの間にスペースを入れることはできません。 ️

b: 結合セレクター:
c: 子孫セレクター: (継承された最も近い) 子孫セレクターの影響は、要素の「直接の子孫」に限定されず、その「すべてのレベルの子孫」にも影響します
5. スタイル シートのカスケードを理解します。
小さいレベルから大きいレベルまでの優先順位は次のとおりです。
外部スタイル シートusing ' s ' s
through ' using ' s ' through ‐ ‐ ‐ ‐‐‐‐ ; -family: "Heilong";
フォントの傾き効果を設定します font-style ：Italic；
using font-weight: 100 (範囲 100-900、フォントが大きくなるほど太くなります)

英語の文字、リーサルトランジションテキストを設定します-Transform: Capitalize; (単語の最初の文字のクラス)
コントロールテキストのフォントサイズを設定します: .. px /..%/ .. em
テキストなし/下線/ラインスルーの装飾効果を設定します(取り消し線)/上線(上の行);

4. 段落スタイルの設定 段落の最初の行のインデントを設定します text-indent: ..em (..標準文字サイズ距離)/..px ；
‐ ' s ' s ‐ ‐ ‐ ‐ 単語間の距離を設定します ‐ ‐ ‐ 文字間隔 (文字): ..px; テキストの水平位置の制御 text-align : LEFT/ RIGHT (右揃え)/center (中央)/Justify :...;(表のセル内の要素にのみ機能します)







CSS の基本属性 - 画像スタイル
1. 画像の境界線を設定します: border-width: (color) ; border-style: (linear) ; 異なる境界線を異なるスタイルで設定できます。 : border-left-style、border-top-width .... 実線
2. 画像のスケーリング: 幅、高さ (パーセント、ピクセル)
3. テキストの折り返し: フローティング (フローティング)
配置画像とテキストの水平配置 text-align:

<br/>

垂直整列vertical-align:
4,.背景色と画像を設定します。background-color:background-image:url(address)background-repeat: を使用してタイリングを制御できます。repeat: 水平および垂直タイリング、デフォルト値。ノーリピート時：フラットではありません。 Xリピート-X：横方向に重ねます。 Yリピート-Y：縦方向に重ねます。
5. 背景画像の位置を設定します。background-position: (2 つの値を設定できます。例: 左上)
6. 背景画像の固定位置を設定します。background-attachment: fixed; 画像のスクロール: スクロール
list-style: none; 位置決め (position7 を参照)
1. 絶対位置決め: (相対位置決めに設定された要素フレームは、一定の距離だけオフセットされます。要素は、位置決め前の形状を保持しており、元の位置はそのままです。保持されています。）要素の位置は、最も近い位置にある要素に関連しています。間隔 use using using using through through through out through out through out through through off ‐ ‐ ‐ ‐‐ ‐‐ ‐‐‐ and � to

: 表のヘッダーを示します。 : 表の内容を示します。 : 表の末尾を示します (順序は異なる場合がありますが、通常はこの順序です)

2. マウスが通過したときの表のスタイルを設定します。その上に: a:hover
3. CSS とフォーム: a: テキストのようなボタンを作成します
透明 (透明) 背景を透明に設定します
border:0px; 例:
b: カラフルなドロップダウン メニューを選択しますオプション
c: 下線のみの入力ボックスを作成します border: 0px/none;
border-bottom: 1px (太さ) 破線 (線形) #000000 (色);
補足: 1. 表示: ブロック (行レベルの要素はブロックレベルの要素に置き換えられます) / インライン (ブロックレベルの要素が行レベルの要素に置き換えられます)
Device:: NTH-OF-TYPE (N) 親要素の nly 要素の n n 要素の各要素に一致するセレクター.
N には、数値、キーワード、または数式を指定できます。



CSS を使用してリンクとナビゲーション メニューを設定する (les9) 1. ハイパーリンクのスタイルを設定します: HTML で
a:訪問済み（訪問済み）。 a:link{ } a:active{ } (これらを設定できます) 背景: ;
カラー: ; ピクセル
3. 蛍光メニューを作成します: 順序なしリスト、
、a:hover を適用します (les9 を確認してください)。
4. マウス (カーソル) ポインターを制御します。 {cursor: } (プロパティの下の他の CSS 2.0 中国語マニュアルを確認してください)。
5. プロジェクトリスト形式を設定します: 順序付きリスト



と順序なしリスト

を使用して設定できます。

6. 単純なナビゲーション メニューを作成します:

a: 垂直に配置されたメニュー

list-style-type:none は多くの場合使用され、その機能は順序付きリストまたは順序なしリストの番号を削除することです。または前に点があります。

b: 水平メニュー

水平と垂直の変換を実現するには、float:left を設定して幅をキャンセルするだけです。

7. 画像反転効果を設定します: (マウス ポインターが通過すると別の画像に変更される Web ページ上の画像を指します)。ホバーを使用できます。
• 
  

• 属性rotate(angle)




• 効果: マウスが上に移動すると、リストは設定した角度まで回転できます。 (鄭は時計回り、マイナスは反時計回り、180度であれば単語が反転しているのがわかります。回転ははっきりとは見えません




• ですが、単語の変化はわかります




• 変換 (変換): 回転 (回転; 回転するサイクル; 回転する; 回転する) (-20deg) ; deg: 度 (度)






• ボックスモデル (レ 10)




• 1. ボックスの概念: CSSでは、独立したボックスモデルは、コンテンツ(content)、ボーダー(border)、パディング(内側のマージン)、マージン(外側のマージン)の4つで部分的に構成されています。




• ボックスが占める実際の幅または高さは、「コンテンツ + 内側のマージン + 境界線 + 外側のマージン」で構成されます。



• 2. 境界線、内側のマージン、および外側のマージンを設定します:



• a 内側のマージン (パディング) パディング属性は、次のように 1、2、3、および 4 の属性値を設定できます。

  属性値を1つ設定する場合、上下左右の4つのパディングがすべて値になることを意味します。




• 3 つの属性値を設定する場合、最初のビットのパディングの値、2 番目の値は左右のパディングの値、3 番目の値はその値になります。值 4 つの属性値を設定する場合は、時計回りに右、下、左の順にパディングします。






• b Margin (マージン) Margin は要素間の距離を指します Margin と Padding も同様に設定されます。




• 3. ボックス間の関係:




• 3.




• 3.
タグとタグ: p は単なるブロックコンテナですタグ、つまり

• と

• はコンテナに相当し、段落、タイトル、表、画像、さらには章などのさまざまな HTML 要素を収容できます。


• Span はインライン要素であるため、折り返されません。


• 4. 標準フローにおけるボックスの配置原則:インライン要素間の水平マージン: 2 つのインライン要素が隣接する場合、それらの間の距離は、最初の要素の右マージンに 2 つの要素の最初のマージン左を加えたものになります。 。


• ブロックレベル要素間の垂直方向のマージン: 2 つのブロックレベル要素が垂直方向に配置される場合、状況は異なります。 2 つのブロックレベル要素間の距離は、margin-bottom と margin-top の合計ではなく、2 つのうちの大きい方になります。


• {背景の位置:background-position:center; 背景位置プロパティの値を指定するには、さまざまな方法があります。まず、
  
• では、いくつかのキーワード (上、下、左、右、中央) を使用できます。通常、これらのキーワードは
  
• のペアで表示されますが、常にそうとは限りません。 100px や 5cm などの長さの値を使用することもでき、最後にパーセント値を使用することもできます。 )
  
  
• CSSボックスのフローティングと配置
  
• 1. 標準フローでは、ブロックレベル要素は自動的に水平方向にストレッチされます。縦に並びません。
  
• デフォルトは none です。float プロパティの値が left または right に設定されている場合、要素は親要素の左側または右側に移動します。Clear プロパティに加えて、は「LEFT」「Right」に設定できますが、「 Both」に設定することもでき、左右同時に受ける衝撃を同時に解除することができます。
  
  
• 元の位置から新しい位置に到達他のボックスに影響を与えることなく、指定された距離だけオフセットします。)


絶対位置: 親要素の相対位置は、親要素の後ろのボックスに影響します。ボックスが取り除かれ、後ろの他のボックスが埋まります 固定: 固定位置 (スクロール バーがスライドしても位置は変更されず、常にそこにあります。)
• 
  2. ボックスの位置 (静的) :
• ボックスの位置 (相対) - 左、右、上、下の 4 つの属性は、位置属性が絶対、相対、または固定に設定されている場合にのみ有効です。 In-3.z-index: z-index 属性は、位置決め時に重なるブロックの上下の位置を調整するために使用され、Z-Index 値の大きい値の要素が小さい値よりも上に位置します。 (デフォルトの z-index 値は 0 です。Z-Index 値の 2 つのブロックが同じである場合、


• は元の高カバレッジと低カバレッジの関係を維持します。)


4. Inline には 2 つの値があり、1 つは を表します。もう 1 つはブロックレベルの表示を表し、もう 1 つはインライン表示を表します。また、display の値が none に設定されている場合、要素は非表示になります。この非表示は、要素がページから完全に消えることを意味します。 8.28o1.Overflow（オーバーフロー）：目に見える（デフォルト値。カットコンテンツまたはスクロールバーの増加）（非表示コンテンツの一部）表示されない。このブロック: この要素はブロックレベルの要素として表示され、その前後に変更ライナーが付きます。
• 
  inline-block: インラインブロック要素。
• 
  3.clip (cut): 2 つの値: auto : オブジェクトにはクリッピングがありません
• 
  , 0) 座標計算の 4 つのオフセット値は、どの値でも使用できます。注: オブジェクトの表示領域を取得または設定します。
• 
  このプロパティを使用するには、position の値を絶対値に設定する必要があります。
  
  
• 
  
• オーバーフロー: 非表示 内側のボックス(または一番上のボックス)と同じ高さに自動的に変更する機能を持つコンポーネントです。必ず併用してください。


• 2. ポジション（位置） ここでの左とは、左からどのくらい離れているかを指します。トップとは、トップからの距離を指します。 ️相対位置: (位置: 相対;) 参照点は、元の位置の左上隅です。移動後は元の位置が占有されます。


• 絶対位置: (position:Absolute;) その参照点は:位置を持つ親要素の左上隅です。移動後は元の位置が空になります。


• 3. クリアはクリア自体にのみ影響します。これが意味するのは、移動したいピースにクリアを使用するということです。通常は、クリア: 左、クリア: 両方を使用します。 bivivilibility：非表示;


• display: inline; この要素は、要素の前後に改行を入れずに、インライン要素として表示されます。


• display: block; この要素は、この要素の前後に改行を入れて、ブロックレベルの要素として表示されます。


• 5. iframe を使用してフレーム構造を実装します。