ひっそりと生きるプログラマのブログ

日頃気になった事なりを書き留めるブログです。関心ごとは多くもう少し更新頻度を上げたいところです。

Styleの優先順位

スタイルは上から下へロードしてゆき、同じ定義が指定されている場合には上書きされます。
以下の例の場合だと、 span 要素に設定されるのは、

background-color: Blue;
color-color: White;
font-style:normal;

となる。

Web界隈では当たり前の事でしょうが、
調査していると見落としていたりするので、戒めをこめてメモ。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        span
        {
            background-color: Red;
            color: Lime;
            font-style:italic;
        }
    </style>
    <style type="text/css">
        span
        {
            background-color: Blue;
        }
    </style>
    <style type="text/css">
        span
        {
            color: White;
        }
    </style>
    <style type="text/css">
        span
        {
            font-style:normal;
        }
    </style>
</head>
<body>
    <span>test</span>
</body>
</html>