CSS

CSS(Cascading Style Sheets)†

http://www.a2ztutorial.com/Style/CSS/
http://www.w3.org/Style/CSS/

CSS(カスケーディング・スタイル・シート)は、
各タグには、「style属性」があり、
「ボーダー(border)」、「マージン(margin)」、「パディング(padding)」、「背景(background)」等の
値を変更する事で見た目の変更等が行える。
この「style」で個々のタグに記載するのではなく
別ファイルにしたのが、CSSである。
拡張子は、「*.css」が使用される

CSSを使用するメリット
他のHTMLでも同一のスタイルで統一出来、HTMLファイルがシンプル化する。
- 「タグ」別にスタイル指定可。
- 「ID属性」別にスタイル指定可。
- 「CLASS属性」別にスタイル指定可。
- 「疑似CLASS」別にスタイル指定可。(aタグのみ!?)
  
  link 通常リンクのスタイル
  
  visited アクセス済みリンクのスタイル
  
  hover ポイント時のスタイル
  
  active アクティブ時のスタイル
- 上記の複数コンボも可。

CSSを使用するデメリット
別ファイルになるので何が設定されているか分りにくくなる。

↑

ファイルの読込設定†

<html>
  <head>
    ...
    <link rel="stylesheet" href="xxxxx.css" type="text/css">
    ...
  </head>

↑

CSSの書き方†

「タグ」指定 (例:divタグ)
```
div {
    .... ;
}
```
「IDセレクタ」指定
```
#id_name {
    .... ;
}
```
「CLASSセレクタ」指定
```
.class_name {
    .... ;
}
```
「疑似CLASS」指定 (例:aタグ:focus[フォーカス])
```
a:focus{
    .... ;
}
```
「タグとCLASSセレクタの複合」指定
```
div.class_name {
    .... ;
}
```
「子供セレクタ」指定
```
td > div
```
「子孫セレクタ」指定
```
td div.class_name {
    .... ;
}
```
全称セレクタ(ユニバーサル・セレクタ)
```
*
```

↑

優先順位†

CSSには、表示する優先順位が存在する。
「!important」記載のある物が最優先される。

全称セレクタ＜タイプセレクタ＜ CLASSセレクタ＜ IDセレクタ
```
* ＜ div ＜ .class_name ＜ #id_name
```

タグ名指定＜タグ＋α指定

div ＜ div.class_name
div ＜ div#id_name

単独セレクタ＜子孫セレクタ＜子孫セレクタ(コンボ) ...
```
div ＜ td div ＜ tr td div
```

↑

CSS(Cascading Style Sheets)†

ファイルの読込設定†

CSSの書き方†

優先順位†

メモ†

最新の20件

link	通常リンクのスタイル
visited	アクセス済みリンクのスタイル
hover	ポイント時のスタイル
active	アクティブ時のスタイル