CSSメモ

CSSとはCascading Style Sheetの略。

便利サイト

使用方法

直に要素に書いちゃう

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

<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.css
body{
 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適用の優先順位

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

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

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

background: transparent;

Divの中をCenterにしたい

margin-left: auto; margin-right: auto

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