首頁 > web前端 > css教學 > CSS樣式選擇器

CSS樣式選擇器

高洛峰
發布: 2017-02-14 15:04:32
原創
1819 人瀏覽過

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

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

語法:style='key1:value;key2:value2;'

在標籤中使用style='xx:xxx;'

在頁面中嵌入:

引入外部css文件


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


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

1、在標籤中使用

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、在頁中嵌入 

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=&#39;logo&#39;>123456</div>

    <div class=&#39;logo&#39;>aaa</div>

</body>

</html>

登入後複製

即在程式碼中加入一個程式碼區塊,自訂一個樣式,然後在後面的程式碼中可以重複呼叫


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=&#39;text&#39;]{

    color:blue

    }

    .logo a,.logo p{

        font-size:56px;

    }

</style>

登入後複製

1、class選擇器

.logo表示class='logo'時,引用此樣式


2、id選擇器時表示


2、id選擇器

,引用該樣式


3、組合選擇器選擇器

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


4、關聯選擇器號即所有a標籤下面的div標籤套用該樣式。


5、屬性選擇器

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

6、logo a. logo p表示class='logo'時,下面的所有a標籤和class='logo'時下面所有​​的p標籤,引用該樣式🎜🎜更多CSS樣式選擇器 相關文章請關注PHP中文網! 🎜
相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板