常用的css屬性-字型

字型大小（font-size）

屬性值，常用的是數值+單位。常用font-size:0 來處理相容問題

網頁中預設的字型大小為16px，瀏覽器建議的最小字型為12px

瀏覽器之間存在差異，所以建議設定字型大小為偶數

一般在設計圖中量出的字型高度就是字型的大小

除了px單位，em：用於父級計算單位，常用於首行縮排（2em）

font-family：設定字型的型別

中文：要給屬性值新增引號（可加可不加）

英文：屬性值有多個英文單詞需要加引號，只有一個不需要加引號（瀏覽器預設微軟雅黑）

font-weight：加粗字型

100-900（整百數）100-500正常字型 ，600-900加粗

bold 加粗

bolder 跟粗的字型

重要 normal 正常的（可以對b標籤使用，只使用b標籤，但是不使用他的樣式）

font-style: 使字型傾斜

italic 傾斜的

oblique 更傾斜的

normal 正常的阿里巴巴向量圖示庫(外部的字型) 常用的標籤就是i

文字行高設定

單行文字行高（基線）Line-height

文字行高大於高度 文字向下移動

文字行高小於高度 文字往上移動

重要：文字行高等於高度的時候 文字在垂直方向居中

文字水平方向對齊屬性： text-align

屬性值：Left right center justify（較少-兩端對齊）

字型的複合寫法

font： font-weight font-style font-size/line-height font-family

注意點

- font-weight和 font-style可以不寫或者互換位置

- font-size和 line-height固定寫法 不能換位置 反斜槓必須要寫

- font-family有沒有設定 必須要寫 預設的微軟雅黑

文字顏色

屬性：color（切記不要寫成font-color）

屬性值

- 英文單詞 green pink yellow

- 十六進位制 0-9a-fA-F

- 需要前面加一個#開頭 後面跟6位字元

- 常見的顏色值 #ffffff #000000 #cccccc(六個字元是相同的情況下 可以簡寫成3個)

- ps中有一個吸管工具

- rgb(red,green,blue) 取值範圍是0~255

- rgba(red,green,blue,alpha) 透明度 0~1

拓展:opacity 透明度 0~1

文字修飾 text-decoration

屬性值：underline 下劃線

overline 上橫線

line-through 刪除線 等於<del>

重要：none清除預設的下劃線樣式

首行縮排：只對第一行文字起作用，懸掛式佈局

屬性：text-indent

屬性值：數值+單位

首行縮排常用單位是em和px

屬性值可以接正數也可以複數

列表屬性

1.定義列表的符號樣式

屬性：list-style-type

屬性值：disc（實心圓/預設）circle（空心圓）square（實心方塊）重要none（清除列表的預設樣式）

2.使用圖片作為列表的符號

屬性：list-style-image（相容性不好）

屬性值：url（)

3.定義符號的位置

屬性：list-style-position

屬性值：outside inside

邊框屬性

組成邊框需要幾個條件

邊框的寬度 border-width：數值 單位

邊框的顏色 border-color：和color一樣

邊框的樣式 border-style：solid（實線） dashed（虛線）dotted（點線) double（雙實線）

邊框的方向：順時針 四個方向（top，right，bottom，left）

像改變某一個方向上的顏色：border-方向值-color

簡寫方式

屬性：border

屬性值：border-width border-style border-color（不區分前後順序）

那些標籤自帶邊框？

input textarea（多行文字域） select（下拉選單/列表）

清除預設的邊框

border：none/0

border-方向值：none

盒模型總結

盒模型的組成部分（content+padding+border+margin）

計算盒子的真實大小 content+padding*2+border**2

計算盒子在瀏覽器中所佔的位置 content+padding2+border2+margin*2

背景屬性

1.背景色

屬性：background-color 簡寫成 background

2.背景圖片（與image區別：一個佔位，一個不佔位）

屬性：background-image

屬性值：url（）

當容器寬高大小比背景圖片大的時候，背景圖片預設會進行平鋪

當容器寬高大小和背景圖片大小相同時，背景圖片會完整顯示

當容器寬高大小比背景圖片小的時候 ，顯示一部分

3.背景平鋪屬性

屬性：background-repeat

屬性值：

no-repeat 不平鋪

repeat 平鋪，預設值

repeat -x 沿著X軸進行平鋪

repeat -y

4.背景定位

屬性：background-position：x y（可以簡寫成一個center）

-x水平方向：left right center

-y垂直方向：top bottom center

-x和y軸方向還可以設定數值+單位

5.背景圖的固定

屬性：background-attachment

屬性值：

fixed 固定

scroll 滾動

6.簡寫

屬性：background

屬性值：顏色 背景圖片 是否鋪平 背景定位 背景固定