| ■ CSSファイルを読み込む |
|
<link rel="stylesheet" href="色指定" type="text/css"> |
| 《例》 |
<link rel="stylesheet"
href="http://money.oboroduki.com/stylesheet.css"
type="text/css">
⇔ この要素は必ず<head>〜</head>の範囲内に配置するようにして下さい！
|
|
|
| ■ スタイル要素として取り込む |
|
<style type="text/css"> 〜 </style> |
| 《例》 |
<style type="text/css" >
body {
margin: 0;
color: #FFFFFF;
}
h1 {
font-size: medium;
color: #FFFFFF;
background-color: #000000;
}
</style>
⇔ この要素は必ず<head>〜</head>の範囲内に配置するようにして下さい！ |
|
|
| ■ ある特定の要素に適用させる |
|
要素名 { 〜 ｝ |
| 《例》 |
body {
margin: 0;
color: #FFFFFF;
}
h1 {
font-size: medium;
color: #FFFFFF;
background-color: #000000;
} |
|
|
| ■ 複数の要素に同じスタイルを適用させる |
|
要素名，要素名，要素名 { 〜 ｝ |
| 《例》 |
h1,h2,h3,p {
font-size: medium;
color: #FFFFFF;
background-color: #000000;
} |
|
|
| ■ すべての要素に同じスタイルを適用させる |
|
＊{ 〜 ｝ |
| 《例》 |
* {
font-size: medium;
color: #FFFFFF;
background-color: #000000;
} |
|
|
| ■ リンク部分にスタイルを適用させる |
|
要素名 ：link { 〜 ｝
要素名 ：visited { 〜 ｝
要素名 ：hover { 〜 ｝
要素名 ：active { 〜 ｝ |
| 《例》 |
a：link {color: #0000FF; background: #ffffff }⇔ まだ見ていないリンクのスタイル
a：visited {color: #0000FF; background: #ffffff }⇔ すでに見たリンクのスタイル
a：hover {color: #0000FF; background: #ffffff } ⇔ カーソルが上にある時のスタイル
a：active {color: #0000FF; background: #ffffff } ⇔ マウスボタンを押したときのスタイル |
|
|
| ■ 一行目だけにスタイルを適用させる |
|
要素名 ：first-line { 〜 ｝ |
| 《例》 |
p：first-line {
color: #0000FF;
background: #ｆｆｆｆｆｆ;
} |
|
|
その他のおすすめサイト 
