CSS中的四種樣式及選擇器

時間 2019-11-24

標籤 css 四種樣式選擇器欄目 CSS 简体版

原文原文鏈接

CSS語法

選擇符表示要定義樣式的對象，能夠是元素自己，也能夠是一類元素或者制定名稱的元素.
屬性：屬性是指定選擇符所具備的屬性，它是css的核心，css2共有150多個屬性
屬性值：屬性值包括法定屬性值及常見的數值加單位，如25px，或顏色值等。
說明：
1）每一個CSS樣式由兩部分組成，即選擇符和聲明，聲明又分爲屬性和屬性值；
2）屬性必須放在花括號中，屬性與屬性值用冒號鏈接。
3）每條聲明用分號結束。
4）當一個屬性有多個屬性值的時候，屬性值與屬性值不分前後順序。
5）在書寫樣式過程當中，空格、換行等操做不影響屬性顯示。

四種樣式

<head>
        <meta charset="utf-8">
        <!--外部樣式-->
        <link rel="stylesheet" href="../css/demo.css"> 
        <!--內部樣式-->
        <style>
        div{
            height: 100px;width: 200px;background: red;
        }
        </style> 
        <!--外部導入樣式表-->
         <style>
        @import url(../css/demo.css);
        </style> 
    </head>
    <body>
    <!--內聯樣式-->
    <div style="height:500px;width:200px;background:pink"></div>
    </body>
複製代碼

link和@import的區別
一、本質差異:link是標籤，而@import只是CSS提供的一種方式；
二、加載順序差異:link是css和html文件同時加載，而@import是先加載結構後加載樣式；
三、兼容性差異:link的兼容性好，@import只兼容IE5以上版本；
四、dom控制樣式時的差異:link加載的樣式js的dom能夠控制，而@import加載的樣式js的dom不能控制。
外部導入樣式通常不用css

樣式權重

內聯樣式>外部樣式=內部樣式
內聯樣式的權重是最高的
內部樣式和外部樣式的權重和代碼的書寫順序有關，誰的書寫順序靠後，誰的權重就高html

選擇器種類

經常使用的選擇符有十種左右
類型選擇符，id選擇符，class選擇符，通配符，羣組選擇符，包含選擇符，僞類選擇符(僞類選擇符CSS中已經定義好的選擇器,不能隨便取名)，僞對象選擇符(設置在對象後發生的內容。用來和content屬性一塊兒使用 )bash

1）元素選擇符/類型選擇符（element選擇器 )

語法：元素名稱{屬性：屬性值；}
說明：
a)使用結構中元素（標籤）名稱做爲選擇符。例如body、div、p,img,em,strong,span......等。
b)全部的頁面元素均可以做爲選擇符;
用法：
1)若是想改變某個元素得默認樣式時，可使用類型選擇符；（如：改變一個div、p、h1樣式）
2) 當統一文檔某個元素的顯示效果時，可使用類型選擇符（如：改變文檔全部p段落樣式）dom

2) id選擇器

語法： #id名{屬性：屬性值;}
說明：
A）當咱們使用id選擇符時，應該爲每一個元素定義一個id屬性
如：<div id="div1"></div>
B）id選擇符的語法格式是「#」加上自定義的id名
如：#box{width:300px; height:300px;}
C) 起名時要取英文名，不能用關鍵字：(全部的標記和屬性都是關鍵字)
如：head標記
D）id選擇器具備惟一性，即一個名稱只能對應一個元素。
E) 最大的用處：建立網頁的外圍結構。url

3）class選擇器

語法：.class名{屬性：屬性值;}
說明：
A）當咱們使用class選擇符時，應先爲每一個元素定義一個類名稱
B）class選擇符的語法格式是："如：<div class="top"></div>"
用法：class選擇符更適合定義一類樣式；spa

4)*通配符

語法：{屬性：屬性值；}
說明：通配選擇符的寫法是「」，其含義就是全部元素。用法：經常使用來重置樣式。code

5）羣組選擇器

語法：選擇符1，選擇符2，選擇符3{屬性：屬性值;}
例如：#box,.header,p,span{color:red;}
說明：當有多個選擇符應用相同的樣式時，能夠將選擇符用「，」分隔的方式，合併爲一組。cdn

6）包含選擇器

語法：選擇符1 選擇符2{屬性：屬性值;}
例如：#box .child p{color:yellow;} 說明：選擇符1和選擇符2用空格/>/+/~隔開，含義就是選擇符1中包含的全部選擇符2;
用法：當個人元素存在父級元素的時候，我要改變本身自己的樣式，能夠不另加選擇符，直接用包含選擇器的方式解決。htm

7）僞類選擇器(僞類選擇符)

語法：
a:link{屬性：屬性值;}超連接的初始狀態;
a:visited{屬性：屬性值;}超連接被訪問後的狀態;
a:hover{屬性：屬性值;}鼠標懸停，即鼠標劃過超連接時的狀態;
a:active{屬性：屬性值;}超連接被激活時的狀態，即鼠標按下時超連接的狀態;
要讓他們遵照一個愛恨原則LoVe/HAte,也就是Link--visited--hover--active。
說明：
A）當這4個超連接僞類選擇符聯合使用時，應注意他們的順序，正常順序爲：
a:link,a:visited,a:hover,a:active,錯誤的順序有時會使超連接的樣式失效；
B）爲了簡化代碼，能夠把僞類選擇符中相同的聲明提出來放在a選擇符中；
例如：a{color:red;} a:hover{color:green;} 表示超連接的三種狀態都相同，只有鼠標劃過變顏色。對象