複数外部スタイルを読み込む

1つのスタイルシートファイルで全てのサイトを管理すると、記述が非常に長いものになってしまい管理に不便を感じることがあるかもしれません。
その場合、レイアウト別にスタイルシートファイルを複数用意して、スタイルの記述を分散しておくと管理が楽になります。

以下、HTMLより外部スタイルシート「import.css」を読み込み、さらに3つの外部スタイルシートを使用した例です。

▼HTMLファイル

<link href=”import.css” rel=”stylesheet”
type=”text/css”>

▼import.css スタイルシート

@charset “UTF-8”;

@import “base.css“;
@import “header.css“;
@import “main.css“;

▼base.css スタイルシート

body{
font-family: ‘Lucida Grande’,’Hiragino Kaku Gothic Pro’,’ヒラギノ角ゴ Pro W3′, verdana, Arial, ‘trebuchet ms’,’Osaka‐等幅’, sans-serif, ‘MS ゴシック’;
}
a:link{
color:#999900;
}
a:visited{
color:#999900;
}
a:active{
color: #999900;
}
a:hover{
color: #9BB601;
background: #DFE2BA;
text-decoration: underline;
}

▼header.css スタイルシート

#header{
background: #999999;
}
h1{
color: #cccccc;
}

▼main.css スタイルシート

#page{
background: #cccccc;
}
#wrap{
margin: 0;
padding: 0;
}
.title{
color: #ffff00;
}

コメント