1.CSS は Cascading Style Sheets の略称で、HTML 要素の表示形式を定義するために使用されます。
a. 外部スタイル シート:
b.シート:
c. インライン スタイル シート:
属性名は style です。 例:
3. CSS のセレクター:
a: 要素セレクター;
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
: 表のヘッダーを示します。 : 表の内容を示します。 : 表の末尾を示します (順序は異なる場合がありますが、通常はこの順序です) 属性rotate(angle) 効果: マウスが上に移動すると、リストは設定した角度まで回転できます。 (鄭は時計回り、マイナスは反時計回り、180度であれば単語が反転しているのがわかります。回転ははっきりとは見えません ですが、単語の変化はわかります 変換 (変換): 回転 (回転; 回転するサイクル; 回転する; 回転する) (-20deg) ; deg: 度 (度) 1. ボックスの概念: CSSでは、独立したボックスモデルは、コンテンツ(content)、ボーダー(border)、パディング(内側のマージン)、マージン(外側のマージン)の4つで部分的に構成されています。 属性値を1つ設定する場合、上下左右の4つのパディングがすべて値になることを意味します。 3 つの属性値を設定する場合、最初のビットのパディングの値、2 番目の値は左右のパディングの値、3 番目の値はその値になります。值 4 つの属性値を設定する場合は、時計回りに右、下、左の順にパディングします。 b Margin (マージン) Margin は要素間の距離を指します Margin と Padding も同様に設定されます。 3. ボックス間の関係: 3.
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 ページ上の画像を指します)。ホバーを使用できます。
絶対位置: 親要素の相対位置は、親要素の後ろのボックスに影響します。ボックスが取り除かれ、後ろの他のボックスが埋まります 固定: 固定位置 (スクロール バーがスライドしても位置は変更されず、常にそこにあります。)
2. ボックスの位置 (静的) :
4. Inline には 2 つの値があり、1 つは を表します。もう 1 つはブロックレベルの表示を表し、もう 1 つはインライン表示を表します。また、display の値が none に設定されている場合、要素は非表示になります。この非表示は、要素がページから完全に消えることを意味します。 8.28o1.Overflow（オーバーフロー）：目に見える（デフォルト値。カットコンテンツまたはスクロールバーの増加）（非表示コンテンツの一部）表示されない。このブロック: この要素はブロックレベルの要素として表示され、その前後に変更ライナーが付きます。
inline-block: インラインブロック要素。
3.clip (cut): 2 つの値: auto : オブジェクトにはクリッピングがありません
, 0) 座標計算の 4 つのオフセット値は、どの値でも使用できます。注: オブジェクトの表示領域を取得または設定します。
このプロパティを使用するには、position の値を絶対値に設定する必要があります。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
