HTMLでのスタイルシート

CSSというスタイルシート言語を用いて、HTMLで書かれた文書を装飾する事ができます。

CSS の書き方(HTMLへの組み込み方)は、style属性, <style>要素, <link>要素 などを用いる方法があります。

CSSに関しては、「離珠のCSSでしぃ！」で記述しています。

style属性を各要素に記述して、その要素に CSS を記述できます。

style属性を用いる方法では、当該要素に対しての指定のみが可能です。疑似要素などに対してはこの方法では無理です。

style属性の詳細度(CSS 宣言が適用される際の重み) は、重要という指定(!important) よりは小さいのですが、セレクタで指定するものよりは常に大きいです。

<style>要素のコンテンツとして、CSS を記述できます。

<style>要素を用いる方法では、セレクタにより関係付けを行います。故に要素の配置が変わったり、他の記述で上書きされる可能性もあります。

<style>要素の詳細度(CSS 宣言が適用される際の重み) は、style属性の詳細度よりは小さいです。重要という指定(!important) を用いれば、style属性の記述を<style>要素の記述で上書きできますが、あまりお勧めしません。

セレクタに関する内部規約をしっかり決めて、記述の手間は増えても有効性を分かり易くするのも手だと思います。

<link>要素で別ファイルのスタイルシートを読み込む事ができます。

<link>要素を用いる方法では、セレクタにより関係付けを行います。故に要素の配置が変わったり、他の記述で上書きされる可能性もあります。

<link>要素の詳細度(CSS 宣言が適用される際の重み) は、<style>要素と同じでstyle属性の詳細度よりは小さいです。重要という指定(!important) を用いれば、style属性の記述を<style>要素の記述で上書きできますが、あまりお勧めしません。<link>要素と<style>要素の適用はそれぞれのセレクタの詳細度と記述順で決まります。

セレクタに関する内部規約をしっかり決めて、記述の手間は増えても有効性を分かり易くするのも手だと思います。 特に別ファイルになるので、決まりをしっかり決めないと、管理が面倒になります。