【CSS】文字の装飾（フォント関連プロパティ）まとめ

CSSは次の書き方で書くことができます。

セレクタ {プロパティ : 値;｝

セレクタは「要素」を、プロパティは要素の「性質」を、値は「どの状態にするか」を指定します。

h1 {font-size:24px;}

div{
  font-family:serif;
}

h1{
  font-size:20px;
  color:red;
}

h1{
  font-size:20px;
  color:red;
  background-color:black;
}

背景色はbackground:black;でも指定することができます。

h1{
  font-size:20px;
  color:red;
  background:black;
}

background-colorはbackgroundに含まれる属性を細かく書いた形です。backgroudにはbackground-imageなど複数の属性が含まれています。

h1{
  text-shadow:#000000 2px 2px 5px
}

値は単位なしの値を指定します。これはh1や普通のpの文字サイズが異なるためです。値は行間隔を文字サイズの何倍にするかを示します。下の場合でしたら、文字サイズの1.8倍です。

div{
  line-height:1.8;
}

文字の大きさ、行間隔、フォントの種類は以下のような書き方で一括で指定することも可能です。

div{
  font: 14pt/1.8 serif;
  /* 14ptの文字サイズ、行間文字1.8倍、フォントserif */
}

div{
  letter-spacing: 0.3em;
}

div{
  font-style: italic;
}

div{
  font-weight:bold;
}

div{
  text-decoration: underline;
}

div{
  text-align:center;
}

div{
  text-transform:capitalize;
}

div{
  text-transform:uppercase;
}

div{
  text-indent:1em;
}