LotosLabo

プログラミング技術とか気になった情報を載せていきます

CSSについて

CSSとは?

Cascading Style SheetsCSS)とはウェブページのスタイルを指定するための言語です。
最新のバージョンではCSS3というのがでております。

エディタは?

テキストエディタサクラエディタvimemacs、Dream weaverなんでもいいです。

書き方・使い方

基本的にHTMLファイルに付属する形で使用します。

例として

test.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
<title>タイトル</title>
</head>
<body>
<h1>見出し1</h1>
<p>段落</p>
<h2>見出し2</h2>
<p>こんにちは</p>
</body>
</html>


htmlファイルにリンク指定することで読み込み可能になります。

test.css

h1{
color : red;                      
text-align : center;    
}


こんなかんじで記述していきます。

基本構造

h1{
記入
}
p{
記入
}

基本コマンド一覧

テキスト

・文字色の指定

color: red;


・水平位置

text-align: center;


・文字装飾

text-decoration: underline;


・インデント

text-indent:  数値


・垂直方向位置

vartical-align: baseline;


・大文字・小文字

text-transform: capitalize;


・文字間隔

letter-spacing : 数値


・空白の扱い

white-space: normal


・行送りの調整

line-height: normal


フォント

・フォント指定

font-family: フォント名


・フォントサイズ

font-size: xx-large;


・文字の太さ

font-weight: 100;


・行送り

line-height: normal


・斜体の指定

font-style: normal;


背景

・背景色

background-color: #sdojf999


・背景画像

background-image: URL


・画像を貼りこむ方法を調整

background-repeat: repeat;


・背景画像の位置

background-position: top;

ボックス


border-style
border-top


・枠線の太さ

border-width
border-top-width


・枠線の色

border-color


・マージンの指定

margin
margin-top


・テキストとボックスの間隔指定

padding
padding-top

リンク

・カーソルを重ねた時のリンクの指定

a: hover


・通常のリンクの指定

a:link


・アクセスしたことがあるリンク

a:visited


・アクティブなリンクの指定

a:active


・選択中のリンク

a:focus