CSS:style属性と外部スタイルシートの優先順位
JavaScript・XHTML・CSS (43 items)
2006年03月05日
今やスタイルシートによるレイアウト定義は当たり前ですが、CSSファイルとして外部ファイルで定義する以外に、インラインstyle属性として、各タグに設定する事ができます。
で、CSSファイルとstyle属性両方で定義した場合、どちらが優先されるか？という事ですが、基本的にはstyle属性が優先されます。
<a href="http://www.res-system.com" style="color: #ff0000; background-color: #cccccc">Web Artisan Blog</a>
で、CSSファイルとstyle属性両方で定義した場合、どちらが優先されるか？という事ですが、基本的にはstyle属性が優先されます。
スタイルシートの基本--ごく簡単なHTMLの説明
style属性は外部ファイルやstyle要素の設定よりも優先されることになります。
・・
1. 局所的なスタイルが大局的なスタイルに優先する
2. 同じ優先順位のスタイルが競合したら、あとから読み込んだものを採用する
例えば、当サイトでは下記のようにCSSファイルを定義しています。
で、以下のようなアンカータグだと、CSSファイル内のアンカータグ定義に従って表示されます。
そこで、更にstyle属性で定義すると、CSSファイルの定義が無視されstyle属性の定義が優先されます。
基本的には、HTML内にレイアウト情報を定義する事は望ましくないので、style属性による定義も望ましくないとなりますが、局所的にレイアウトを定義したい場合はstyle属性でできます。
また、例えば動的にhtmlタグを挿入するscriptタグ（GoogleAdSenseみたいなの）を作成して、それを色んなサイトに貼ってもらった場合、そのレイアウトを各サイトのCSSファイルの内容に依存したくない時なんかにも、style属性による定義でレイアウトの固定化が可能になります。
<link href="http://www.res-system.com/weblog/skins/rssskin/css/wab.css" type="text/css" rel="stylesheet" media="all" />
で、以下のようなアンカータグだと、CSSファイル内のアンカータグ定義に従って表示されます。
<a href="http://www.res-system.com/weblog/">Web Artisan Blog</a>
Web Artisan Blog
そこで、更にstyle属性で定義すると、CSSファイルの定義が無視されstyle属性の定義が優先されます。
<a href="http://www.res-system.com" style="color: #ff0000; background-color: #cccccc">Web Artisan Blog</a>
Web Artisan Blog
基本的には、HTML内にレイアウト情報を定義する事は望ましくないので、style属性による定義も望ましくないとなりますが、局所的にレイアウトを定義したい場合はstyle属性でできます。
また、例えば動的にhtmlタグを挿入するscriptタグ（GoogleAdSenseみたいなの）を作成して、それを色んなサイトに貼ってもらった場合、そのレイアウトを各サイトのCSSファイルの内容に依存したくない時なんかにも、style属性による定義でレイアウトの固定化が可能になります。
前の記事 次の記事