CSS文本字体与背景样式

1.字体样式

字体大小：font-size:30px/%/em/rem;

设置的是字体高度单位： px 像素 相对于显示屏分辨率而言的，浏览器默认的字体大小都是16pxrem：根据的是根元素的字体大小计算的百分比：根据的是父元素的字体大小计算的em：根据的是父元素的字体大小计算的

<style>html {font-size: 18px;}div {font-size: 20px;}p {/*font-size: 2em;*//*font-size: 300%;*/font-size: 2rem;}</style><div><p>Lorem ipsum dolor sit amet.</p></div>

字体颜色：color:英文单词 / 十六进制 / rgb ; 设置的是字体的颜色 默认情况下文字渲染的是黑色，链接除外（链接默认是蓝色）颜色的英文单词： redskybluepinkyellowbluegreenrgb函数表示法： r redg greenb blue三原色十六进制值 #rrggbb #rbg字体类型：font-family: 字体名称 ; **字体粗细：**font-weight: 值; 值可以为：| 值 | 说明 | | :-----: | :----------------: | | bold | 定义粗的字体 | | bolder | 定义更粗的字体 | | lighter | 定义更细的字体 | | normal | 定义正常的字体大小

100-900的整百数数值

400正常 700加粗

**字体斜体：**font-style: 值; 值可以为：

行高：line-height: px%\倍数； 控制的是没一行文字的高度，文字会在这个行高内垂直居中显示 当我们给文本设置字体大小的时候 会按照字体大小的1.32这个比例给文字设置行高行高 = 文字的大小 + 上下的行间距 两个文字之间的上下间距

2.文本样式

文本缩进：text-indent文本水平对齐方式：text-align文本修饰：text-decoration单词间距：word-spacing 单词间距字间距：letter-spacing 每一个字符之间的间隙溢出显示方式：text-overflow 当盒子规定了超出隐藏后：clip默认，裁剪文本ellipsis显示省略符号来代表被修剪的文本

3.背景样式：

background-color：设置元素的背景颜色； 取值：颜色的英文名 rgb 十六进制背景颜色不会影响我们盒子的大小 在开发阶段我们可以使用背景颜色去看清盒子的位置和大小background-image：设置元素的背景图像； 背景图片仅仅是给盒子起到一个装饰的效果 类似于背景颜色 是不能撑开盒子的如果元素的尺寸是大于图片的 图片默认是水平和垂直方向平铺的如果元素的尺寸是小于图片的 图片默认是从做上角开始显示 超出的部分不可见background-repeat：控制背景图像是否重复； repeat 水平和垂直方向都平铺no-repeatrepeat-x 沿水平方向平铺repeat-x 沿垂直方向平铺background-position：控制背景图像在元素中的位置； background-position: 水平方向的设置 垂直方向的设置水平: left center right垂直：top center bottom数字