今回もcssの説明をしていきます。
cssファイルにスタイルを記述していきのですが、要素に対するスタイルの指定は優先順位があります。
まず、記述順が後ろのほうが優先になります。
<head>
<meta http-equiv="content-type" content="text/html; charset="UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-language" content="ja" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./style.css" media="screen"> <!-- ここの部分を追加 -->
<title>サンプル3-1</title>
</head>
<body>
<div class="text">テキスト</div>
</body>
</html>
/*****************************/
/* CSS Document */
/*****************************/
.text {
background-color:#FF0000; <!-- 赤色 -->
font-size:24px;
font-weight:bold;
}
上記の状態だと以下のような表示になります
では以下のようになるとどうでしょう？
htmlは変更しません
■ 指定がバッテイングした場合
/*****************************/
/* CSS Document */
/*****************************/
.text {
color:#ff0000; <!-- 赤色 -->
font-size: 24px;
font-weight:bold;
}
.text {
color:#009900; <!-- 深い緑色 -->
font-size: 12px;
font-weight:normal;
}
同じクラスに対して別の指定をしちゃうとあとから出てきた指示に従います。
/*****************************/
/* CSS Document */
/*****************************/
.text {
color:#ff0000; <!-- 赤色 -->
font-size: 24px; <!-- フォントサイズ24px -->
font-weight:bold; <!-- 文字の太さ太文字 -->
}
.text {
color:#009900; <!-- 深い緑色 -->
font-weight:normal; <!-- 文字の太さノーマル -->
}
このように一部だけ変更すると指定されていない部分は前に指定されていた部分を継承します。
■ より詳細に書かれたもののほうが優先される
<body>
<div class="box">
<p class="text">テキスト</p>
</div>
</body>
/*****************************/
/* CSS Document */
/*****************************/
.box > .text {
color:#009900;
font-weight:normal;
}
.text {
color:#ff0000; <!-- 赤色 -->
font-size: 24px;
font-weight:bold;
}
この場合、どちらも<p class=”text”>に対しての指定ですが、あとから出てきた指定が優先されそうですがより詳細に書かれている
.box > .text {
color:#009900; <!– 深い緑色 –>
font-weight:normal;
}
こちらが優先されます。
最後にあまり使わないけど!important
/*****************************/
/* CSS Document */
/*****************************/
.text {
font-size:36px !important;
color:#000000 !important;
font-weight: normal !important;
}
.box > .text {
color:#009900;
font-weight:normal;
}
.text {
color:#ff0000;
font-size: 24px;
font-weight:bold;
}
プロパティの後ろに !important を追加します。
これが書かれたものに関しては何があってもこれを優先しますという力技です。
しかし、普段こんなものは使いません。
一応こういうものもあるという紹介です。