ボックス
<body>内に書かれ、ブラウザに表示される要素は自分の領域を確保する。これをボックスという。CSSはボックスに対して表示状態を設定する。
example.html
<style>
* {
outline: 1px solid #ff0000;
}
</style>
上のようにすると、すべてのボックスにアウトラインがつく。
@ルール
CSSのルール(セレクタと宣言ブロックのセット)は<body>内の各要素に対して適用されるが、@ルールは要素に適用しない特殊なルール。
@charset "UTF-8";など。
コメント
/* コメント */と書く。
セレクタの種類
-全称セレクタ
* { スタイル }
-タイプセレクタ
p { スタイル }など
-idセレクタ
#footer { スタイル }など
-classセレクタ
.photo { スタイル }など
セレクタの組み合わせ
td.photo { スタイル }みたいな。
擬似クラス
要素が特定の状態の時のみマッチするようになるもの。
a:hover { スタイル } マウスボタンが乗っている時だけマッチ
a:active { スタイル } マウスボタンが押されている時だけマッチ
子孫コンビネータ
特定の親要素に含まれる子孫要素にマッチさせるセレクタ。
#nav li { スタイル }は<ul id="nav">に含まれる<li>にマッチする
複数のセレクタを選択
th,td { スタイル }
継承について
ある要素に適用したプロパティはその子要素にも継承される。
-テキストを装飾するプロパティは継承する
-ボックスを捜査するプロパティ、背景を指定するプロパティは継承しない
CSSの記述場所
基本外部ファイルだが、タグ内に記述、<style>タグの要素として
style.cssへのリンクの作成
index.html
<head>
<meta charset ="UTF-8">
<title>KUJIRA Cafeへようこそ</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
のように、<head>タグの中に記述する。