Last Update 2007/01/16
TOP - CSS1(Cascading Style Sheets, level 1) - 複数のスタイルシートのインポート
複数のスタイルシートをインポートした場合は、後からインポートしたスタイルが上書きされます。
(1) 2つのファイルをインポートした場合
(例)
色の指定が重複しているため、後からインポートした[赤]で表示されます。
test.html
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>テスト</TITLE>
<STYLE type="text/css">
<!--
@import url(test1.css);
@import url(test2.css);
-->
</STYLE>
</HEAD>
<BODY>
<H1>上書きされて赤で表示されます</H1>
</BODY>
</HTML>
test1.css
H1 {color: blue}
test2.css
H1 {color: red}
(2) 2つのファイルをインポートした後、ドキュメントレベルでスタイルシートを設定した場合
(例)
色の指定は、最後にドキュメントレベルで設定されたスタイルが適用されます。
フォントサイズはドキュメントレベルでは設定されていないため、インポートしたスタイルとなります。
フォントサイズはドキュメントレベルでは設定されていないため、インポートしたスタイルとなります。
test.html
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>テスト</TITLE>
<STYLE type="text/css">
<!--
@import url(test1.css);
@import url(test2.css);
H1 {color: red}
-->
</STYLE>
</HEAD>
<BODY>
<H1>ドキュメントレベルで設定された赤で表示されます</H1>
</BODY>
</HTML>
test1.css
H1
{
font-size: 20px;
color: blue
}
test2.css
H1 {color: green}