[Worksheet 220419]CSS属性-1

5198 ワード
Worksheet CSS テキストリンク
HTML/CSS/JSで作成したスタバサイト

CSS属性


CSS属性

Width, Height


エレメントの水平/垂直幅
div {
	width: 100px;
    height: 100px;
}
  • デフォルトauto
    計算ブラウザ幅

    • max-width, max-height


    要素の最大横幅/縦幅
  • デフォルト
    none

    • min-width, min-height


    エレメントが小さくなる可能性のある最小横/縦幅
  • デフォルト
    0

    • CSS単位


  • px
    ピクセル

  • %
    相対パーセント

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

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

  • vw, vh
    ビューポートの水平/垂直幅のパーセント

    • Margin


    エレメントの外部余白(スペース)を指定するショートカット属性.
    負の値でもかまいません

  • デフォルト
    0

  • ショートカットのプロパティ
    ぐいとつかむ
  • margin: top, right, bottom, left ;
  • margin: top, bottom right, left ;
  • margin: top right, left bottom ;
  • margin: top right bottom left ;

  • n/a.方向
    margin-「方向」
    margin-top, margin-bottom, margin-right, margin-left

  • 負の値
    値のように重なります.

    • Padding


    エレメント内の余白のショートカット属性を指定します.
    内部空白なので、要素の大きさが大きくなります.

  • デフォルト
    0

  • ショートカットのプロパティ
    ぐいとつかむ
  • padding: top, right, bottom, left ;
  • padding: top, bottom right, left ;
  • padding: top right, left bottom ;
  • padding: top right bottom left ;

  • n/a.方向
    padding-「方向」
    padding-top, padding-bottom, padding-right, padding-left

    • Border / Color


    ボーダーライン


    エレメントの枠線のショートカット・プロパティの指定
    要素のサイズが増加します.border: 선-두께 선-종류 선-색상;

  • border-width
  • デフォルト
    • 中程度の厚さまたはCSS単位で指定

  • border-style
  • デフォルト
    none
  • 実線
    solid
  • 破線
    dashed

  • border-color
  • デフォルト
    black
  • 透明
    transparent

    • カラー表示


    すべての色を使用する属性に適用される色の表示

  • 色の名前
    ブラウザで指定した色名
    ex) red, tomato, royalblue

  • Hex色コード
    16進数カラー
    ex) #000, #FFFFF

  • RGB
    さんげんしょく
    ex) rgb(255, 255, 255)

  • RGBA
    光の三原色+透明度
    ex) rgba(0, 0, 0, 0.5)

    • Border-radius


    フィレット要素のエッジ
  • デフォルト
    円なし
    • border-radius: value;

    Box-sizing


    要素のサイズ計算基準の指定

  • content-box
    要素の内容によるサイズの計算

  • border-box
    要素の内容+padding+borderを使用してサイズを計算
    属性.paddingまたはborderで要素を拡大する属性を使用するときにサイズが再計算されないようにします.

    • Overflow


    要素が大きい場合は、表示のショートカットプロパティを制御します.

  • visible(デフォルト)
    溢れ出した内容をそのまま見せる.

  • hidden
    あふれた部分を切り取る.

  • scroll
    スクロールすると、オーバーフローした内容が表示されます.

  • auto
    オーバーフローした部分だけがスクロールしてオーバーフローした内容を表示できます.

    • Overflow-x, y


    コンテンツがオーバーフローすると、表示を制御する個別属性もあります.

    Display


    エレメントの画面出力(表示)プロパティ

  • block
    ボックス要素

  • inline
    テキスト要素

  • inline-block
    テキスト+ボックス要素

  • flex
    1 Dレイアウト

  • grid
    2 Dレイアウト

  • none
    プロパティが表示されず、画面から消えます.

  • その他
    table、table-row、table-cell等

    • Opacity


    要素の透明度(0-1)
  • デフォルト
    1

    • Font


    フォント

  • font-size
    ふごう
  • 16px
    既定の寸法

  • font-weight
    文字の長さ
    9個の数字、100から900まで、単位は100です.
  • normal
    デフォルト値
  • bold
    厚さ

  • font-style
    こうばい
  • nomal
    デフォルト値
  • italic
    傾斜

  • line-height
    に似ている
  • normal
    1
  • 数字
    要素のフォントサイズを指定する倍数
  • 単位
    • (px、em、rmなどの単位)

  • font-family
    フォントの指定font-family: 글꼴1, "글꼴2", ...글꼴계열;フォントの表示と使用に使用する候補.
  • フォントシリーズ
  • serif基板
  • sans-serif黒体
  • 等

    • Text


  • color
    フォントの色

  • text-align
    文字の配置
  • 左(デフォルト)右中心

  • text-decoration
    文字の飾り
  • none(デフォルト)
  • underline
    下線
  • line-through
    中線

  • text-indent
    1行目のテキストのインデント/インデント
  • 0(本機)
  • 羊水
    インデント
  • 負
    サムネイル

    • Background


  • background-color
    背景の色を指定

  • background-image
    画像を背景に割り当てるbackgound-image: url("경로");

  • background-size
    背景画像のサイズを指定
    デフォルトでは、画像のサイズが要素のサイズより小さい場合は、出力を繰り返します.
  • auto
    デフォルトのサイズは
    • です.
  • 単位
  • cover
    比例を維持し、
    • はより広い要素に適しています.
  • contain
    • より短いエレメント幅でスケールを維持

  • backgound-repeat
  • repeat
    デフォルト
  • repeat-x/y
    繰り返し
    • (x/y軸)
  • no-repeat
    重複なし

  • backgound-position
    要素の背景画像の位置
  • 方向
    top、bottom、right、left、center方向
    • を指定します.
  • 単位

  • background-attachment
    要素の背景画像のスクロールプロパティ
  • scroll
    基本
    画像を要素に沿ってスクロールする
  • fixed
    画像はビューポートに固定され、X
    • をスクロールします.
    binder第二課
    学習日記--viewpager簡単テスト