標籤:weight 移動 空白 劃線 起點 ati 位移量 表示 border
(一)常用的字型屬性:
font-weight: 屬性值100-900 400等於正常 700等於bold ,數值越大,越粗
font-size:字型大小,單位可以為px或者%
font-family:字型族 比如說:微軟雅黑
font-style:字型的樣式 italic斜體 normal正常
font-variant:small-caps 將字母轉化為小一號的大小字母
注意:所有屬性也可以通過font一個屬性寫,例如:
font:italic bold 75%/1.8 ‘Microsoft Yahei‘,sans-serif,寫的順序:font-style font-variant font-weight font-size line-height font-famiyl,多個樣式有空格分開,必須按照這個順序寫,font-size和line-height中間必須用/分開
(二)字型的顏色:color:屬性值可以寫顏色英文,例如:red 或者rgb(0-255,0-255,0-255); 或者rgba(0-255,0-255,0-255,0-1);0表示透明,1表示不透明
opacity:0-1;也表示透明。和rgba()的區別,該屬性會作用於後代標籤,而rgba()不會 (三)行距、對齊
line-height (行高) :a.像素單位,比如48px b.不帶px 正常行高的倍數 c.百分數 同b(調整控制項中文字垂直方向垂直置中的方式,控制項的height=控制項的line-height) text-align (對齊):區塊層級元素中文字的水平對齊left center right letter-spacing (字元間距): 字與字之間的距離 text-decoration (文本修飾 ):底線underline 刪除線line-through 上劃線overline none(可以去掉超連結的底線) overflow:控制超出範圍文本的顯示方式,auto根據文字多少自動顯示捲軸,scroll始終顯示捲軸,hidden超出範圍文本隱藏,也可以通過overflow-x、overflow-y設定水平和垂直方向 text-overflow:設定多餘文字的顯示方式,clip裁減掉,ellipsis省略符號,(重點,讓每行多餘的文字顯示省略符號,a.white-spacing:nowrap b.overflow:hiddern text-overflow:ellipsis) text-shadow:(4個屬性值:水平陰影距離 垂直陰影距離 模糊距離 陰影顏色)文本的陰影,前面2個屬性值不能省。水平陰影距離越大,陰影右移。垂直陰影距離越大,陰影下移。陰影模糊距離,數值越大,陰影越來越模糊,預設為0,不模糊。陰影顏色,可以選,預設為黑色 text-indent:首行縮排,可以用像素值調整縮排大小 text-stroke:描邊的粗細,描邊的顏色 white-space:nowarp 設定中文行末不斷行顯示(中文預設自動換行,英文不會自動換行,根據空格會自動換行) word-break:瀏覽器預設在空格處斷行,當一個單詞長度超出範圍時,會不斷行顯示,break-all允許在單詞內換行
(五)背景樣式: background (縮寫形式) background-color(背景色 ) background-image(背景圖 ):url(圖片的地址),背景圖和背景色同時存在,背景圖會覆蓋背景色 background-repeat(背景圖重複方式 ): no-repeat(不平鋪) repeat-x(水平平鋪) repeat-y(垂直平鋪) repeat平鋪(預設) background-position(位置座標、位移量 2個屬性值:水平和垂直):指定位置:left/center/right ,可以寫像素或者百分比,唯寫一個屬性值,預設寫的是水平方向,另外一個方向預設垂直置中(注意:當使用像素時候,圖片的左上方往各個方向移動的實際距離, 當使用百分比的時候,建議不使用負數,代表去掉圖片後剩餘空白距離的分布比例,例如:background-positon:30% 水平方向去掉圖片後,剩餘的地區3:7分) top/center/bottom 當唯寫一個屬性值的時候 另外一個預設置中 background-clip :border-box (從邊框外緣開始顯示)padding-box(從邊框內緣開始顯示) content-box(從文字內容開始顯示,不在顯示區的背景圖或背景色會被裁切不顯示) background-origin:定位的起點 border-box(從邊框外緣開始) padding-box(從邊框內緣) content-box(從文字內容區開始) background-size:背景圖片大小 一般2個屬性:寬度 高度,當只有一個屬性值的時候,預設為寬度,高度等比縮放 寬高的寫法:a.直接寫像素 b.寫百分比(父容器寬高的百分比)
CSS常用字型屬性(多出的文本隱藏,或者以省略符號的形式顯示)和背景樣式以及背景圖的2個不常用屬性:background-origin和background-clip