CSS基礎文法学習メモ書き (ドットインストール)

• 継承の有り無しがある
  • 継承無しを継承有りにするコマンドもある

• user agent stylesheet
  • ブラウザが元々持っているCSS

• 文字の間に空白がある場合は ' or " で囲う必要がある
  • 例: 文字コード "black pink"

• em
  
  • 相対単位
  • 他の要素を基準にしてサイズ指定をする
  • ここは理解が30％ぐらい

• 色の表現
  • 色キーワード
    • red; green; blue; など
  • RGBA
    • red,green,blue(0~255)
    • alpha = 透明度 (0~1)
    • alpha1の場合は省略化 = RGBで表現出来る
    • 16進数で表示出来る
      • 同じ数字だった場合は1文字に省略出来る
      • この場合も透明度1は省略出来る
  • HSLA(トーンや明度を利用したグラデーションなど)
    • Hue
      • 色相(0~360)
      • 色相環のイメージ
    • Saturation
      • 彩度(％)
    • Lightness
      • 明度(％)
    • Alpha
      • RGBAと同じ
  • 透明度の指定
    • Opacity = 不透明度
    • 画像の透明度の操作が可能

• ファイル名
  • ()または ' " で囲っても良い

• margin, padding　理解用

• saruwakakun.com

• marginの相殺
  • 垂直方向でマージンが重なると小さい値が打ち消される

• displayプロパティ
  • block
    • 下に追加されていく
      • サイズの操作　有効
  • inline
    • 左に詰めて追加される
      • サイズの操作　無効
  • inline-block
    • 左に詰めて追加される
      • サイズの操作　有効

• position プロパティ
  • absolute
    • 絶対位置
    • 基準がウィンドウ、または親要素
  • relative
    • 相対位置
    • 基準が元いた場所(static)
  • fixed
    • スクロールしても位置が変わらない
    • 基準はウィンドウ全体

• z-index
  • ボックスの重なり順序を指定するプロパティ
  • 数字が大きいほど上に来る

• box-sizing 
  • border-boxという値にすると、widthとheightがpaddingとborderを含めるようになる

• shadow
  • 指定無し
    • ドロップシャドウ効果
    • 試したがよく分からぬ
  • 2つの値
    • 1つ目で水平方向、2つ目で垂直方向
    • 基本は水平だと右方向、垂直だと下方向
    • 負の値で逆方向
  • 3つの値
    • 3つ目の値が大きくなるほどぼかしが大きくなり、影の面接が大きくなる
    • 負の値は指定出来ない
  • 4つの値
    • 4つ目の値が大きくなるほど、影がその分だけ拡張され大きくなる
    • 負の値が指定された場合、影は縮小される

• 背景のプロパティ
  
  • 一括指定する場合
    • background-size と position はまとめて指定する必要がある
    •  / で区切って 例: background: center/cover とする

• clear
  • clearを指定する要素を、その前にある浮動要素の下に移動する必要があるかどうかを設定するプロパティ