3. CSS基礎
CSSとはHTMLの文字色や背景色等といったスタイルを設定するためのものです。
CSSは Cascading Style Sheetの略で、Cascading(階段状に連続する滝)とあるように、親要素で設定されたスタイルが子要素、孫要素へと引き継がれて適用されます。
スタイルはHTMLのタグに直接設定する事もできますが、HTMLは本来、文章構造を記述するための言語なので、スタイルは別で定義する方が望ましいです。
また、ページが複数存在し、それぞれ共通のスタイルを設定したい場合には、同じスタイルを何度も記述する事になってしまいます。
それらの理由から、スタイルはCSSファイル内で定義し、HTMLはそのCSSファイルを読み込むだけの状態が望ましいです。
CSSの記述方法は以下です。
セレクタ { プロパティ: 設定値; プロパティ: 設定値; プロパティ: 設定値; }
セレクタとはスタイルを設定する要素を指定するものです。
/* すべてのh1タグに文字色redを設定する */ h1 { color: red; } /* idがtopPageHeaderのタグにフォントサイズ30pxを設定する */ #topPageHeader { font-size: 30px; } /* classにblueBackが指定されたタグすべてに背景色blueを設定する */ .blueBack { background-color: blue; } /* divの子要素のpに太字を設定する */ div p { font-weight: bold; } /* divとpに下線を設定する */ div, p { text-decoration: underline; }
このようにタグ名とid、classを使って設定する事もできます。
This software includes the work that is distributed in the Apache License 2.0
Last modified: Thursday, 25 October 2018, 12:46 PM