CSS--文本和背景

CSS設置文本

文本樣式

屬性名	屬性值	說明
color 顏色	#red #FF00FF rgb(0,255,255) rgba(0,0,255,0.5)	預設值，英文顏色 十六進制顏色值 色彩函數(紅，綠，藍) 色彩函數(紅，綠，藍，透明度)
text-align 水平對齊	left right center justify	左對齊 右對齊 居中對齊 兩端對齊
vertical-align 垂直對齊	middle top bottom	垂直居中 頂部對齊 底部對齊
text-indent 首行縮進	px em rem	像素 相對單位長度 根相對單位長度
line-height 文本行高	px em rem	像素 相對單位長度 根相對單位長度
text-decoration 文本裝飾	none underline overline line-through	標準文本 下劃線 上劃線 刪除線
text-shadow 文本陰影	color x-offset y-offset blur-radius	陰影顏色 X軸位移 Y軸位移 模糊半徑

---

字體樣式

屬性名	屬性值	說明
font-family 字體類型	“宋體” "楷體"等	計算機默認字體 項目引用的自定義字體
font-size 字體大小	px em rem	像素 相對單位長度 根相對單位長度
font-style 字體風格	normal italic oblique inherit	正常字體 斜體 字體傾斜 繼承父元素風格
font-weight 字體粗細	normal bold bolder lighter 100~900	正常字體 粗體 更粗 更細 值範圍：400爲正常，700爲粗體
letter-spacing 字體間距	px em rem	像素 相對單位長度 根相對單位長度

---

CSS設置背景

背景樣式

屬性名	屬性值	說明
background-color 背景顏色	#red #FF00FF rgb(0,255,255) rgba(0,0,255,0.5)	預設值，英文顏色 十六進制顏色值 色彩函數(紅，綠，藍) 色彩函數(紅，綠，藍，透明度)
background-position 背景圖像起始位置	xpos ypos x% y% x:left/center/right y:top/center/bottom	固定值，單位可以是px/em/rem 相對值 指定X位置 指定Y位置
background-size 背景圖像大小	weight height percentage cover contain	固定大小 相對大小 最大填充 最小填充
background-repeat 背景圖像重複方式	repeat repeat-x repeat-y no-repeat	正常橫縱重複 橫向重複 縱向重複 不重複
background-attachment 背景圖像是否滾動	scroll fixed inherit	滾動 固定 繼承父元素設置
background-image 背景圖像	url(‘URL’) none	圖像的URL 不顯示，默認

---

顏色漸變

線性漸變：顏色沿着一條直線過度（方向性）：從左到右，從右到左，從上到下 等。

• 漸變兼容（屬性前加前綴,用於解析）
  • IE瀏覽器：-ms-linear-gradient(漸變方向,第一種顏色,第二種顏色,…)
  • Chrome和Safari瀏覽器：-webkit-linear-gradient(漸變方向,第一種顏色,第二種顏色,…)
  • Opera瀏覽器：-o-linear-gradient(漸變方向,第一種顏色,第二種顏色,…)
  • Firefox瀏覽器：-moz-linear-gradient(漸變方向,第一種顏色,第二種顏色,…)

徑向漸變：圓形circle或橢圓形ellipse漸變，顏色不在沿着一條直線變化，而是從一個起點朝所有方向混合。

• 漸變兼容（屬性前加前綴,用於解析）
  • IE瀏覽器：-ms-radial-gradient(漸變形狀,第一種顏色,第二種顏色,…)
  • Chrome和Safari瀏覽器：-webkit-radial-gradient(漸變形狀,第一種顏色,第二種顏色,…)
  • Opera瀏覽器：-o-radial-gradient(漸變形狀,第一種顏色,第二種顏色,…)
  • Firefox瀏覽器：-moz-radial-gradient(漸變形狀,第一種顏色,第二種顏色,…)