css 常用屬性的詳細理解

2021-10-12 18:17:00 字數 2451 閱讀 1007

一、css選擇器

標籤選擇器 div span a p

類選擇器 :active

id選擇器 id = item

二、 css復合選擇器

後代選擇器

在css選擇器中通過巢狀的方式,特殊位置的html標籤進行宣告

外層的標籤寫存前面,內層的標籤寫在後面,之間用空格分開

標籤巢狀時,內層的標籤成為外層標籤的後代

交集選擇器

由兩個選擇器直接連線構成,選中二者各自元素範圍交集

第乙個必須是標選擇器,第二個必須是類選擇器或者id選擇器

選擇器之閭不能有空格,必須連綞書寫

並集選擇器

多個選擇器通過逗號連線而成,

利用並集選擇器同時宣告風格相同樣式

三、css 字型,文字,背景

1、標籤

2、字型樣式

3、文字屬性

4、找鏈結樣式

實際網頁開發中通常只設定兩種狀態,一種是a 包括鏈結的各種狀態,一種是a:hover 滑鼠移到物件上的樣式

5、網頁背景

background: 背景顏色 背景 背景定位 背景重複顯示方式

background: #ccc url(./src/1.png) 200px 10px no-repeat;

6、列表樣式

四、盒子模型 content /padding /border /margin

盒子模型:包含元素內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)幾個要素。

外邊邊框 border

外邊距 margin

magrin是設定物件外邊距外延邊距離。

(1) margin說明

margin的值有三種情況,可以正整數和負整數並加單位如px畫素;可以auto 自動屬性(margin-left:auto自動);可以百分比。

(2) 外邊距margin縮寫

margin:上 右 下 左

margin:1px 2px 3px 4px;

padding

a、四邊相同 padding 簡寫

padding:5px;

b、四邊不同 padding 簡寫

padding:上 右 下 左

padding:1px 2px 3px 4px;

五、display屬性

控制元素的顯示和隱藏

塊級元素與行級元素轉變

block 塊級元素的預設值,元素會顯示為塊級元素,該元素前後會帶有換行符

inline 行內元素/內聯元素的預設值,元素會被顯示內聯元素,該元素前後沒有換行符

none 設定元素不會被顯示

inline-block 行級塊元素 既有block元素可以設定width和height的特性,

有保持了inline元素不換行的特性。

六、浮動 float

屬性值說明

left

元素向左浮動

right

元素向右浮動

none

不浮動,預設值

如果a元素上乙個元素是標準流中的元素,那麼a的相對垂直位置不會改變,也是說 a的頂部總是和上乙個元素的底部對齊。

七、清除浮動 clear

clear屬性:

屬性值說明

left

左側不允許浮動元素

right

右側不允許浮動元素

both

左,右兩側不允許浮動元素

none

預設值,允許浮動元素出現在兩側

八、溢位處理 overflow

visible 預設值,內容不會被修改,會呈現在盒子之外

hidden 內容會被修剪,並且其餘內容是不可見的

auto 超出形成滾動條

九、定位網頁元素 position

position : static | absolute | relative | fixed

注意:position:absolute和float會隱式的改變display型別,不論之前是什麼型別的元素(display:none除外),只要設定了position:absolute或float,都會讓元素以display:inline-block的方式顯示,可以設定長寬 ,預設寬度並不佔滿父元素,就算是顯示的設定display:inline或display:block,仍然無效。

十、z-index 屬性

調整元素定位時重疊層的上下位置

z-index:整數,預設值為0

想要元素設定 z-index 樣式,必須讓它變成定位元素,包括relative/absolute/fixed

十一、設定元素透明度 opacity

opacity:x;

x 值為0~1,值越小越透明,

css常用樣式屬性詳細介紹

1 字型 font family 設定時,需考慮瀏覽器中有無該字型。2 大小 font size 注意度量單位。3 粗細 font weight 除了normal 正常 bold 粗體 bolder 特粗 lighter 細體 外,還有9種以畫素為度量為單位的設定方式。4 樣式 font style...

CSS屬性(常用的屬性)

css屬性 常用的屬性 一 文字與字型屬性 1.字型屬性 1 font size 字型的大小 例如 font size 14px em當前物件內文字字型大小 pt絕對長度單位 多少個點的單位 px相對長度單位 畫素 2 font family 字型的型別 例如 font family 隸書 宋體 a...

常用的CSS屬性

display 設定元素的顯示方式 block 塊級元素的預設值 inline 行內元素的預設值 inline block none 隱藏元素,這種隱藏是真的隱藏,隱藏後元素不再占用空間了 visibility hidden 也可以隱藏元素,但是這種隱藏只是元素不顯示了,在原位置還占用空間.text...