とりあえず覚えるCSS

CSSなんて言われてもPC初心者の方にはとっつきにくいものだと思います。
しかし
CSSとは、 Cascading Style Sheet (カスケーディング・スタイルシート)の略で、これを使う(適用する)とWEBサイトの見栄えを細かく指定することができます。例えば、
文字の大きさや種類、色、背景、画像の配置などです。
だから、
漠然となんとなくこのページを見てください。

適用方法や記述の方法は、次の通りです。

CSSの記述

用語タグ
CSSの利用を明示<meta http-equiv="Content-Style-Type" content="text/css">
htmlにcssをリンク<link rel="stylesheet" type="text/css" href="CSSファイルのパス">
htmlのスタイルを定義・適用<style type="text/css"> セレクタ{プロパティ:値} </style>
クラスで定義するスタイルを適用<要素 class="クラス名"> </要素>
ブロックレベル要素で区切る<div> </div>
インライン要素で区切る<span> </span>

テキスト

文字色を定義するcolor:値
文字列などの水平位置を指定text-align:値
left(左), center(中央), right(右), justify(両端揃え)
文字列の装飾を指定text-decoration:値
none,装飾しない
underline,下線をつける
overline,上線をつける
line-through,取消線をつける
blink,点滅させる

フォント

フォントの種類font-family:値
"MS ゴシック" "Osaka" など
フォントの大きさfont-size:値
px,em,ex,%
文字列の太さfont-weight:値
normal 太字で表示しない
bold 一般的な太字
文字列の斜体font-style:値
normal,斜体で表示しない
obliqur,斜体で表示する
italic,イタリック体で表示

背景

背景色background-color:値
背景イメージbackground-image:値
背景イメージを繰り返すbackground-repeat:値
repeat,イメージを全体に繰り返し敷き詰める
repeat-x,〃を水平方向に繰り返す
repeat-y,〃を垂直方向に繰り返す
no-repeat,〃を一つだけ配置
背景イメージの位置background-position:値
水平方向 left(左),center(中央),right(右)
垂直方向 top(上),center(中央),bottom(下)

ボックス

枠線のスタイルborder-style:値
none,枠線は表示しない
solid,実線
double,二重線
dashed,破線
dotted,点線
groove,立体的にくぼんだ線
ridge,立体的に盛り上がった線
inset,全体をくぼませて表示
outset,全体を盛り上げて表示
枠線(上)のスタイルborder-top-style:値
枠線(右)のスタイルborder-right-style:値
枠線(下)のスタイルborder-bottom-style:値
枠線(左)のスタイルborder-left-style:値
枠線の太さborder-width:値
thin,細い枠線
medium,標準の枠線
thick,太い枠線
枠線(上)の太さborder-top-width:値
枠線(右)の太さborder-right-width:値
枠線(下)の太さborder-bottom-width:値
枠線(左)の太さborder-left-width:値
枠線の色border-color:値
内容と枠線の間隔padding:値
内容と枠線上の間隔padding-top:値
内容と枠線右の間隔padding-right:値
内容と枠線下の間隔padding-bottom:値
内容と枠線左の間隔padding-left:値
余白margin
枠線上の余白margin-top:値
枠線右の余白margin-top:値
枠線下の余白margin-top:値
枠線左の余白margin-top:値

配置

width:値
高さheight:値
回り込みfloat:値
left,要素を左揃えにし、後ろに続く要素を左揃えにする
right,要素を右揃えにし、後ろに続く要素を右揃えにする
none,要素の周りにイメージなどを回り込ませない
回り込み解除clear:値
left,左揃えにした要素の回り込みを解除します
right,右揃えにした要素の回り込みを解除します
both,左(右)揃えにした要素の回り込みを解除します
none,回り込みを解除しない

疑似クラス

未アクセスのリンク:link
アクセス済みのリンク:visited
マウスでポイントしたときのリンク:hover
クリックしたときのリンク:active

a要素とセット a:link,a:visited,a:hover,a:activeと記述する