CSS渐变、文本、表格、浮动
1.渐变
1.渐变指的是多种颜色平缓变化的一种显示效果
2.主要因素:色标(一种颜色 及其 出现的位置),一个渐变是由多个色标组成(至少两个)
3、渐变分类
(1)线性渐变:以直线的方向来填充渐变色
(2)径向渐变:以圆形的方式实现的填充效果
(3)重复渐变:将线性渐变 或 径向渐变 重复几次实现出来
4.线性渐变
属性:background-image
取值:linear-gradient(angle,color-point1,color-point2,...);
(1)angle
表示渐变填充的方向或角度
取值:
关键字: to top / right / bottom / left 从下向上 / 左向右 / 上向下 / 右向左 填充渐变色
角度值:
0deg:从下向上填充渐变色等同于 to top
90deg:从左向右填充渐变色等同于 to right
180deg:从上向下填充渐变色等同于 to bottom
270deg:从右向左填充渐变色等用于 to left
线性渐变角度值:
(2)color-point
表示渐变里各个颜色出现的位置
取值:颜色以及位置的组合,中间用空格隔开
1、red 0% 在填充方向的开始位置处颜色为 红色 2、green 50% 到填充方向一半的位置处,颜色变为绿色 3、blue 200px 到填充方向的200px的位置处,颜色变为蓝色 //从下向上,颜色由红色向绿色渐变 background:linear-gradient(to top,red 0%,green 100%); //从左下角开始,颜色由红色到绿色渐变,到50px的位置处变为绿色,并开始由绿色到蓝色渐变 background:linear-gradient(45deg,red 0px,green 50px,blue 100%);
5.浏览器兼容性
各浏览器的新版本都支持渐变属性
对于不支持的浏览器版本,可以通过增加浏览器前缀的方式,让浏览器支持渐变
Firefox : -moz-
Chrome & Safari : -webkit-
Opera : -o-
IE : -ms-
#container .btn-submit{ background:linear-gradient(0deg,red,blue); background:-moz-linear-gradient(0deg,red,blue); background:-webkit-linear-gradient(0deg,red,blue); background:-o-linear-gradient(0deg,red,blue); background:-ms-linear-gradient(0deg,red,blue); }
2、文本格式化属性
1.字体属性
(1)指定字体
属性:font-family
取值:用 , 隔开的字体名称列表
font-family:"微软雅黑",Arial; font-family:"microsoft yahei",Arial,"simhei","宋体"
(2)字体大小
属性:font-size
取值:以 px 或 pt 为单位的数字
(3)字体加粗
属性:font-weight
取值:
1、bold :加粗 2、normal :正常 3、value 无单位的数字 等同于 normal 等同于 bold //介于正常体与粗体之间 font-weight:700;
(4)字体样式
属性:font-style
取值:
normal:正常显示
italic:斜体显示
(5)小型大写字母
将小写字符变为大写,但大小与小写字符一致
属性:font-variant
取值:
normal:正常
small-caps:小型大写字符
(6)字体属性
简写方式
属性:font
取值:style variant weight size family ;
注意:使用简写属性时,必须要设置family的值,否则无效
2.文本属性
(1)文本颜色
属性:color
(2)文本排列
作用:指定文本、行内、行内块元素的水平对齐方式
属性:text-align
取值:left / center / right / justify(两端对齐)
(3)文字修饰
属性:text-decoration
取值:
1、none : 无任何的线条修饰 2、underline : 下划线修饰 3、line-through : 删除线 4、overline : 上划线
(4)行高
作用:一行数据所占高度
属性:line-height
取值:以 px 为单位的数值
注意:如果行高设置的比文字的高度高的话,该行文本将在指定行高范围内垂直居中显示
line-height:30px; //行高是font-size的1.5倍 line-height:1.5;
(5)首行文本缩进
属性:text-indent
取值:以 px 为单位的数值
(6)文本阴影
属性:text-shadow
取值:h-shadow v-shaow blur color
3.表格
1.表格的常用属性
(1)边距属性:padding
(2)边框属性:border
(3)尺寸属性:width , height
(4)文本格式化属性:font-* , text-* , line-height
(5)背景属性:颜色,图片,渐变
(6)vertical-align
作用:指定单元格数据的垂直对齐方式
取值:
1、top :上对齐 2、middle :居中对齐 3、bottom :下对齐
2.表格的特用属性
(1)边框合并
属性:border-collapse
取值:
1、separate 默认值,即分离边框模式 2、collapse 边框合并
(2)边框边距
作用:设置单元格之间或单元格与表格之间的距离
属性:border-spacing
取值:
1、给定一个值 :水平和垂直的间距相同 2、给定两个值 : 第一个值 表示的是水平间距 第二个值 表示的是垂直间距
注意:只有在分离边框模式下,边框边距才有效
(3)标题位置
属性:caption-side
取值:
top :默认值,标题在表格内容之上 bottom :标题在表格内容之下
(4)显示规则
作用:用来帮助浏览器指定如何布局一张表,也就是指定 td 尺寸的计算方式
属性:table-layout
取值:
1、auto 默认值,即自动表格布局,列的尺寸实际上是由内容来决定的 2、fixed 固定表格布局,列的尺寸由设定的值为准的
4.浮动定位
1.语法
属性:float
取值:
1、none 默认值,即无任何浮动效果 2、left 左浮动,让元素停靠在父元素的左边,或挨着左侧已有的浮动元素 3、right 右浮动,让元素停靠在父元素的右边,或挨着右侧已有的浮动元素
2.浮动引发的特殊效果
(1)当父元素显示不下所有已浮动子元素时,最后一个将换行,但是,有可能被卡住
(2)元素一旦浮动起来后,宽度将以内容为主(未指定宽度情况下)
(3)元素一旦浮动起来后,将变为块级元素;允许修改尺寸,能正常处理垂直方向外边距
(4)文本,行内元素,行内块元素是采用环绕的方式来排列的,是不会被浮动元素压在底下的,而会巧妙的避开浮动元素
3.清除浮动所带来的影响
元素一旦浮动起来之后,就会对后续的元素带来一定的位置影响(后续元素要上前占位),如果后续元素不想被影响的话(不想占位),那么就可以通过清除浮动的方式来解决
属性:clear
取值:
1、none 默认值,不做任何的清除浮动操作 2、left 清除当前元素前面元素左浮动所带来的影响 3、right 清除当前元素前面元素右浮动所带来的影响 4、both 清除当前元素前面元素任何一种浮动所带来的影响