Web フロントエンド開発の基本的な CSS スタイルのまとめ-htmlチュートリアル-php.cn

色と単位の使用

色
- 色を示すには、色の名前を使用します。例: 赤
- デモンストレーションを表すには 16 進数を使用します (例: #FF0000)。
- 通常、色を表すには16進数が使用されます

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

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

要素に境界線を適用する

border-width: ボーダーの幅

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

フォーム

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

border-spacing: 隣接するセル間の間隔
- キャプション側: タイトルの位置
- empty-cells: 空のセルを表示するかどうか
list-style-style: リストの先頭のマークのスタイル、丸いドット、四角いドットなど。
list-style-image: リスト画像タグ
- 透明性
- カーソルの形状
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の合計です。
レイアウトスタイル

1.位置決め方法
- 固定 (固定): ブラウザウィンドウを基準にして配置されます。
  一般的に使用されます。、位置は移動前に占有されず、上下左右に使用できます。小さな広告に一般的に使用される手法、スクロールバーは動き続けます。その位置はドキュメントフローから切り離され、ドキュメントフローの上に浮かび上がります。例: top50px は、側面を基準にします。上に50px移動するのではなく、要素と上の境界線の間の距離を50pxにすることもできます。ボタンを使用すると、スクロールバーを引いても位置は変わりません
- Absolute (絶対): 相対位置の値が静的ではない祖先要素。変更する人に応じて、祖先要素は静的になることができません (デフォルトは静的です)。
  子孫要素との親子要素または祖先要素の位置ずれが発生します。
  2.配置レイアウト
  
  上/下/左/右
  
  3. Zインデックス
  
  要素と要素の表示レイヤー数を設定するために使用されます。正と負の両方の数値が許容されます
  position と組み合わせて使用する必要があります
  
  移行、変革
  
  1. 移行
  遷移: 要素は、あるスタイルから別のスタイルに徐々に変化します
  属性:
- 遷移: 短い形式 (プロパティ持続時間のタイミング関数の遅延)
  
  逆トランジション:
  
  ホバーで設定し、divに貼り付けて完了です
2. 変身