今天我們來了解一下css的常用屬性

復合選擇器、注釋、border、css屬性層疊與繼承、background、文字修飾屬性與行高、偽類等

CSS看似比較繁雜，其實只要掌握了CSS中的盒子模型、定位、以及頁面布局，就基本上掌握了大半啦~這時我們就已經能夠對網頁中各個元素進行精準的排版，做出符合我們意愿的網頁啦！

關于CSS的各種屬性，我們還是可以參考學習HTML那樣。可以說CSS的屬性幾乎完全是語義化的。我們需要改變邊框，那就是“border”，那我們需要右側邊框做一些改變，那就是“border-right”。很明顯，接下來按照我們的需求還有“右邊框的寬度——border-right-with”，”右邊框顏色——border-right-color”等等等，諸如此類~

完全就是我們需要什么，只要憑著需求去尋找。~follow me~

1.復合選擇器

復合選擇器是將基礎選擇器連在一起使用，也可以稱為高級選擇器。復合選擇器常用的幾種分別為：分組選擇器，后代選擇器，指定標簽選擇器等。下面我們來分別認識一下這些選擇器。

①分組選擇器（并集選擇器，多元選擇器）：用來給多個元素加同一個樣式；

作用：

控制頁面中樣式相同的盒子

一個逗號表示合并關系，

用逗號連接所有的選擇器，可以是基礎選擇器也可以是復合選擇器

例：.one,#one,a,span{color:red;font-size:14px;}意思是類one,#one,a標簽，span標簽有共同屬性;div,p,h1,span{ background:blue;}意思是將這些元素背景設置為藍色

這是p

我是h1標題

②后代選擇器：給子類元素加屬性;

把外層的標記寫在前面，內層的標記寫在后面，之間用空格分隔,可以隔代選擇。

tips：

一個空格表示包含（嵌套）關系，不管空格前后是哪種基礎選擇器，只要有空格就是后代選擇器

例：.one a{text-decoration:none;}意思是類one的后代a標簽修飾的內容無下劃線;

ul li{...} - 選擇ul標簽里面的li標簽

ul .list{...} - 選擇ul標簽里面class為list的標簽

.list li{...} - 選擇class為list的標簽里面li標簽

.box .list{...} - 選擇class為box的標簽里面的class為list的標簽

.nav .list{...} - 選擇class為nav的標簽里面的class為list的標簽

.nav .list li{...} - 選擇class為nav的標簽里面class為list的標簽里面的li標簽

下面我們通過一個小例子感受一下

• list red
• list pink

③指定標簽選擇器：給指定的子元素加屬性；

由標簽選擇器和類選擇器或者id選擇器構成的復合選擇器，中間沒有任何符號

tips:

不管標簽身上有類選擇器也好，或者id選擇器也好，直接在標簽選擇器后面連著寫，別的什么都不加

例：div#nav{..} - 選擇id為nav的div

ul.list{...} - 選擇class為list的ul

li.pink{...} - 選擇 class為pink的li

• list red
• list pink

2.注釋

CSS注釋 –/*注釋內容*/

HTML注釋 –

作用：能夠使加了注釋的代碼不被瀏覽器渲染。一般工作中，利用添加注釋的方式給工作人員添加幫助信息

tips:

CSS注釋可以單獨放在一行使用，也可以在樣式條里面使用

清晰的注釋有利于開發人員讀懂代碼，便于后期維護

大家也可以試試f12查看一下網頁的源代碼，看看各大網站都有什么隱藏小秘密哦

我是一個html注釋

• list red
• list pink

3.border

這里為什么要把border單獨拿出來講一下是因為border有很多妙用，border是一個很有意思的css屬性，巧妙使用border有些效果就不需要用圖片實現。下面我們先看一下border的屬性。

border屬性是復合屬性 – 允許鏈接多個屬性值的屬性即是復合屬性

允許書寫3個屬性值，分別是：邊框線粗細、線條樣式、邊框線顏色。CSS要求復合屬性各個屬性值之間用空格隔開（屬性值不分先后順序）

tips：當border沒有設置顏色值的時候，跟字體顏色保持一致

下面我們通過幾個小例子體驗一下border的妙用吧

①利用border畫個圓border-style:dotted

我們要實現圓角效果想到的就是border-radius:50%。然而該屬性ie8是不支持的，而在IE瀏覽器下點線是由小圓點組成的。所以我們可以巧妙運用該屬性來實現圓角效果，而不用借助圖片。

②利用border制作三杠icon效果 border-style:double

我們要實現圓角效果想到的就是搞個圖標上去？切圖還是font圖標，其實這個我們完全可以利用border屬性來實現（:border-style:double的表現規則：雙線寬度永遠相等，中間間隔±1）

