CSS適用での優先順位

同じタグに重複してCSSが設定されると、スタイルの競合が生じる。この場合、一番最後に読み込まれたCSSが優先し、そのスタイルで上書きされる。

(以下の順に優先順位が高い)
　　＜タグ内のSTYLE属性による指定＞
　　＜head部の<STYLE>タグによる指定＞
　　＜外部CSSファイルによる指定＞
　　＜WWWプラウザのデフォルト解釈＞

Sample

スタイル適用の優先順位

最初に外部CSSファイル「sample.css」が読み込まれ、幅・文字色・フォントサイズ・背景色・枠線のスタイルが設定される。次にhead部の<style>～</style>が読まれ、幅・文字色・フォントサイズ・枠線のスタイルを上書きする。最後にタグ内のstyle属性から文字色・フォントサイズ・下辺の枠線が変更される。

Sample Source......................................................................>>>

<link rel="stylesheet" href="../sample.css" type="text/css">
<style type="text/css">
　p.sample { width:300px;color:black;font-size:3em;border:1px solid red;}
</style>
</head>

<body>
<p class="test2" style="color:navy;font-size:1.5em;border-bottom:3mm double green">
　　　　スタイル適用の優先順位</p>


★外部CSSファイル「sample.css」の内容

@charset   "Shift_JIS";
p.sample {width:1000px;color:green;font-size:10px;
        background-color:#99ff99;border:1px solid black;}