1.背景
1.背景色
??属性：background-color
??取值：合法的颜色值
??注意：背景颜色和背景图片默认都从边框位置处开始填充
2.背景图片
??属性：background-image
??取值：url(图片的路径);
??ex:
????background-image:url(a.jpg);
3.背景图片平铺
??属性：background-repeat
??取值：
?????1.repeat 平铺
?????2.no-repeat 不平铺，只显示一次
?????3.repeat-x 只在横向平铺
?????4.repeat-y 只在纵向平铺
4.背景图片尺寸
??属性：background-size
??取值：
?????1.value1(宽) value2(高)
?????2.x% y%
?????3.cover 将背景图等比放大，直到背景图完全覆盖到元素的所有区域为止。
?????4.contain 将背景图等比放大，直到背景图碰到元素的某一个边缘为止。
5.背景图片的固定
??属性：background-attachment
??取值：
?????1.scroll 默认值，滚动
?????2.fixed 固定
6.背景图片定位
??作用：改变背景在元素中的位置
??属性：background-position
??取值：
?????1.x y
???????x：背景图在水平方向的偏移距离
??取值为正，向右移动
??取值为负，向左移动
y：背景图在垂直方向的偏移距离
??取值为正，向下移动
??取值为负，向上移动
?????2.x% y%
???????0% 0% 背景在左上角
100% 100% 背景在右下角
50% 50% 背景在正中间
?????3.关键词
???????x:left/center/right
y:top/center/bottom
7.背景的简写属性
??在一个属性中指定多个属性值
??background:color url() repeat attachment position;
??ex:
???background:red;
???background:url(a.jpg) no-repeat fixed center center;
2.渐变
?1.什么是渐变
???渐变指的是多种颜色平缓变化的一种显示效果。
?2.渐变的主要因素
???1.色标：一种颜色 及其 出现的位置
?????一个渐变是由多个色标组成（至少两个）
?3.渐变的分类
???1.线性渐变
?????以直线的方向来填充渐变色
???2.径向渐变
?????以圆形的方式来填充渐变色
???3.重复渐变
?????将线性渐变 或 径向渐变 重复几次实现渐变填充
?4.线性渐变
???属性：backgrond-image
???取值：linear-gradient(angle,color-point1,color-point2,...);
???????angle:表示渐变填充的方向或角度
取值：
??1.关键词
????to top 从下向上填充渐变色
????to bottom 从上向下填充渐变色
????to left 从右向左填充渐变色
????to right 从左向右填充渐变色
??2.角度值
????0deg 从下向上(等同于to top)
????180deg 从上向下(等同于to bottom)
???????color-point:色标
??表示颜色及其位置
??取值：颜色和位置的组和，中间用空格隔开。
??ex:
????red 0px;
????blue 100px;
????green 200px;
?5.径向渐变
???属性：background-image
???取值：radial-gradient([size at position],color-point1,color-point2,...);
???????size:半径，以px为单位的数字
position:圆心所在位置
????????1.x y:具体数字
2.x% y%:元素宽和高的占比
3.关键词
??x:left/center/right
??y:top/center/bottom
?6.重复渐变
???1.重复线性渐变
?????background-image:repeating-linear-gradient(angle,color-point,...);
?????color-point:位置一定要给绝对数值（px），不要用百分比。
???2.重复径向渐变
?????backgrond-image:repeating-radial-gradient([size at position],color-point);
???练习：
?????给一个div设置高宽各400px,然后设置重复线性渐变背景色。
?7.浏览器兼容性
???各浏览器的新版都支持渐变属性
???对于不支持的浏览器版本，可以通过增加浏览器前缀的方式，让浏览器支持渐变。
???Firefox:-moz-
???Chrome&Safari:-webkit-
???IE:-ms-
???opera:-o-
???ex：
????background-image:-webkit-linear-gradient();
???www.caniuse.com
3.文本格式化属性
?1.字体属性
???1.指定字体
?????属性：font-family
?????取值：用逗号隔开字体名称列表
?????ex:
???????font-family:"微软雅黑","黑体",Arial;
???2.字体大小
?????属性：font-size
?????取值：以px或pt为单位的数值
???3.字体加粗
?????属性：font-weight
?????取值：
?????????1.bold 加粗(b标记)
?2.normal 正常
?3.value 整百倍的数字 400-900
???4.字体样式
?????属性：font-style
?????取值：
?????????1.italic 斜体(i标记)
?2.normal 正常
???5.小型大写字母
?????将小写字符变为大写，但大小与小写字符一致。
?????属性：font-variant
?????取值：
?????????1.normal 正常
?2.small-caps 小型大写字符
?????练习：
????????在网页中定义一个div元素，并设值id为main,内容随意，中英文结合
设置以下格式：
???1.字体：微软雅黑
???2.文字大小:24px
???3.加粗并且倾斜显示文本
???4.将所有小写字符转为小型大写字符
???6.字体属性的简写方式
?????属性：
????????font:style variant weight size family;
?????注意：使用简写方式时，必须要设置family的值，否则无效。
????????ex:font:24px;//错误
???font:24px "微软雅黑";//正确
?2.文本格式化
???1.文本颜色
?????属性：color
?????取值：合法的颜色值
???2.文本排列
?????作用：指定文本（行内，行内块）在水平方向的对齐方式。
?????属性：text-align
?????取值：left/center/right/justify(两端对齐)
???3.线条修饰
?????属性：text-decoration
?????取值：
????????1.none 无任何线条修饰
2.underline 下划线
3.overline 上划线
4.line-through 删除线
???4.行高
?????作用：一行数据所占的高度
???????????如果行高大于字体本身的大小，那么改行文本将在指定的行高内呈现垂直居中的效果。
?????属性：line-height
?????取值：以px为单位的数值
???5.首行文本缩进
?????属性：text-indent
?????取值：以px为单位的数值
???6.文字阴影
?????属性：text-shadow
?????取值：h-shadow v-shadow blur color;
?????练习：
???????在上面文本练习的基础上，增加以下效果：
??1.文本排列方式为两端对齐
??2.文本的修饰为下划线
??3.行高设为100px,并观察设完行高后的文本效果
??4.文本阴影，水平和垂直偏移0px，模糊距离为3px，颜色红色
4.表格
?1.表格的常用属性
???1.边距属性：padding
???2.边框属性：border
???3.尺寸属性：width,height
???4.文本格式化属性：font-*，text-*,line-height
???5.背景属性：颜色，图片，渐变
???6.vertical-align
?????作用：指定单元格数据的垂直对齐方式
?????取值：
?????????top:上对齐
?middle:居中对齐
?bottom:下对齐
CSS-背景-渐变-文本格式化
原文地址：https://www.cnblogs.com/QiliPING9/p/9027760.html