CSS属性

cssはhtmlのどの部分を制御することができますか?

boxモデル

フォント

背景

展開

フレキシブル(整列)

遷移:要素の前後状態をアニメーション処理する

変換:要素を回転または移動し、サイズを変更

フロート

アニメーション:遷移よりも複雑なアニメーションを作成できます.

メッシュ:行と列の構造を持つ2 Dレイアウト構造を制御可能

マルチレベル

フィルタ

入る前に。

💡 意味
赤:既定
青:デフォルト以外でよく使用されるプロパティ

1.箱型

width, height

要素の横/縦幅.

Auto:デフォルト値(要素に含まれる属性の値)、ブラウザ計算幅
単位:px、em、vwなどの単位

<span>:典型的なインライン要素

<div>:典型的なブロック要素

max-width, max-height

要素は、最大横幅/縦幅を大きくすることができる.

none:最大幅制限なし
単位:px、em、vwなどの単位

min-width, min-height

要素は、最大横幅/縦幅を小さくすることができる.

0:最小幅制限なし
単位:px、em、vwなどの単位

2.単位

px:画素

%:相対パーセント

em:要素のフォントサイズ

デフォルトでは、フォントサイズは16 px、10 em=16*10=160 px

rem:ルート要素(html)のフォントサイズ

vw:ビューポート幅のパーセント

vh:ビューポートの垂直幅のパーセント

3. margin

エレメントの外部余白(スペース)のショートカット属性を指定します.

個別属性もあります.

負の値を使用可能

🤔 ショートカットのプロパティmargin: 10px;:10 pxマージンを上下左右に適用margin: 10px 20px;:上下10 px、左右20 pxマージンmargin: 10px 20px 30px;:上10 px,中(左右)20 px,下30 pxマージンmargin: 10px 20px 30px 40px;:上10 px,右20 px,下30 px左40 pxマージンアプリケーション(🕑 時計回り
0:外部余白なし
Auto:ブラウザは、水平(垂直)幅要素の中央揃えに使用する余白を計算します.
単位:px、em、vwなどの単位

4. padding

エレメント内の余白(スペース)のショートカット属性を指定します.

個別属性もあります.

要素が大きくなります.

0:内部余白なし
単位:px、em、vwなどの単位
%:親要素の水平幅の割合を指定します.

5. border

border: 선-두께 선-종류 선-색상;

エレメント枠線のショートカット属性を指定

要素が大きくなります.

border-width

エレメント枠線の厚さ.

個々の属性、ショートカット属性

単位:px、em、%等

border-style

エレメント枠線のタイプ.

個々の属性、ショートカット属性

none:ワイヤレス
solid:実線(普通線)
破線

border-color

エレメント枠線の色のショートカット属性を指定します.

個々の属性、ショートカット属性

黒
色:線の色
透明:透明

6. border-radius

フィレット要素.

0:円なし
単位:px、em、vwなどの単位

7. box-sizing

要素のサイズ計算基準を指定します.

👩‍💻 例

content-box:要素の内容(content)でサイズを計算する
border-box:要素の内容+padding+borderを使用してサイズを計算

❓ Question 1. 次のコードで指定した要素の実際の幅は?

width: 100px;
padding: 20px;
border: 1px solid red;

💡 142px;
❓ Question 2. 次のコードで指定した要素の実際の幅は?

width: 100px;
padding: 20px;
border: 1px solid red;
box-sizing: border-box;

💡 100px;

8. overflow

コンテンツが要素より大きい場合、表示されるショートカット属性を制御します.

visible:オーバーフローの表示
hidden:オーバーフロー内容の切り取り
Auto:スクロールバーは、コンテンツがオーバーフローした場合にのみカットおよび作成されます.

9. display

要素の画面出力(表示)特性

各要素に指定された値

block:ボックス(レイアウト)要素
inline:文字要素
inline-block:文字+ボックス要素

プライベート値

flex:Flexbox(1 Dレイアウト)
grid:グリッド(2 Dレイアウト)グリッド2 Dレイアウト
none:表示されないプロパティが画面から消えます
その他:table、table-row、table-cell等

10. opacity

要素の透過性

1:不透明
0:0～1の小数点数

11.フォント

font-style

チルト文字

通常:傾斜なし
イタリックイタリックイタリック

font-weight

文字の太さ(重み)

400:デフォルトの厚さ
bold,700:厚くする
100～900:100、9個の数値単位、非正常および太字の厚さ

font-size

文字サイズ

16 px:デフォルトサイズ
単位:px、em、remなどの単位に指定

line-height

1行高さ、類似行距離

数値:要素のフォントサイズを指定する倍数
単位:px、em、remなどの単位に指定

font-family

指定フォント

12.テキスト

color

文字色

rgb(0,0,0):黒
色:その他の指定可能な色

text-align

文字のソート

左:左揃え
右:右揃え
中心ちゅうしん:中央揃えちゅうしんはいち

text-decoration

文字の装飾(線)

none:無装飾
下線:下線
直線通過ちょくせんせんこう:中線ちゅうせん

text-indent

文字先頭行インデント

負数を使用できます.(サムネイル)

0:インデントなし
単位:px、em、remなどの単位に指定

13.背景

background-color

要素の背景色

透明:透明
色:指定可能な色

background-image

要素の背景画像

none:画像なし
url(「パス」):イメージパス

background-repeat

重複要素の背景画像

repeat:画像規則垂直、水平繰り返し
repeat-x:水平繰返し画像
repeat-y:垂直繰り返し画像
No-repeat:重複なし

background-position

要素の背景画像位置

方向:top、bottom、left、right、center方向
単位(x、y軸):px、em、remなどの単位に指定

background-size

要素の背景画像サイズ

Auto:画像の実際のサイズ
単位:px、em、remなどの単位に指定
cover:スケールを維持し、より広い要素幅に適しています.
contain:スケールを維持し、短い要素幅に適しています.

🤔 tip
画像を挿入するときに横と縦の寸法を同時に表示する必要はありません.寸法を変更するたびにスケールで変更するのが面倒で、横寸法か縦寸法のどちらかを指定するだけでスケールで出力できます!

background-attachment

要素の背景画像スクロール特性

スクロール:画像を要素に沿ってスクロール
固定:画像をビューポートに固定し、Xをスクロールします.