前端三剑客之css属性

1、文本属性

1）font-style

font-style:normal;/*正常值，默认*/
font-style:italic;/*字体库斜体*/
font-style:oblique;/*人为使字体斜体*/

2）font-weight

font-weight:normal;/*正常值*/
font-weight:bold;/*粗体，相当于700*/
font-weight:bolder;/*相对于父元素更粗*/
font-weight:lighter;/*相对于父元素更细*/
font-weight:数值；/*100 ，200 ，300， 400， 500 ，600 ，700， 800 ，900*/

3）font-size

font-size:10px;/*xx-small、x-small、small、medium、large、x-large、xx-large、smaller和larger 
#可以使%、pt、px等单位，默认15px、16px*/

4)font-family

font-family:微软雅黑；/*可以多个备用字体，中间用逗号分隔；
默认英文Arail*/

5)color

color:red;
color:#334433;
color:RGB(0,233,255);

6)text-align文本对齐方式

text-align:center;/*center,left,right,justify实现两端对齐*/

7）text-decoration文本装饰线

text-decoration:none;/*常用的none、underline下划线、overline上划线、line-through删除线*/

8）line-height字体行高

行高=字体高度+上半行距+下半行距

9）vertical-align垂直对齐方式

vertical-align:baseline;/*元素放在父元素的基线上*/
vertical-align:sub;/*垂直对齐文本的下标*/
vertical-align:super;/*垂直对齐文本的上标*/
vertical-align:top;/*元素的顶端与行中最高元素的顶端对齐*/
vertical-align:middle;/*元素放在父元素的中部*/
vertical-align:bottom;/*元素的顶端与行中最低元素的顶端对齐*/
vertical-align:inherit;/*继承元素的属性值*/
vertical-align:text-top;/*元素的顶端与父元素文本的顶端对齐*/
vertical-align:text-bottom;/*元素的底端与父元素文本的底端对齐*/

2、背景属性

1）background-color背景颜色

background-color:red;
background-color:RGB(0,255,255);
background-color:#334455;
background-color:transparent;/*透明*/

2）background-image

background-image:url('图片地址')；

3）background-repeat背景平铺方式

background-repeat:no-repeat;
background-repeat:repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;
/*以上平铺方式分别是：不平铺，平铺，横向平铺，纵向平铺*/

4）background-position背景定位

background-position:x轴坐标 y轴坐标；
background-position:左 中 右；

5）background背景样式属性是任意编排的

3、边框属性

1）border-style边框样式

border-style:none;
/*none无边框、hidden隐藏边框、dotted点状边框、dashed虚线边框、solid实线边框、double双实线边框*/
/*一个值的时候控制上下左右
两个值的时候控制上下、左右
三个值的时候控制上、左右、下
四个值的时候控制上、右、下、左
*/
/*单独控制的时候有四个属性
border-top-style、border-bottom-style、border-left-style、border-right-style单独设置属性*/

2）border-width边框宽度

方向控制同border-style

3）border-color边框颜色

方向控制同border-color

4)border组合属性写法

border:1px solid red;

4、列表属性

list-style-type:a;系统提供的列表项目符号
list-style-image:url('qq.gif');自定义的列表项目符号

5、display属性

display:none;/*元素隐藏*/
display:inline;/*元素显示为行内元素*/
display:block;/*元素显示为块状元素*/
display:inline-block;/*元素显示为行内块状元素*/

6、盒子模型

盒子模型组成由content(内容)、padding(内边距)、border(边框)、margin(外边距)组成

margin:0 auto;/*自动居中
浏览器的默认零边距*/

7、浮动模型

float:left;/*左浮动*/
float:right;/*右浮动*/

8、清除浮动

clear:none;/*默认存在浮动*/
clear:both;/*清除左右浮动*/
clear:left;/*清除左浮动*/
clear:right;/*清除右浮动*/