CSS—02.文本&背景

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(渐变形状,第一种颜色,第二种颜色,…)