CSS基礎講解 屬性 選擇器 模型

2021-09-27 02:56:55 字數 2058 閱讀 5240

css也叫做層疊樣式表

css選擇器

id選擇器:id表示省份,在頁面中元素的id不允許重複,因此id選擇器只能選擇單個元素

標籤選擇器:根據標籤名稱 選擇對應的所有標籤

類(別)選擇器:選擇器擁有該類別的多個元素

(*號) 通用選擇器:針對頁面上所有的標籤都生效

選擇器 權重問題

行內樣式 《style=「… 」》大於

id選擇器 《#box》 大於

類選擇器 《.con》大於

標籤選擇器 《div》大於

通用選擇器 《*》

選擇器選擇的範圍越小越精確

優先順序就越高

css一些文字屬性:

文字顏色

字型型別

文字大小

文字加粗

文字傾斜 italic(傾斜)

首行縮排

水平對齊方式

行高 文字修飾 加下劃線

gif支援動畫

只有全透明和不透明兩種模式

只有256種顏色----圖形 圖示類

jpg採用有損壓縮演算法

體積較小

不支援透明

不支援動畫

png採用無失真壓縮演算法

體積也相對較小

支援背景透明

不支援動畫

元素的浮動布局

浮動元素會脫離網頁文件,與其他元素發生重疊

但是,不會與文字內容發生重疊

overflow:auto 表示溢位的意思,對於超出的元素 可以自動調整

clear:left、right、both :清除浮動的意思 左 右 和左右都不受浮動的影響

浮動元素在排列時,只參考前乙個元素位置即可

1.浮動元素不會覆蓋文字內動

2.浮動元素不會覆蓋內容

(因為本身也屬於文字,可以看做是乙個特殊的文字)

3.浮動元素不會覆蓋表單元素

(輸入框、單選按鈕、核取方塊、按鈕、下拉選項等)

css盒子模型基礎:

margin:0 將所有的元素編劇都設定為0

overflow:auto 讓父元素的高度包裹記憶體一樣

margin: auto(讓父元素自動設定邊距,左右邊距相等,即可達到居中效果,

只有水平方向有效,垂直方向無效)

margin -top 頂部邊距

margin -right 右邊邊距

margin -bottom 底部邊距

margin -left 左邊邊距

填充,就是指向乙個元素的內部,增加空間,也可以稱為「內邊距」

和外邊距不同的是,填充會改變元素大小。隨著填充的增加,元素會被撐大

padding 內邊距 也分為上右下左

盒子模型分為

內容–填充–邊框–邊距

填充會吧元素撐大 無論邊框還是邊距 都是分為 上右下左

補充background 背景屬性

background-color 背景顏色

background-image 背景

background-repeat 背景圖平鋪方式

可以連著一起寫,按這個順序寫

background 背景顏色-背景-平鋪方式

省略其中乙個也是可以的

border 邊框屬性

border-width 邊框寬度

border-style 邊框樣式

border-color 邊框顏色

border 1px solid #000000

邊框寬度 邊框樣式 顏色

border: 3px dashed

只有顏色可以省略 預設黑色 其他兩個不能省略 要注意順序

font 字型屬性

font-style:italic 斜體

font-weight:bold 加粗

font-family:arial,sans-serif 字型種類

font-size 20px 字型大小

line-height:35px 行高

順序font:斜體字 -加粗-字型大小大小-行高-預設字型-備用字型

可以加備用字型,在找不到預設的情況下 用備用字型

也是可以省略其中的 但是要注意順序

CSS選擇器 屬性選擇器

最近重新學習了css3,發現選擇器還能這麼玩。介紹一下屬性選擇器 我給咱們順著往下縷一縷 資訊量挺大 剛開始是這樣子 如下 doctype html head meta charset utf 8 title 測試網頁 title style h1 m1 style head body div h1...

css選擇器 屬性 盒子模型

分類 1.基礎選擇器 1.id選擇器 選擇具體的id屬性值的元素.建議在乙個html頁面中id值唯一 語法 id屬性值 2.元素選擇器 選擇具有相同標籤名稱的元素 語法 標籤名稱 3.類選擇器 選擇具有相同的class屬性值的元素。語法 class屬性值 注意 id選擇器優先順序高於 類選擇器選擇器...

CSS屬性選擇器

簡單屬性選擇器,如 css h1 class html 那麼以上h1標籤裡的內容字型顏色都會改變。同時我們也可以通過這種方法來給自己建立的標籤加上樣式,如 css planet moon html venus earth mars 這樣的話,第二條和第三條就會被加上樣式。還可以根據標籤裡的具體屬性值...