1. 程式人生 > >CSS基礎知識總結之css樣式引用的三種方式

CSS基礎知識總結之css樣式引用的三種方式

基礎 通過 基礎知識 set nbsp 知識總結 引用關系 元素 type

在html中增加css樣式有三種:

1.在標簽中增加style屬性:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>天藍藍</title>
    <!--tag標簽的圖標-->
    <link rel="shortcut icon" href="timg.jpg">
</head>
<body>
<
div style="background-color: blue ;width: 80px;height: 80px "></div> </body> </html>

技術分享圖片

2.

第二種可以在head中增加style標簽 style中通過選擇器定位標簽增加style樣式

css選擇器:

  id選擇器:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <
title>天藍藍</title> <style> /*id選擇器*/ /*#代表id,#i1代表定位到class為i1的元素*/ #i1{ background-color: #000000; width: 80px; height: 80px; } </style> </head> <body> <!--id在html只允許出現一個同名id--> <div id="i1"></div>
</body> </html>

  class選擇器:最常用

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>天藍藍</title>
    <style>
        /*class選擇器*/
        /*.代表class,.c1代表定位到class為c1的元素*/
       .c1{
           background-color: #000000;
           width: 80px;
           height: 80px;
       }
    </style>
</head>
<body>
<div class="c1"></div>
</body>
</html>

  標簽選擇器:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>天藍藍</title>
    <style>
         /*標簽選擇器*/
        /*所有的div的標簽都帶有下面屬性*/
       div{
           background-color: pink;
           width: 80px;
           height: 80px;
       }
    </style>
</head>
<body>
<div class="c1"></div>
<div></div>
</body>
</html>

技術分享圖片

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>天藍藍</title>
    <style>
       div{
           background-color: pink;
           width: 80px;
           height: 80px;
       }
        .c1{
            background-color: blue;
            width: 80px;
            height: 80px;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div></div>
</body>
</html>

技術分享圖片

  層級選擇器:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>天藍藍</title>
    <style>
       /*層級選擇器*/
        div span{
            background-color: red;
            width: 80px;
            height: 80px;
        }
         #i1 span{
             background-color: blue;
             width: 80px;
             height: 80px;
         }
        .c1 span{
            background-color: pink;
            width: 80px;
            height: 80px;
        }
    </style>
</head>
<body>
<div class="c1">
    <span>這是span標簽</span>
</div>
<div id="i1">
    <span>這是span標簽</span>
</div>
<div>
    <span>層級選擇器</span>
</div>

</body>
</html>

  多個標簽引用同一個標簽:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>天藍藍</title>
    <style>
        /*多個標簽引用同一個標簽*/
         #i1,#i2,#i3{
             background-color: blue;
             width: 80px;
             height: 80px;
         }
        .c1{
            background-color: pink;
            width: 80px;
            height: 80px;
        }
    </style>
</head>
<body>
<div id="i1"></div><br>
<div id="i2"></div><br>
<div id="i3"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
</body>
</html>

3. 在head裏面使用link引入css樣式表:

css表:c1.css

.c1{
    background-color:red;
    width: 80px;
    height: 80px;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>天藍藍</title>
    <link rel="stylesheet" href="c1.css">
</head>
<body>
<div class="c1"></div>
<div class="c1"></div>
</body>
</html>

樣式表的引用順序聯系:

css表:c2.css

.c1{
    background-color: pink;
    width: 100px;
    height: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" href="c2.css">-->
    <style>
        /*樣式表的引用關系,以標簽為起的位置,由下而上的開始應用*/
     .c1{
        background-color: red;
        width: 100px;
        height: 100px;
        }
    </style>
    <link rel="stylesheet" href="c2.css">
</head>
<body>
<div class=‘c1‘ style="background-color: #0000CC;width: 100px;height: 100px"></div>
</body>
</html>

CSS基礎知識總結之css樣式引用的三種方式