字體樣式
i.font-size:設(shè)置字體大小
font-size:100px;//單位是像素font-size:1em;//單位是em,1em=16px,瀏覽器默認(rèn)字體大小是16px
ii.font-weight:設(shè)置字體加粗
font-weight:bold;font-weight:900;//值的范圍是100~900,數(shù)字越大,字體越粗font-weight:normal;//正常(不加粗)
iii.font-style:設(shè)置字體風(fēng)格(傾斜)
font-style:italic;//傾斜的角度比較大font-style:oblique;//傾斜的角度較小font-style:normal;//不傾斜
iv.font-family:設(shè)置字體系列
font:設(shè)置字體所有樣式
i. 順序:字體傾斜-》字體粗細(xì)->字體尺寸-》字體系列
ii若要使用font屬性,必須指定字體尺寸和字體系列,其他的可以省略
文本屬性
a)文本修飾:text-decoration
i. underline;//定義文本的下劃線
ii. line-through;//中劃線
iii. overline;//上劃線
iv. none;//去掉下劃線
b)文本對齊方式(水平位置):text-align
i. left;//設(shè)置文本水平居左
ii. center;//居中
iii. right;//居右
a)文本的行高:line-height
b)設(shè)置文本水平垂直居中:
i. Height與line-height一起使用并且要設(shè)置相同的值,可以設(shè)置文本垂直居中
ii.
a)設(shè)置文本縮進(jìn):text-indent
text-indent:2em;//1em=16px
b)設(shè)置單詞之間的間距:word-spacing
c)設(shè)置字母之間的間距: letter-spacing
d)設(shè)置文本自動換行時的處理方法:word-break值描述
normal 使用瀏覽器默認(rèn)的換行規(guī)則。
break-all 允許在單詞內(nèi)換行。
keep-all 只能在半角空格或連字符處換行。
e)設(shè)置是否允許長單詞或url換到下一行:word-wrap
normal 只在允許的斷字點換行(瀏覽器保持默認(rèn)處理)。
break-word 在長單詞或 URL 地址內(nèi)部進(jìn)行換行。
列表屬性
a) list-style-type//設(shè)置列表類型樣式
b) list-style-image//設(shè)置列表樣式為圖片
c) list-style-position//設(shè)置列表縮進(jìn)
d) list-style://設(shè)置列表的一系列樣式
list-style:none;
list-style一系列樣式
圖片與文字的垂直對齊方式:vertical-align
a) top;//設(shè)置文字居圖片的上方
b) middle;//中間
c) bottom;//底部
邊框?qū)傩?/h5>
a) 設(shè)置邊框樣式:border-style
1.border-style:solid//實線
2.border-style:dashed//虛線
3.border-style:dotted;//點劃線
4.border-style:double;//雙劃線
a)設(shè)置邊框?qū)挾龋篵order-width
b)設(shè)置邊框的顏色:border-color
border:1px solid blue;“三劍客”
border//設(shè)置邊框一系列樣式
為元素添加圓角樣式:border-radius
a) -webkit-border-radius:蘋果;谷歌等一些瀏覽器認(rèn),因為他們都用的是webkit內(nèi)核;
b) -moz-border-radius:moz這個屬性 主要是專門支持Mozilla Firefox 火狐瀏覽器的CSS屬性。
背景屬性
a) background-color://設(shè)置背景顏色
b) background-image:url(‘圖片地址’);//引入背景圖片
c) background-repeat://設(shè)置背景圖片是否平鋪
i. no-repeat;//不平鋪
ii.repeat-x;//沿著x軸水平平鋪
iii. repeat-y;//沿著y軸垂直平鋪
d)background-size://設(shè)置背景圖片的尺寸
i. background-size:100px 80px;//第一個值是寬度,第二個值是高度
ii.background-size:cover;// 把背景圖像擴(kuò)展至足夠大,以使背景圖像完全覆蓋背景區(qū)域。
e)background-postion://設(shè)置引入背景圖片的位置
i.background-position:bottom right;
1.第一個值(top,center,bottom),第二個值(left,center,right)
ii. Background-position:100px 80px;(x,y)
- 第一個值是x軸:水平方向
- 第二個值是y軸:垂直方向
- (-x,-y)代表相反方向
f)background-attachment://設(shè)置背景圖片是否隨著頁面滾動
i.fixed;//設(shè)置背景圖片固定(不隨瀏覽器滾動)
ii.scroll;//設(shè)置圖片滾動(默認(rèn)值)
g)background://設(shè)置背景的一系列屬性
屬性值順序(color->image->repeat->attachment->position),可以省略其中某個設(shè)置