CSS樣式選擇器

餘二五發表於2017-11-22
CSS

css是英文Cascading Style Sheets的縮寫，稱為層疊樣式表，用於對頁面進行美化。存在方式有三種：

元素內聯、頁面嵌入和外部引入。比較三種方式的優缺點。

語法：style=`key1:value;key2:value2;`

  1. 在標籤中使用style=`xx:xxx;`

  2. 在頁面中嵌入：<style type=`text/css`> </style>塊

  3. 引入外部css檔案


必要性：美工會對頁面的色彩搭配和圖片的美化負責，開發人員必須知道是如何實現的。


分別看下上面三種方式怎麼使用：

1、在標籤中使用<style type=`text/css`> </style>塊

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/css"; charset="UTF-8">
    <title>頁面一</title>
    <link rel="stylesheet" href="commom.css" />
</head>
<body>
    <div style="background-color:red;">123</div>
     
</body>
</html>


2、在頁面中嵌入 <style type=`text/css`> </style>塊

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/css"; charset="UTF-8">
    <title>頁面一</title>
    <link rel="stylesheet" href="commom.css" />
    <style>
        .logo{
            background-color:red;
        }
    </style>
</head>
<body>
    <div class=`logo`>123456</div>
    <div class=`logo`>aaa</div>
</body>
</html>

即在程式碼中新增一個<style></style>程式碼塊，自定義一個樣式，然後在後面的程式碼中可以反覆呼叫



3、引入外部css檔案

如果有多個html檔案需要引用自定義的css樣式，那麼按照第二種方式的做法就需要在每一個html檔案中定義一個樣式，為了解決這個問題，可以定義一個檔案，寫入自定義的樣式，然後從檔案中呼叫這個樣式即可。




style的寫法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
    .logo{
        background-color:red;
    }
    #logo{
        background-color:red;
    }
    a,div{
        color:red;
    }
    a div{
        color:red
    }
    input[type=`text`]{
    color:blue
    }
    .logo a,.logo p{
        font-size:56px;
    }
</style>

1、class選擇器

.logo表示class=`logo`時，引用該樣式


2、id選擇器

#logo表示id=`logo`時，引用該樣式


3、組合選擇器選擇器

a,div表示所有的a標籤和div標籤引用該樣式


4、關聯選擇器

a div表示層級關係，即所有a標籤下面的div標籤應用該樣式。


5、屬性選擇器

input[type=`text`]，屬性標籤，表示所有的type為`text`的標籤引用該樣式


6、.logo a,.logo p表示class=`logo`時，下面的所有a標籤和class=`logo`時下面所有的p標籤，引用該樣式

本文轉自 曾哥最愛 51CTO部落格，原文連結：http://blog.51cto.com/zengestudy/1892346，如需轉載請自行聯絡原作者


相關文章