Web フロントエンド開発の基本的な CSS スタイルのまとめ

色と単位の使用

1. 色
   • 色を示すには、色の名前を使用します。例: 赤
   • デモンストレーションを表すには 16 進数を使用します (例: #FF0000)。
   色を表すにはRGB数値を使用します。RGB（赤、緑、青）、各値は0〜255の範囲です
   • 通常、色を表すには16進数が使用されます
     
ユニット
2. px: ピクセル、解像度設定に関連します。
   % はブラウザのパーセンテージを基準にしています。幅は設定できますが、高さは設定できません。
テキストスタイル(テキスト)

色: テキストの色を設定します

1. text-align: テキストの配置を設定します
2. センター
   • 左
   • そうです
   文字間隔: 単語間隔/文字間隔
3. word-spacing: 単語の間隔、スペースがある場合に設定します。中国語のスペースを参照してください。
4. line-height: 行の高さ(2行目の行の高さ=1行目の下から3行目の上)
5. text-indent: 通常は 30px で 2 個
6. text-decoration: テキストの装飾
7. 下線:下線
   • 上線: 上線
   • ラインスルー: 取り消し線
   • 点滅フラッシュ（使用できません）
   text-transform: 大文字と小文字の変換
8. 大文字: すべて大文字
   • 小文字: すべて小文字
   • 大文字にする: 各単語は大文字で始まります
   text-shadow: テキストの影を作成します (水平オフセット px、垂直オフセット px、ぼかしレベル px、影の色)。ぼかしレベル px 値が高いほど、よりぼやけます。
9. フォントを設定:
font-style: フォント スタイル斜体、斜体

font-size: フォントサイズを設定します
font-weight: フォントの太さを設定します。太字が最も太くなります
font-family: 文字フォント、楷書、公用書体などを設定します。
フォント省略属性: スタイルのウェイト サイズファミリー (スペース) の順序は、通常、省略属性を使用した後、フォント属性の後に文字間隔を置く必要があります。そうしないと上書きされます。
枠線と背景

要素に境界線を適用する

border-width: ボーダーの幅

1. border-style: ボーダースタイル
   なしなしボーダー
   • 一点鎖線
   実線
   • 二重二重線
     溝溝線
     点線点線ボーダー
     インセットアウトセット凸
     リッジリッジボーダー
     
     bolder-color: 境界線の色
     
     省略形ボーダー:幅スタイルの色を順不同
   • 特定の境界線を個別に設定する
   ボーダーの上/下/左/右の幅/スタイル/色
2. 省略形: border-top{幅、スタイル、色}
   • 丸い境界線を適用します（x半径、y半径、xyが同じ場合は1つだけ書きます）
   ボーダー上/左下/右半径
3. 略称: border-radius
   • 要素の背景を設定する
   マージン右: 0px; パディング上: 0px; パディング右: 0px; リストスタイル: disc;">background-image:{url("")} 背景画像アドレス
4. background-repeat: 背景画像の繰り返し方法、通常は繰り返しなし
   • background-size: 背景画像のサイズ
   • background-position: 背景画像の位置
   • 略称:背景:カラー画像のリピート位置、サイズを書かないと競合します
   • ボックスシャドウを作成する
   box-shadow: 水平オフセット 垂直オフセット ブラー値 シャドウ拡張半径 シャドウカラー 10px 10px 5px 0px red;
5. 複数の影を追加するには、最初の影の後にカンマを付け、最初の影を整数に設定し、2 番目の影を負の数に設定します
   。
   • アウトラインを設定する
   ボーダーとアウトラインの違い: アウトラインはページに属さず、アウトラインの適用によってページのレイアウトは調整されません
6. 境界線は実際のサイズを占めますが、輪郭はそうではありません
   • ホバーが設定されている場合、アウトラインが変更された div は移動されませんが、境界線が変更された div は移動されます
   • outline-color: 輪郭の色
   • アウトラインスタイル: アウトラインスタイル
   • outline-width: アウトラインの幅
   • outline-offset: 要素の境界線からのアウトラインのオフセット
   • 略称：アウトライン
   その他のスタイル (テーブル、リスト、透明度、カーソル)

フォーム

border-collapse 隣接セルの枠線処理、テーブルのマージ=collapse

1. border-spacing: 隣接するセル間の間隔
   • キャプション側: タイトルの位置
   • empty-cells: 空のセルを表示するかどうか
   リスト
2. list-style-style: リストの先頭のマークのスタイル、丸いドット、四角いドットなど。

   list-style-image: リスト画像タグ

   省略形: list-style:none は、通常ナビゲーションに使用されるリストのすべての属性をキャンセルします
   水平ナビゲーション: li{display:inline}
   • 透明性
不透明度: 透明度を設定します(0〜1の値)

3. • カーソルの形状
cursor: カーソルを特定のdivに置いたときのカーソルの形状を設定し、待機状態や手の形状などを設定します。

4. ボックスモデル
   ボックスモデルは要素、パディング、ボーダー、マージンに分割されています

   1. 一定のサイズの要素を設定します

   リーリー

   2.パディングを設定する

   • パディング-上/下/右/左
   • パディング: 略語

   3. 余白（境界線からブラウザの端または次のボックスまでの距離）を設定します

   • 余白-上/下/左/右
   • マージン: 省略形

   4. 最小サイズと最大サイズを設定します (幅をパーセンテージに設定した場合、ブラウザーを拡大または縮小した後、または大画面または小画面モニターに変更した後、要素の位置がずれたりはみ出したりするのを防ぎます)

   • min-width: 最小値は 2 つの div の幅の合計です
   • max-width: 最大値

   5. 要素コンテンツのオーバーフローを処理する

   • overflow-x/y: x または y 軸のオーバーフロー
   • オーバーフロー: 略称: スクロールはスクロールバーを設定します(オーバーフロー処理方法)

   6.要素タイプの変更

   1).要素タイプは次のように分類されます:

   • インライン要素: 幅と高さはページ上で設定できず、1 行、b、span を占有しません
   • inline-block インラインブロックレベル要素: 排他的な行を占有することはできませんが、.img 要素の幅と高さを設定できます
   • block ブロックレベル要素: 排他的な行を占有し、width、height、p、div 要素を設定できます

   2).要素タイプの表示を変更:

   • 要素の型は相互に変換でき、変換後に要素のプロパティも変更されます
   • div は通常、インライン要素に変換されないため失われ、高く設定することはできません

   3) 隠し要素: 表示: なし

   7. フローティング要素とスタック要素のブロック

   • 浮動小数点:浮動小数点:左/右
   • 重なった要素を削除:clear:both (左右両方を削除)

   8.ケース:

   百度ページの構築:

   • ヒント: div を中央に配置するには、margin: 0 auto;
   を直接使用します。
   • 最初はブラウザのデフォルト機能を実装しないようにするには: *{margin:0px}
   • divブロックがオーバーフローしないように、最大​​値と最小値を設定します。最小値は左右のdivの合計です。
   縦書きテキストの中央揃え: 行の高さ
   ナビゲーションするには、li タグの外側にリンク a タグを追加します
   レイアウトスタイル
   1.位置決め方法
   static: デフォルトでは、要素は通常の要素であり、ドキュメント フローは上から下に配置されます
   relative: 要素の位置は通常の位置を基準にしています。通常、要素の位置を微調整するには、上と左のみが使用できます。彼は以前の位置に比べて移動したように感じます
   • 固定 (固定): ブラウザ ウィンドウを基準にして配置されます。

     一般的に使用されます。、位置は移動前に占有されず、上下左右に使用できます。小さな広告に一般的に使用される手法、スクロール バーは動き続けます。その位置はドキュメント フローから切り離され、ドキュメント フローの上に浮かび上がります。例: top50px は、側面を基準にします。上に50px移動するのではなく、要素と上の境界線の間の距離を50pxにすることもできます。 ボタンを使用すると、スクロールバーを引いても位置は変わりません

   • Absolute (絶対): 相対位置の値が静的ではない祖先要素。変更する人に応じて、祖先要素は静的になることができません (デフォルトは静的です)。

     子孫要素との親子要素または祖先要素の位置ずれが発生します。

     2.配置レイアウト
     上/下/左/右
     3. Zインデックス
     要素と要素の表示レイヤー数を設定するために使用されます。正と負の両方の数値が許容されます

     position と組み合わせて使用​​する必要があります
     

     移行、変革
     1. 移行

     遷移: 要素は、あるスタイルから別のスタイルに徐々に変化します

     属性:
     
   transition-delay: 遷移前の遅延を設定します
   transition-duration: 移行時間を設定します
   transition-property: トランジション参加のプロパティを設定します
   transition-timing-function: 遷移レート (線形均一速度)
   • 遷移: 短い形式 (プロパティ持続時間のタイミング関数の遅延)
     逆トランジション:
     ホバーで設定し、divに貼り付けて完了です

   2. 変身
   変換: 変換方法を指定します
   transform:scaleX/Y(1.5) スケール1.5倍
   transform:rotate(360deg) は 360 度回転します。deg は度を表し、トランジション時間の効果は非常に優れています
   変換: スキュー(X軸角度、Y軸角度)チルト角度
   transform: 移動距離(X軸距離、Y軸距離)