1、渐变:
1、什么是渐变
两种或多种颜色之间平滑过渡的效果
2、渐变分类
1、线性渐变
按照一条直线的方式填充渐变色
2、径向渐变
按照原型的方式向外放射性填充渐变颜色
3、重复渐变
将线性渐变和径向渐变重复实现多次
3、色标
每个渐变颜色 出现的“位置”及其“颜色值”
4、语法
1、属性 & 取值
属性:background-image:
取值:
1、线性渐变
linear-gradient()
2、径向渐变
radial-gradient
3、重复渐变
repeating-linear-gradient()
repeating-radial-gradient()
2、线性渐变
background-image:linear-gradient(angle,color-point,color-point,...)
1、angle:线性渐变的方向或角度
取值:
1、关键字
1、to top:从下向上填充
2、to right:从左向右填充
3、to bottom:从上向下填充
4、to left:从右向左填充
2、角度
可以取值为0deg~360deg
to top -> 0deg
to right-> 90deg
to bottom-> 180deg
to left-> 270deg
2、color-point:色标
由渐变的颜色 以及出现的位置 组成
ex:
1、red 0px
开始的位置是红色
2、green 50px
按照填充的方向,50px的位置处,变为绿色
3、blue 100%
按照填充的方向,结束的位置处,变为蓝色
注意:色标中,可以省略位置不写,如果省略位置的话,
css会按照元素的大小及填充方向平均分配渐变色
3、径向渐变
background-image:radial-gradient([size at position,]color-point,color-point);
1、size at position
可以省略,如果省略的话,css会默认分配渐变色,圆心在元素的中间位置处
size:圆的半径,以px为单位
at:关键字,不能省略
position:圆心位置
4、浏览器的兼容性(重点)
主流版本浏览器支持性比较好
对于不支持的版本,通过增加浏览器前缀的方式实现兼容性(前提是内核支持)
Firefox:-moz-
Chrome & Safari:-webkit-
Opear:-o-
浏览器前缀加在什么位置???
1、如果浏览器不支持属性的话,则将前缀加到属性名称前
animation:...;
-moz-animation:...;
-webkit-animation:...;
-o-animation:...;
2、如果浏览器支持属性,但不支持属性值的话,
将前缀加到属性值的前面
background-image:linear-gradient();
background-image:-moz-linear-gradient();
background-image:-webkit-linear-gradient();
background-image:-o-linear-gradient();
2、文本格式化
1、文本格式化
字体属性:大小,加粗,系统等
文本格式:文本颜色,线条样式,... ...
2、字体属性
1、指定字体系列
属性:font-family(字体系列)
取值:value1,value2,value3,...
注意:如果字体中包含中文以及特殊符号的话,要用""引起来,且一段文本只有一种字体。
ex:
font-family:"微软雅黑",Arail,Times;
font-family:"microsoft yahei";
2、指定字体大小
属性:font-size
取值:以px或pt或em 为单位的数值
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的值,否则无效;
ex:
font:12px; /*无效*/
font:12px "微软雅黑";/*通过*/
3、文本属性
1、文本颜色
属性:color
取值:任意合法颜色
2、文本排列方式
作用:指定当前元素中的文本,行内元素,行内块元素的 水平对齐方式
属性:text-align
取值:left / center / right
3、文字修饰
作用:指定文本的线条样式
属性:text-decoration
取值:
1、none
没有线条显示
2、underline
下划线 <u></u>
3、overline
上划线
4、line-through
删除线 <s></s>
4、行高
作用:一行数据的高度。如果行高的高度高于数据本身高度,那么该行数据将在指定的行高范围内垂直居中。
属性:line-height
取值:px为单位的数值
使用场合:
1、解决一行数据的垂直居中问题
2、拉长多行数据之间的间距-行间距
5、首行文本缩进
属性:text-indent
取值:px为单位的数值
6、文本阴影:
属性:text-shadow
取值:h-shadow v-shadow blur color;
3、表格
1、表格常用样式
1、边距属性
padding(table,td);
margin(table),不适用于td
2、尺寸
width,height
3、文本格式化属性
font-*
text-*
4、背景属性(颜色,图片,渐变)
5、border
6、vertical-align
内容垂直对齐方式
属性:vertical-align
取值:top/middle/bottom
2、表格特有样式
1、边框合并
属性:border-collapse
取值:
1、separate
默认值,分离边框模式
2、collapse
合并边框模式,table和td将合并成一个边框
2、边框边距
作用:设置单元格与表格,单元格与单元格之间的距离(cellspacing)
属性:border-spacing
取值:
1个值:水平和垂直间距相同
2个值:第一个值 表示水平间距,第二个值 表示垂直间距。两个值之间用空格隔开
注意:border-collapse属性必须是 separate时,边框边距才有效,否则无效
3、标题位置
属性:caption-side
取值:
1、top
默认值,标题位于表格之上
2、bottom
标题位于表格之下
4、显示规则
作用:指定浏览器如何显示或布局一张表格,即设置单元格,行,表格的算法规则
属性:
table-layout
取值:
1、auto
自动表格布局,默认布局方式,单元格的尺寸实际上是由内容决定的。
2、fixed
固定表格布局,单元格的尺寸由设定的数据值来决定的,不由内容决定
自动表格布局 VS 固定表格布局
1、自动表格布局
1、单元格大小会适应内容大小
2、【缺点:】表格复杂时,加载速度慢
3、适用于不确定每列大小的情况下使用
4、虽然算法较慢,但是能体现传统表格特点,比较灵活
2、固定表格布局
1、单元格大小取决于td中设置的值,与内容无关
2、【优点:】加载速度较快,即加速显示表格,不需要每行数据都进行计算(特点)
3、适用于确定每列大小时,可以使用固定表格布局
4、算法较快,缺点是不够灵活
1、什么是渐变
两种或多种颜色之间平滑过渡的效果
2、渐变分类
1、线性渐变
按照一条直线的方式填充渐变色
2、径向渐变
按照原型的方式向外放射性填充渐变颜色
3、重复渐变
将线性渐变和径向渐变重复实现多次
3、色标
每个渐变颜色 出现的“位置”及其“颜色值”
4、语法
1、属性 & 取值
属性:background-image:
取值:
1、线性渐变
linear-gradient()
2、径向渐变
radial-gradient
3、重复渐变
repeating-linear-gradient()
repeating-radial-gradient()
2、线性渐变
background-image:linear-gradient(angle,color-point,color-point,...)
1、angle:线性渐变的方向或角度
取值:
1、关键字
1、to top:从下向上填充
2、to right:从左向右填充
3、to bottom:从上向下填充
4、to left:从右向左填充
2、角度
可以取值为0deg~360deg
to top -> 0deg
to right-> 90deg
to bottom-> 180deg
to left-> 270deg
2、color-point:色标
由渐变的颜色 以及出现的位置 组成
ex:
1、red 0px
开始的位置是红色
2、green 50px
按照填充的方向,50px的位置处,变为绿色
3、blue 100%
按照填充的方向,结束的位置处,变为蓝色
注意:色标中,可以省略位置不写,如果省略位置的话,
css会按照元素的大小及填充方向平均分配渐变色
3、径向渐变
background-image:radial-gradient([size at position,]color-point,color-point);
1、size at position
可以省略,如果省略的话,css会默认分配渐变色,圆心在元素的中间位置处
size:圆的半径,以px为单位
at:关键字,不能省略
position:圆心位置
4、浏览器的兼容性(重点)
主流版本浏览器支持性比较好
对于不支持的版本,通过增加浏览器前缀的方式实现兼容性(前提是内核支持)
Firefox:-moz-
Chrome & Safari:-webkit-
Opear:-o-
浏览器前缀加在什么位置???
1、如果浏览器不支持属性的话,则将前缀加到属性名称前
animation:...;
-moz-animation:...;
-webkit-animation:...;
-o-animation:...;
2、如果浏览器支持属性,但不支持属性值的话,
将前缀加到属性值的前面
background-image:linear-gradient();
background-image:-moz-linear-gradient();
background-image:-webkit-linear-gradient();
background-image:-o-linear-gradient();
2、文本格式化
1、文本格式化
字体属性:大小,加粗,系统等
文本格式:文本颜色,线条样式,... ...
2、字体属性
1、指定字体系列
属性:font-family(字体系列)
取值:value1,value2,value3,...
注意:如果字体中包含中文以及特殊符号的话,要用""引起来,且一段文本只有一种字体。
ex:
font-family:"微软雅黑",Arail,Times;
font-family:"microsoft yahei";
2、指定字体大小
属性:font-size
取值:以px或pt或em 为单位的数值
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的值,否则无效;
ex:
font:12px; /*无效*/
font:12px "微软雅黑";/*通过*/
3、文本属性
1、文本颜色
属性:color
取值:任意合法颜色
2、文本排列方式
作用:指定当前元素中的文本,行内元素,行内块元素的 水平对齐方式
属性:text-align
取值:left / center / right
3、文字修饰
作用:指定文本的线条样式
属性:text-decoration
取值:
1、none
没有线条显示
2、underline
下划线 <u></u>
3、overline
上划线
4、line-through
删除线 <s></s>
4、行高
作用:一行数据的高度。如果行高的高度高于数据本身高度,那么该行数据将在指定的行高范围内垂直居中。
属性:line-height
取值:px为单位的数值
使用场合:
1、解决一行数据的垂直居中问题
2、拉长多行数据之间的间距-行间距
5、首行文本缩进
属性:text-indent
取值:px为单位的数值
6、文本阴影:
属性:text-shadow
取值:h-shadow v-shadow blur color;
3、表格
1、表格常用样式
1、边距属性
padding(table,td);
margin(table),不适用于td
2、尺寸
width,height
3、文本格式化属性
font-*
text-*
4、背景属性(颜色,图片,渐变)
5、border
6、vertical-align
内容垂直对齐方式
属性:vertical-align
取值:top/middle/bottom
2、表格特有样式
1、边框合并
属性:border-collapse
取值:
1、separate
默认值,分离边框模式
2、collapse
合并边框模式,table和td将合并成一个边框
2、边框边距
作用:设置单元格与表格,单元格与单元格之间的距离(cellspacing)
属性:border-spacing
取值:
1个值:水平和垂直间距相同
2个值:第一个值 表示水平间距,第二个值 表示垂直间距。两个值之间用空格隔开
注意:border-collapse属性必须是 separate时,边框边距才有效,否则无效
3、标题位置
属性:caption-side
取值:
1、top
默认值,标题位于表格之上
2、bottom
标题位于表格之下
4、显示规则
作用:指定浏览器如何显示或布局一张表格,即设置单元格,行,表格的算法规则
属性:
table-layout
取值:
1、auto
自动表格布局,默认布局方式,单元格的尺寸实际上是由内容决定的。
2、fixed
固定表格布局,单元格的尺寸由设定的数据值来决定的,不由内容决定
自动表格布局 VS 固定表格布局
1、自动表格布局
1、单元格大小会适应内容大小
2、【缺点:】表格复杂时,加载速度慢
3、适用于不确定每列大小的情况下使用
4、虽然算法较慢,但是能体现传统表格特点,比较灵活
2、固定表格布局
1、单元格大小取决于td中设置的值,与内容无关
2、【优点:】加载速度较快,即加速显示表格,不需要每行数据都进行计算(特点)
3、适用于确定每列大小时,可以使用固定表格布局
4、算法较快,缺点是不够灵活