CSS語法、選擇器、繼承、層疊

時間 2020-02-01

標籤 css 語法選擇器繼承層疊欄目 CSS 简体版

原文原文鏈接

行內樣式（內聯樣式）css

<h1 style="color:red;font-size:20px;">css行內樣式</h1>

內部樣式表（嵌入樣式）html

解決低版本瀏覽器不識別style標籤的狀況瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        <!--
        p{
            color:blue;
        }
        -->
    </style>
</head>
<body>
    <h1 style="color:red;font-size:20px;">css行內樣式</h1>
    <p>行內樣式</p>
    <p>嵌入樣式</p>
    <p>外部樣式</p>
    <p>導入樣式</p>
</body>
</html>

外部樣式表（建議）測試

<link rel="stylesheet" href="index2.css"><!-- grey -->

導入式字體

頁面加載很慢時可能出現無樣式url

同時存在瀏覽器兼容性問題spa

位於style標籤的第一行code

    <style>
        <!--
        @import url('index.css');/*green*/
        p{
            color:blue;
        }
        -->
    </style>

css使用方式區別htm

優先級：blog

就近原則，誰距離元素最近，誰的優先級越高

css選擇器

標籤選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p{
            color:blue;
        }
    </style>
</head>
<body>
    <p>css樣式</p>
</body>
</html>

類選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p{color:blue;}
        .red{color:red;}
    </style>
</head>
<body>
    <p>css樣式</p>
    <p class="red">經過類設置樣式</p>
</body>
</html>

id選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p{color:blue;}
        .red{color:red;}
        #big{font-size:30px;}
    </style>
</head>
<body>
    <p>css樣式</p>
    <p class="red">經過類設置樣式</p>
    <p id="big">經過id設置樣式</p>
</body>
</html>

全局選擇器（通配符選擇器）

*{margin:0;padding:0;font-family: "宋體";}

羣組選擇器

p,div{font-family: "宋體";}

後代選擇器

之間用空格隔開

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p em{color:red;}
    </style>
</head>
<body>
    <p><em>css</em>樣式</p>
    <div>經過<em>id</em>設置樣式</div>
</body>
</html>

僞類選擇器

連接僞類的順序，a:hover必須置於a:link和a:visited以後，纔有效，a:active必須在a：hover以後，纔有效。而link、visited兩個僞類之間順序無所謂，誰在前均可以

順序：:link :visited :hover :active 或者 :visited :link :hover :active

IE6不支持其餘元素的:hover和:active狀態

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        a:link{color:black;}
        a:hover{color:yellow;}
        a:visited{color:green;}
        a:active{color:red;}

        p:hover{color:yellow;}
        p:active{font-size:20px;}
    </style>
</head>
<body>
    <a href="#">連接樣式</a>
    <p>p標籤樣式</p>
</body>
</html>

css繼承和層疊

IE6如下版本，表格不會繼承body的屬性

IEtester測試IE瀏覽器個版本的兼容性

谷歌瀏覽器默認字體大小是16px，h1標籤默認字體大小是2em，在谷歌瀏覽器中顯示爲32px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{font-size:12px;}
        p{color:red;border:1px solid;}
        div{color:red;}
        div{font-weight:bold;}
    </style>
</head>
<body>
    <!-- span會繼承p元素的部分樣式屬性
        部分樣式沒法繼承，如border
     -->
    <p>css<span>繼承</span></p>
    <div>css層疊</div>
    <!-- h1字體大小爲24px -->
    <h1>h1字體大小是2em</h1>
</body>
</html>