1. 程式人生 > >CSS樣式選擇器與常用的複合屬性的設定

CSS樣式選擇器與常用的複合屬性的設定

這一陣子事情太多,本來在android裡面玩個好好的,開發專案時,涉及到網路,需要做伺服器,本來就是自己寫的小專案練練手,突然手足無措,不知道該怎麼做,就去網上學了servlet,之後有接觸到了jsp,對於前端網頁不怎麼熟悉的我,也不得不轉到前端學習點知識,恐怕最近的日誌都在前端混混,有些東西實在記不住,就記下來吧

1.css的基礎選擇器
(1).標記選擇器
是指用html便籤為名的選擇器
例如

<p></p>
對應的選擇器就是:p{屬性1:屬性值1.。。。。}

大家大致能夠看出,標記選擇器對標記進行整體的控制,不利於差異化
但是控制面板較廣
(2).類選擇器
是指用”.類名”進行選擇
例如

<P class="select"></p>
對應的選擇器為:.select{屬性1:屬性值1.。。。。} ----有個點

這種控制方式對有類名的標記進行修飾,當兩個標記需要一個選擇器進行修飾時,就可以使用這種方式

(3)id選擇器
是指用id唯一標識的選擇器,使用“#”
例如

<p id="select"></P>
對應的選擇器為:#select{屬性1:屬性值1.。。。。}

id選擇器是唯一的,只能修飾唯一一個標記,這在後面我們進行js控制時非常有用。
(4)萬用字元選擇器
使用*表示,能夠匹配頁面所有的元素

<p></p>
<strong></strong>...
使用這樣進行整體控制 *{屬性1:屬性值1.。。。。} 說實話,真不建議用,極大地減低了程式碼的執行速度

2.複合選擇器

(1).標籤指定式選擇器(交集選擇器)
由兩個選擇器構成,第一個為標記選擇器,第二個為class選擇器或id 選擇器,兩個選擇器之間不能有空格
例如:

<p class="one"></p>
<p class="two"></p>
<h3 class="one"></h3>
class選擇器one被h3和p同時使用,但我們想對p進行控制時
p.one{屬性1:屬性值1.。。。。}

(2)後代選擇器
用來選擇元素或元素組的後代
外層標記寫在外面,內層標記寫在後面,中間用空格隔開
例如:

<p><strong>...</strong></P>
選擇器為:
p strong{屬性1:屬性值1.。。。。}
記住只能用於標記,不能使用類或id進行後代

(3)
並集選擇器
通過逗號連線,各種選擇器都可以
例如

<P id="one"></p>
<a class="two"></a>
<strong></strong>
<a><h1></h1></a>
選擇器為:
#one,.two,strong,a h1{屬性1:屬性值1.。。。。}

3.常見的複合css屬性
在css中,css的屬性有的是複合的。下面總結如下

(1)font:綜合設定字型樣式
基本語法為:

選擇器{font: font-style font-variant font-weight font-size/line-height font-family;}
使用font屬性時,必須按照上面的語法順序進行設定,各個屬性之間用空格隔開
不需要設定的屬性可以省略(有預設值),但必須保留font-size和font-fimaly屬性

(2)border(邊框)屬性
border屬性也可以單獨設定,我們只說複合寫法
2.1 單邊操作

border-top:寬度 樣式 顏色
border-bottom:寬度 樣式 顏色
border-left:寬度 樣式 顏色
border-right:寬度 樣式 顏色
都是一樣的,例如
border-top:1px solid #ccc;

2.2整體設定

border:四邊的寬度 樣式 顏色;(不分先後,不用背了)

(3)padding(內邊距)

padding:上內邊距[右內邊距 下內邊距 左內邊距]
padding相關的屬性的取值可以使用auto自動(預設值),不同單位的數值,相對於父元素的百分比%,實際工作中最常用的是px,不允許使用負值
按照順時針進行賦值
一個值為四邊
兩個值為上下/左右(通常將上下設定後 ,左右為auto會自動對齊)
三個值為上/左右、下

(4)margin(外邊距)
說實話,使用和上面的好像,就是功能不一樣,這個是外邊距

margin:上內邊距[右內邊距 下內邊距 左內邊距]
margin相關的屬性的取值可以使用auto自動(預設值),不同單位的數值,相對於父元素的百分比%,實際工作中最常用的是px,不允許使用負值
按照順時針進行賦值
一個值為四邊
兩個值為上下/左右(通常將上下設定後 ,左右為auto會自動對齊)
三個值為上/左右、下

(5)background(背景)

background:背景色 uri("影象") 平鋪 定位 固定;
不需要的屬性可以省略,沒有嚴格的順序,但一般就是這麼寫。