CSSの概要


積層スタイルシートとは?


CSSのバージョン

  • cssの各モジュールには異なるバージョンがあるため、最新のモジュールはアプリケーション前にブラウザがサポートされているかどうかを確認する必要があります.
  • Cascadingとは?


    スタイルの優先順位

  • と同じスタイルでも、宣言された場所に基づいて優先度が決定されます.
    -ブラウザで定義されたスタイル<開発者が宣言したスタイル<ユーザー構成のスタイル
  • 適用ポイントが少ないほど優先されます.
    -tagスタイル
  • 後に
  • ソースコードの順序がある場合は、それを上書きします.
  • スタイルの継承

  • 親要素のスタイル属性が子要素に渡されます.
  • (背景画像、背景色など)を継承できない属性もあります.
  • CSSの長さはどうですか。


    h1 {
    	color:red;
        font-size:12px;
    }
  • CSSルールベース言語
  • を使用
  • CSSでは、特定の要素または特定の要素のセットのスタイル規則を定義できます.
  • セレクタ:スタイルを指定する要素
  • を選択
  • 宣言ブロック:カッコ{}に複数の宣言を作成する
  • 宣言:財産:価値;形状ペア
  • コメント(Comments)

    /* 주석 */
    h1 {
    	color:red;
        font-size:12px;
    }

    CSSの適用方法


    内部スタイル(埋め込み)

    <!DOCTYPE html>
    <html>
      <head>
        <style>
        h1 {
        color : red;
        }
        </style>
        <title>CSS</title>
      </head>
      <body>
        <h1>Welcome!</h1>
      </body>
    </html>

    インラインスタイル(インライン)

    <h1 style="color:red;">Welcome!</h1>

    外部スタイル(外部)

    <!DOCTYPE html>
    <html>
      <head>
        <title>CSS</title>
        <link rel="stylesheet" href="main.css"/>
      </head>
      <body>
        <h1>Welcome!</h1>
      </body>
    </html>

    知らないCSSプロパティを参照する方法

  • 好奇心のある属性値+MDN検索!
  • ブラウザ互換性
  • を確認