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}


Copyright(C) 2006-2011 CLAYPOT. All Rights Reserved.