文本屬性 font-size: 16px 文字大小 font-weight: 700 文字粗細 值從100-900 (值為700看上去加粗了) 不推薦使用font-weight: bold font-family: microsoft yahei 字體(可以用中文如:宋體,或者英文:如simsun, ...
文本屬性
font-size: 16px 文字大小
font-weight: 700 文字粗細 值從100-900 (值為700看上去加粗了) 不推薦使用font-weight: bold
font-family: microsoft yahei 字體(可以用中文如:宋體,或者英文:如simsun,或用unicode編碼:如\5B8B\4F53)
font-style: normal 文字風格(如:normal是預設, italic:斜體)
line-height: 20px 行高
文本屬性連寫:font: font-style font-weight font-size/line-height font-family (最好按照順序)
註意:文本屬性連寫時文字大小和字體為必寫項,其他可以不寫
line-height
行高: 是基線和基線之間的距離(自行百度什麼是基線)
註意: 一行文字的行高和其設置的height屬性高度一致時,文字垂直居中
行高的單位有以下幾個(推薦使用px為單位):
行高單位 | 文字大小 | 行高值 |
px(如 20px) | 20px | 20px |
em(如 2em) | 20px | 40px |
%(如 150%) | 20px | 30px |
數字(如 2) | 20px | 40px |
總結: 單位除了px之外,其餘的都是與文字大小的乘積
行高單位 | 父元素文字大小 | 子元素文字大小 | 行高值 |
px(如 10px) | 20px | 30px | 10px |
em(如 2em) | 20px | 30px | 40px |
%(如 150%) | 20px | 40px | 30px |
數字(如 2) | 20px | 30px | 60px |
總結: 不帶單位時,行高是與子元素大小相乘;em和%是行高是與父元素大小相乘;以px為單位,就是直接定義行高值(所以推薦使用px為單位)
文本修飾
text-decoration: none(預設,a標簽使用這個能除去下劃線) / underline(下劃線) / line-through(刪除線)
背景屬性
background-color: #000 背景顏色
background-image: url(路徑) 背景圖片
background-repeat: repeat 背景平鋪 repeat(背景圖像將在垂直方向和水平方向重覆) / no-repeat(不平鋪) / repeat-x(沿x軸) / repeat-y(沿y軸)
background-position: left top 背景定位
註意: 方位值只寫一個時,另一個值預設居中;用數字(或百分號%)表示方位時,第一個值代表水平方向,第二個值代表垂直方向
background-attachment: scroll 背景是否滾動 scroll(預設 滾動) / fixed(固定)
背景屬性連寫: background: #fff url(路徑) no-repeat 30px 40px fixed
註意: 連寫沒有順序要求,但url為必寫項
鏈接偽類
a:link { 屬性:值;} 鏈接的預設狀態
a:hover { 屬性:值; } 滑鼠放在鏈接上顯示的狀態
a:visited { 屬性:值; } 鏈接訪問之後的狀態
a:active { 屬性:值; } 鏈接激活的狀態(滑鼠點擊不松)
補充: :focus選擇器(用於選取獲得焦點的元素) 如 標簽:focus { 屬性:值; }
補充:CSS三大特性
層疊性: 當多個樣式作用於同一個標簽,樣式發生衝突時,總是執行後面的代碼(和標簽調用選擇器的順序沒有關係)
繼承性: 文字的所有屬性都可以被繼承
特殊情況: h系列不能繼承文字大小; a標簽不能繼承文字顏色
優先順序: 預設樣式<標簽樣式<類選擇器<ID選擇器<行內樣式< !important
註意: 繼承的權重為0,與預設樣式一樣;權重可以疊加