css筆記 選擇器

css規則

一、繼承性:父元素的樣式能夠被子元素所繼承（顏色、字體）.

二、層疊性：給一個元素設置不一樣的說明，其效果會疊加。

三、優先級：給同一個元素設置相同的的說明，效果之後者爲準，也叫就近原則

 

由選擇器和樣式聲明組成

CSS選擇器：選擇頁面上的元素

一、元素選擇器：經過元素名選擇CSS做用的目標 好比：<p></p>、<h1></h1>

二、類選擇器：選擇class等於某個值的全部屬性 。class是程序員根據邏輯本身給元素增長的分類

CSS代碼：.class {}

三、id選擇器：id 選擇器：選擇id等於某個值的惟一元

1     /*三、id 選擇器：選擇id等於某個值的惟一元素*/
2     #p4{
3         color:yellowgreen;
4     }

demo

四、選擇器組：寫出一組選擇器，並選中每一個選擇器所對應的目標並集

1  .girl,#p4 {
2         font-weight: bold;  /*(加粗)*/
3 
4     }

demo

 

五、派生選擇器：

1選擇某元素的子孫

 

1   /*五、1選擇某元素的子孫*/
2     #p5 b{color: crimson;
3     }

demo

 

2選擇某元素的兒子

 

1   /*五、2選擇某元素的兒子*/
2     #p5>b{
3         font-size: 30px;
4     }

demo

 

僞類選擇器

經常使用僞類有：

選擇未訪問過的超連接

a:link{

}

選擇已訪問過的超連接

a:visited{

}

選擇激活態（正在點）的按鈕

#x1:active{

}

選擇有焦點的文本框、文本域、密碼框

#x2:focus{

}

選擇鼠標懸停態（觸碰）的圖片

img:hover{

}

 

css聲明

border屬性：設置元素的邊框

元素單位

%：百分比

in：英寸

cm：釐米

mm：毫米

pt：鎊（1Pt等於1/72英寸）

px：像素（計算機上的一個點）

em：1em等於當前的字體尺寸，2em等於當前尺寸的兩倍

 

當內容溢出元素框如何處理

overflow:auto;/*溢出加滾動條*/

}

內邊距：padding

外邊距：margin

實際佔有的寬=width+2border+2padding+2margin

實際佔有的高=height+2border+2padding+2margin