Loose-Info.com

Last Update 2019/12/25


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}