StyleSheet Memo
::目次::
- 1. スタイルシートとは?
- 2. スタイルシートの導入方法
- 3. スタイルシートの書式
- 4. スタイルシートいろいろ (テキスト関連)
- 5. スタイルシートいろいろ (背景関連)
- 6. スタイルシートいろいろ (枠線関連)
- 7. スタイルシートいろいろ (リスト関連)
- 8. スタイルシートいろいろ (リンク関連)
- 9. その他
スタイルシートとは?
- HTML で示される論理構造とレイアウトを分離するために導入された
- W3C によって CSS(Cascading Style Sheet)として定義されている
スタイルシートの導入方法
- 外部ファイル(*.css)を読み込む
スタイルファイル(style.css)を別に作り、<HEAD>~</HEAD>内に次のような記述を加える。<LINK REL = "stylesheet" HREF = "style.css" TYPE = "text/css">
- HTML 内に埋め込む
<HEAD>~</HEAD>内に次のような記述を加える。<STYLE TYPE = "text/css"> <!-- スタイルの設定 --> </STYLE>
スタイルシートの書式
- セレクタ {属性:値;}
例:H1 {color:red;}
上記の例では全てのタグについてスタイル設定を行う。 - CLASS によってスタイルを使い分ける
例:DIVタグに red クラスのスタイルを加える
<STYLE TYPE = "text/css"> DIV.red {background-color:red;} </STYLE> HTML 内 <BODY> <DIV CLASS = "red">html</DIV> </BODY>
スタイルシートいろいろ (テキスト関連)
- color:*; テキストの色を指定
- font-family:"*"; フォントの種類を指定
- font-style:*; フォントのスタイルを指定 (italic, oblique, normal)
- font-weight:*; フォントの太さを指定 (bold, normal, bolder, lighter)
- font-size:*; フォントのサイズを指定
- line-height:*; 改行幅を指定
- text-decoration:*; テキストを装飾
- underline 下線
- overline 上線
- line-through 打ち消し線
- blink 点滅
- none 無し
- text-align:*; テキストの水平位置を指定 (left, center, right)
- text-indent:*; インデント指定
スタイルシートいろいろ (背景関連)
- background-color:*; 背景の色を指定
- background-image:url("*"); 背景の画像を指定
- background-attachment:fixed; 背景画像を固定
- background-repeat:*; 背景画像の繰り返し
- repeat-x 横方向
- repeat-y 縦方向
- no-repeat 繰り返し無し
- repeat 繰り返し (デフォルト)
- background-position:*; 背景画像の位置を指定 (top, center bottom, left, center, right)
スタイルシートいろいろ (枠線関連)
- border-style:*; 枠線のスタイルを指定
例:solid
double
groove
ridge
inset
outset - border-width:*; 枠線の幅を指定 (thin, medium, thick)
- border-color:*; 枠線の色を指定
- margin:*; マージンを指定
- padding:*; 枠線と文字の間隔を指定
スタイルシートいろいろ (リスト関連)
- list-style-type:*; リストのマークを指定
例:- disc
- circle
- square
- decimal
- lower-roman
- upper-romann
- lower-alpha
- upper-alpha
- none
- list-style-mage:url("*"); リストのマークに画像を指定
- list-style-position:*; リストのマークの位置を指定 (outside, inside)
スタイルシートいろいろ (リンク関連)
- リンクの状態によって次の3つに分けられる
a:link{ } リンクされている文字列 a:visited{ } 訪問済みの文字列 a:hover{ } マウスがリンクされている文字列に乗った時
例:
crosshair
move
wait
help
w-resize
e-resize
その他
- コメント文は /* ~ */