CSS渐变、文本、表格、浮动

时间:2020-10-12 17:37:00 来源:互联网 作者: 神秘的大神 字体:

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)文本,行内元素,行内块元素是采用环绕的方式来排列的,是不会被浮动元素压在底下的,而会巧妙的避开浮动元素