5月 10th, 2008at 21:37

Tags:

CSSメモ

CSSとはCascading Style Sheetの略。

便利サイト

CSSのレイアウト作成に役立つ便利なリソースいろいろ by GIGAZINE

使用方法

直に要素に書いちゃう

タグに直に書くことができる。しかし、これだとあんまりうれしくないので、できればやめておいたほうがいい。

<div style="color:#000;border:1px solid #000"> 直に書いてみました。</div>

headerに書いちゃう

Javascriptと同じように、headerに書くこともできる。が！やめといたほうがいい。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head><title>タイトル</title><meta http-equiv="Content-Style-Type" content="text/css"><style type="text/css"> div.title{background-color:red;color:white}</style></head><body /></html>

外部ファイルに書いちゃう

こうしておきましょう。

// test.cssbody{ background:#fff;}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"><link rel="stylesheet" type="text/css" href="test.css"> </head> <body></body></html>

外部ファイルで他の外部ファイルを参照することができる。

// test.css内@import "another.css";@import "ananother.css";

ただ、IEで@importを大量に行うと、CSSがうまく読み込めないことがあるので注意。

CSS適用の優先順位

優先順位は以下のとおり。（上のほうが優先順位高）

  1. タグに直に書いたとき
  2. head要素に書いたとき
  3. @import
  4. 外部スタイルシート

ボタンの背景を透明にする

background: transparent;

Divの中をCenterにしたい

margin-left: auto; margin-right: auto

IE6ではうごかないので、text-align:centerしかない

参考リンク