③利用border實現+號效果 border-color

因為border的顏色是和字體顏色一致，所以hover的時候+號跟隨虛線邊框的顏色改變，所以不用擔心hover時顏色不一致的問題，我們可以利用這個特點做一些效果。比如：具有邊框的a標簽，正常狀態下邊框和字體顏色為灰色，鼠標經過時為藍色

④利用border畫個三角形

如何實現的，為何會有這樣的效果，不急，take it easy!

⑤實際的應用，不說話直接看圖

實現這些效果的關是“覆蓋”，另外一個邊框形成的尖角覆蓋之前的一個，只要控制好覆蓋的位置，然后就形成了實際上的不規則尖角或是尖角邊框。您還可以發揮您的創造力，實現更多其它的效果。

4.css屬性層疊與繼承

①層疊性 – 覆蓋

在權重相同的情況下，后寫的css屬性覆蓋先寫的css屬性；后寫css樣式條覆蓋先寫的css樣式條

例如：

div{background:red;} div{background:green;background:pink;}

最終結果div背景色為pink。

②繼承性

某些css屬性會從父級繼承給子級，某些則不會繼承

文字控制屬性可以被繼承，區塊控制屬性不可以被繼承。

5.background

background屬性是一個復合屬性，允許連接多個屬性值，屬性值之間用空格隔開

background：背景色 背景圖 平鋪方式 背景圖定位；

各個屬性不分先后順序，但是一般在工作中按這個順序書寫就好。

背景色 background-color

背景圖 background-image

平鋪方式 background-repeat

背景圖定位 background-positon

①平鋪方式

平鋪 – repeat（默認值）

x軸平鋪 – repeat-x

y軸平鋪 – repeat-y

不平鋪 – no-repeat

background-position取值為坐標，是先左右（水平）方向，后上下（垂直）方向。中間用空格隔開。

tips：

可以取值為數字(整數)

可以是正數，也可以是負數

可以取值為英文

水平方向取值為left 和right,垂直方向取值為top和bottom,居中為center。

②背景圖定位

取值：1.具體像素單位數值；2.方向英文（left，top，right，bottom，center）

注意：背景圖定位取值：水平方向位置 垂直方向位置，且順序不可以顛倒

body{ background:#f70 url(...) no-repeat left bottom; height:700px;}

6.文字修飾屬性與行高

①文字線段 ： text-decoration

none – 無線段

overline – 頂劃線

line-through – 刪除線/貫穿線

underline – 下劃線

②加粗屬性 ： font-weight

normal– 正常

bold– 加粗

③字體風格 ： font-style

italic – 傾斜

normal– 正常

超鏈接

這是需要下劃線的

頂劃線

刪除線

④行高：line-height

從文字中心基線出發，向上向下同時延伸，這段距離其實就是行高

只針對于單行：保證div的height和line-height的屬性值一致。

例如：

div{ width:400px; height:50px; line-height:50px; }

作用：文字垂直居中

7.超鏈接的偽類

偽類其實就一個狀態，超鏈接有4個狀態供我們學習：

訪問前（默認狀態） – ：link

訪問后 – ：visited

鼠標移上 – ：hover

點擊狀態 – ：active

注意：當要同時修改超鏈接的四個狀態的時候，一定要遵循順序：L~V~H~A

link,visite,active必須配合a標簽的href屬性一起使用。

沒有href屬性，a標簽就不是超鏈接，就談不上訪問前后這些狀態。

只存在鼠標移上去之前和移上去之后的不同。

超鏈接

tips：

一般工作中，超鏈接的默認狀態和訪問后狀態樣式完全相同，可以并集選擇器放到一起書寫，也有一種最優的寫法：直接書寫a標簽選擇器，代表的是同時選中超鏈接的所有狀態，萬一哪個狀態特殊，再單獨設置樣式；一般情況下，默認狀態的超鏈接都沒有下劃線，目的就是想要讓頁面干凈整潔

其他元素也有hover這個偽類

其他元素也有hover這個偽類，但是由于兼容性不是很好，所以不推薦使用，除非公司明確說了，就是不管那些低版本的瀏覽器，那可以放心的使用。

利用border實現+號效果 border-color也可以用下面這種方法實現

tips學習小技巧:

學習前端需要方法，更需要一顆平常心，不要把前端想的多難，需要吃什么苦。。。既然學習這么痛苦，為什么不快樂一點學呢？anyway~希望大家可以成為一個優秀的前端！資歷有限，錯誤難免，歡迎大力指正。

【WEB前端大作戰】火熱進行中：https://bbs.huaweicloud.com/blogs/255890

CSS HTML web前端 容器

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。