HTML5知识点总结（三）

常用的样式属性，背景及阴影

     字体及文本属性
     边距和填充
     边框属性
     列表属性
     背景属性
     背景的渐变
     阴影属性

字体及文本属性

    字体属性

	font：设置字体是所有样式
	font-family：设置字体类型
	font-size：设置字体大小
	font-weight：设置字体粗细
    color：设置字体颜色

font-family 和 font-size都是font的子属性，一般常用字体属性的缩写形式，如： font:bold 12px 宋体 ;注意三个属性的顺序依次为字体粗细，大小，样式

    文本属性

	line-height：设置行高
		常用属性值：3px,8px，设置 line-height 与 heigh值一直时，样式为垂直中
	text-align：设置对齐方式，
		常用属性值：left,right，center
	letter-spacing：设置字符间距
		常用属性值：3px,8px
	text-decoration：设置文本修饰
		常用属性值：none，underline，line-through

边距和填充

    边距：页面中元素与元素直接的距离

 	margin：
 		设置一个值：上、下、左、右边距
 		设置两个值：上下，左右边距
 		设置三个值：上，左右，下边距
 		设置四个值，上，右，下，左顺序分别对应边距
 	margin-bottom：下边距
	margin-left：左边距
	margin-right：右边距
	margin-top：上边距
	margin: 0 auto；局中

    填充：元素内容与边框之间的距离

	padding：
 		设置一个值：上、下、左、右边距
 		设置两个值：上下，左右边距
 		设置三个值：上，左右，下边距
 		设置四个值，上，右，下，左顺序分别对应边距
 	padding-bottom：下边距
	padding-left：左边距
	padding-right：右边距
	padding-top：上边距
	padding: 0 auto；局中

边框属性

    border属性

	border-style：边框样式
		常用属性值：none，soild，dashed
  	border-width：边框宽度
  		常用属性值：1px ，5px
  	border-color：边框颜色
  		常用属性值：red，black
   	border：符合属性，用于设置边框宽度，样式，颜色
   		常用属性值：border:1px solid red ;
   		
也可单独设置某个方向的值：
	border-bottom：下边框
	border-left：左边框
	border-right：右边框
	border-top：上边框

    border-radius属性：圆角边框（ 半径像素越大，圆角越明显）

	border-radius：
 		设置一个参数：四个角
 		设置两个参数：参数1：左上和右下角 ，参数2：右上和左下角
 		设置三个参数：参数1：左上角 ，参数2：左下和右上角，参数3：右下角
 		设置四个参数：顺序依次为：左上，右上，右下，左下

列表属性

	list-style-image：图片作为列表项的符号，其值为对象对应的url
	list-style-type：设定列表项的符号
		常用属性值：none（无），disc（实心圆），circle（空心圆） ，square（实心方块）
	list-style-position：符号在列表项的位置
		常用属性：inside（内），outside（外）
	list-style：符合属性，顺序为：符号，位置，图片符号
		list-style:circle inside url() ;		

背景属性

	background：符合属性
	background-image：背景图片
		常用属性值：background-image:url(图片名称) ;
	background-repeat：背景图片重复方式
		常用属性值：repeat：水平和垂直反向平铺
							  no-repeat：不平铺
							  repeat-x：只在水平方向上平铺
							  repeat-y：只在水垂直方向上平铺
    background-position：背景图片位置
    	常用属性值：关键字：水平方向：left，center，right
    										垂直方向：top，center，bottom
    					   	 百分比：水平方向：0%(左)   50%(中)   100%(右)  
    									   垂直方向：0%(上)   50%(中)   100%(下)  
    					    像素值： 水平方向：正数向右偏移，负数向左偏移
    					   				   垂直方向：正数向下偏移，负数向上偏移
    background-size：背景图片大小
 	background-color：背景图片颜色

背景的渐变

    线向渐变

	background: linear-gradient(起点位置或方向，起始颜色，（过渡颜色），终止颜色);
	
向右，颜色红色过渡到白色在过渡到黑色：
	background: linear-gradient(to right,red,white,black);

    径向渐变

	background: radial-gradient(形状，起点位置，起始颜色，（过渡颜色），终止颜色);
	
圆形渐变，以中心点为圆心默认大小，颜色红色过渡到白色在过渡到黑色：
	background: radial-gradient(circle at center ,red,white,black)

阴影属性

    文字阴影

	text-shadow: h-shadow v-shadow blur color;
			h-shadow：必须存在：阴影的水平距离
			v-shadow：必须存在：阴影的垂直距离
			blur：可有可无：阴影的模糊半径
	   		color：可有可无：阴影的颜色

    盒子阴影

		text-shadow: h-shadow v-shadow blur spread color;
			h-shadow：必须存在：阴影的水平距离
			v-shadow：必须存在：阴影的垂直距离
			blur：可有可无：阴影的模糊半径
			spread：可有可无：阴影的大小
	   		color：可有可无：阴影的颜色