スタイルシートメモ

個人用のメモです。あてにしませぬように・・・

HTML文書内での使用例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<title>タイトル</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
h3, h2 { color:red; font-size:20pt; } /* 複数のタグに同一のスタイル */
.settei1 { background-color:#FFFF00; text-indent:20px; }
div.blue { color:blue; margin-left:40px;}
-->
</style>
 </head>

<body>
<h3>タグにスタイルを適用 </h3>
<span class=settei1>タグに依存しないクラス </span>
<div class=blue>タグに応じたクラス名を設定 </div>
</body>
</html>

タグにスタイルを適用

タグに依存しないクラス
タグに応じたクラス名を設定

外部スタイルの読み込み

<link rel="stylesheet" href="xxxx.css" type="text/css">

インラインでのスタイル設定

<p style="background-color:yellow;"> 〜 </p>


単位

mm ミリメートル
cm センチメートル
in インチ
px ピクセル
%　パーセント
pt ポイント
pc パイカ
em 大文字のMの高さを基準にした１文字の大きさ
ex 小文字のxの高さを基準にした１文字の大きさ


疑似クラス

:link　　未参照のリンク
:visited 参照済みのリンク
:active　リンクがクリックされたとき
:hover　 マウスカーソルが要素と重なったとき

<style type="text/css">
<!--
A:link { background-color:lightyellow; }
A:visited { background-color:cyan; }
A:active { color:red; }
:hover { color:magenta; }
-->
</style>


疑似要素

:first-letter　要素中の最初の１文字
:first-line　　要素中の１行目



テキスト

テキストの色 color: #RGB, #RRGGBB, 色名
水平位置 text-align: left, right, center, justify
均等割付 text-justify: auto, distribute-all-lines IE5,6のみ
インデント text-indet: 数値＋単位
垂直位置 vertical-align: baseline, super, sub, top, middle, bottom
装飾 text-decoration: none, overline, underline, line-through, blink
文字間隔 letter-spacing: 数値＋単位, normal
単語の間隔 word-spacing: 数値＋単位, normal
縦書き writing-mode: lr-tb(横書き), tb-rl(縦書き) IE5以上のみ
フォント指定 font-family: フォント名 or フォントファミリー名
serif(明朝), sans-serif(ゴシック), cursive(筆記), fantasy(装飾), monospace(等幅)
フォントサイズ font-size: 数値＋単位, 数値%, xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller
フォントの太さ font-weight: bold, 100〜900, normal, bolder, lighter
行送り line-height: 数値＋単位, 数値%, normal
斜体 font-style: italic, oblique, normal
スモールキャップ font-variant: small-caps, normal
まとめて設定 font: スペースで区切って並べる

背景

色 background-color: #RGB, #RRGGBB, 色名
画像 background-image: url("ファイル名")
背景の固定 background-attachment: fixed, scroll (default)
背景の貼り付け方 background-repeat: repeat, repeat-x, repeat-y, no-repeat
背景の位置 background-position: 数値＋単位，top, center, bottom, left, right
まとめて設定 background: スペースで区切って属性を列記

ボックス

マージン margin: 数値＋単位 ※
　マージン上
　マージン右
　マージン下
　マージン左
 　margin-top:
　margin-right:
　margin-bottom:
　margin-left:
 数値＋単位
パディング padding: 数値＋単位 ※
　パディング上
　パディング右
　パディング下
　パディング左
 　padding-top:
　padding-right:
　padding-bottom:
　padding-left:
 数値＋単位
枠線の色 border-color: #RGB, #RRGGBB, 色名　※
　枠線の色 上
　枠線の色 右
　枠線の色 下
　枠線の色 左
 　border-top-color:
　border-right-color:
　border-bottom-color:
　border-left-color:
 #RGB, #RRGGBB, 色名
枠線のスタイル border-style: solid, double, groove, ridge, inset, outset, dotted, dashed, none (dotted, dashed はIE5.5以降)　※
　枠線のスタイル 上
　枠線のスタイル 右
　枠線のスタイル 下
　枠線のスタイル 左
 　border-top-style:
　border-right-style:
　border-bottom-style:
　border-left-style:
 solid, double, groove, ridge, inset, outset, dotted, dashed, none (dotted, dashed はIE5.5以降)
枠線の太さ border-width: 数値＋単位 ※　, thin, medium, thick
　枠線の太さ 上
　枠線の太さ 右
　枠線の太さ 下
　枠線の太さ 左
 　border-top-width:
　border-right-width:
　border-bottom-width:
　border-left-width:
 数値＋単位
枠線一括設定 border: スペースで区切って属性を列記
ボックスの高さ height: 数値＋単位
ボックスの幅 width: 数値＋単位

※ 値の設定
□; 上下左右同一の値を指定
□ □; 上下, 左右の値を指定
□ □ □; 上, 左右, 下の値を指定
□ □ □ □; 上, 右, 下, 左の値を指定

border-style: solid double groove ridge inset outset dotted dashed

位置

配置方法 position: relative, absolute, fixed(スクロールしても移動しない)
　　上端からの位置 top: 数値＋単位
　　下端からの位置 bottom: 数値＋単位
　　左端からの位置 left: 数値＋単位
　　右端からの位置 right: 数値＋単位
重ね合わせ順序 z-index: 数値（整数）
非表示 visibility: hidden（表示スペースは確保される）
TEXTの回り込み float: left, right, none
回り込み解除 clear: left, right, both, none