css---渐变、文子格式

1、渐变
1、什么是渐变
两种或者多种颜色之间平滑过渡的效果
渐变分类：
1、线性渐变
按照直线的方向进行颜色填充
2、径向渐变
以圆为中心，进行放射性颜色填充
3、重复渐变
重复的线性渐变
重复的径向渐变
渐变组成：
色标：每个颜色，及其出现的位置
一个渐变过程中允许有多个色标，多个色标间，渐变显示
2、渐变的语法
属性：background-image
取值：linear-gradient();线性渐变
radial-gradient();径向渐变
repeating-linear-gradient();重复线性渐变
repeating-radial-gradient();重复径向渐变
3、详解
1、线性渐变
属性：background-image
取值：linear-gradient(angle,color-point,color-point,...)
1、angle
作用：指定线性渐变的方向或者角度
取值：
1、to top 从下向上填充
2、to right 从左向右填充
3、to bottom 从上向下填充
4、to left 从右向左填充
5、取值为角度(0-360)
to top =>0deg
to right=>90deg
to bottom=>180deg
to left=>270deg
2、color-point
指定 颜色，位置
颜色：合法颜色值
位置：
1、具体px数值
2、%：取决于当前元素宽或高的占比，来决定颜色位置
3、可以省略不写
ex:
1、red 0%
2、green 50%
3、blue 100%
2、径向渐变
属性：background-image
取值：radial-gradient([size at position],color-poiont,color-poiont,...)；
1、[size at position]
可以省略
size:圆的半径大小
position：圆心位置
1、以px为单位的绝对值
0px 0px 圆心在左上角
20px 38px 圆心在 横向20px，纵向38px位置
2、以%为单位
50% 50%
3、关键字
left
right
center
top
bottom
3、重复渐变
属性：background-image
取值：repeating-linear-gradient
repeating-radial-gradient
4、浏览器兼容性
对于不支持渐变的浏览器，可以尝试添加浏览器前缀来解决兼容性。
fire fox：-moz-
chrome&safari：-webkit-
opera：-o-

1、如果浏览器不支持新属性，则将前缀添加到属性名称前
ex：animation
-moz-animation:xxxx；
-webkit-animation：xxxx；
-o-animation：xxxx；
2、如果浏览器支持属性，但不支持新值的时候，则将前缀添加到值前
ex：background-image
background-image：linear-gradient();
background-image：-moz-linear-gradient();
background-image：-webkit-linear-gradient();
background-image：-o-linear-gradient();

2、文本格式化
1、字体属性
1、指定字体
属性：font-family
取值：多个值组成的列表，用,隔开
ex：font-family:"微软雅黑","宋体","楷体";
2、字体大小
属性：font-size
取值：数值
ex：font-size：12px；
3、字体加粗
属性：font-weight
取值：
1、normal 正常
2、bold 加粗
3、value 数值，一般介于400-900之间，400=normal，900=bold
4、字体样式
属性：font-style
取值：
1、normal
2、italic 斜体
5、小型大写字母
作用：将小写英文字符变为大写，但是大小不变
属性：font-variant
取值：
1、normal
2、small-caps
6、字体属性(简写方式)
属性：font
取值：style variant weight size family；
注意：使用简写模式时，必须设置family的值，否则无作用效果
2、文本属性
1、文本颜色
属性：color
取值：合法颜色值
2、文本水平排列
属性：text-align
取值：left/center/right
3、文字线条修饰
属性：text-decoration
取值：
1、none 无线条显示
2、underline 下划线
3、overline 上划线
4、line-through 删除线 等于<s></s>
4、行高
作用：指定一行数据所占的高度。如果行高的高度高于文本本身的高度的话，那么该行文本将在该高度内呈现出 垂直居中的效果
属性：line-height
取值：px为单位的数值

font:字体大小/行高family; font:12px/24px "微软雅黑";
5、首行文本缩进
属性：text-indent
取值：px为单位的数值
6、文本阴影
属性：text-shadow
取值：h-shadow v-shadow blur color；

2、文本格式化
1、字体属性
1、指定字体
属性：font-family
取值：多个值组成的列表，用,隔开
ex：font-family:"微软雅黑","宋体","楷体";
2、字体大小
属性：font-size
取值：数值
ex：font-size：12px；
3、字体加粗
属性：font-weight
取值：
1、normal 正常
2、bold 加粗
3、value 数值，一般介于400-900之间，400=normal，900=bold
4、字体样式
属性：font-style
取值：
1、normal
2、italic 斜体
5、小型大写字母
作用：将小写英文字符变为大写，但是大小不变
属性：font-variant
取值：
1、normal
2、small-caps
6、字体属性(简写方式)
属性：font
取值：style variant weight size family；
注意：使用简写模式时，必须设置family的值，否则无作用效果
2、文本属性
1、文本颜色
属性：color
取值：合法颜色值
2、文本水平排列
属性：text-align
取值：left/center/right
3、文字线条修饰
属性：text-decoration l
取值：
1、none 无线条显示
2、underline 下划线
3、overline 上划线
4、line-through 删除线 等于<s></s>
4、行高
作用：指定一行数据所占的高度。如果行高的高度高于文本本身的高度的话，那么该行文本将在该高度内呈现出 垂直居中的效果
属性：line-height
取值：px为单位的数值
font:字体大小/行高family; font:12px/24px "微软雅黑";
5、首行文本缩进
属性：text-indent
取值：px为单位的数值
6、文本阴影
属性：text-shadow
取值：h-shadow v-shadow blur color；
3、表格
1、表格常用属性
1、边距属性：padding，margin(只能用在table)
2、尺寸属性：width，height
3、文本格式化属性
font-*
text-*，color，line-height
4、背景属性
颜色，图像，渐变
5、边框属性
border
6、vertical-align
作用：设置单元格中的内容垂直对齐方式
取值：top、bottom、middle
2、表格特有属性
1、边框合并
属性：border-collapse
取值：
1、separate 默认值，分离边框模式
2、collapse 合并边框
2、边框边距
作用：设置相邻单元格边框间的距离
注意：边框边距，仅在border-collapse为separate时有效
属性：border-spacing
取值：
指定1个值：单元格水平和垂直间距相等
指定2个值：第一个值表示水平间距，第二个值表示垂直间距
3、标题位置
属性：caption-side
取值：
1、top 默认值
2、bottom 表格标题在表格之下
4、显示规则
作用：指定表格布局的方式，用来指定表格中行和列的算法规则

表格默认算法：表格中的单元格实际宽度，以内容为主。即便设置了td的宽度，也不影响td的自适应宽度效果

属性：table-layout
取值：
1、auto 自动，默认值，即自动表格布局，td的宽度是由内容来决定，与设定值无关
2、fixed 固定，即固定表格布局，单元格的宽度以设定的值为主，不以内容来决定
自动表格布局 与 固定表格布局
1、自动表格布局
单元格大小会适应内容大小
在表格复杂时速度较慢
适用于不确定每列大小时使用
2、固定表格布局
列宽度取决于设定好的值，与内容无关
会加速显示表格(优点)
虽然算法快，但是不灵活