html+css > 常用 css 样式

* background  背景设置 

<style type="text/css">
		background:url('./sina.jpg') no-repeat 0px 0px;
		background-size:738px 103px;	
</style>
* background:
background:#889900;   直接背景为纯颜色
background:url('图片路径')  默认背景图片重复

*背景图片重复显示设置
			no-repeat  不重复
			repeat-x   X轴重复，横向重复
			repeat-y   Y轴重复，纵向重复

*背景图片位置移动, 默认 0px  0px     
			第一个0px 是X位置， 第二个 0px 是y位置， 左上角为原点
			x轴为正数向右边移动
			y轴为正数向下边移动
			x轴为负数向左边移动
			y轴为负数向上边移动
*背景图片大小设置
background-size:10px 20px  //10px = 宽度   20px = 高度

 

* 布局 padding, margin,  border

*外边距margin
margin-top:
margin-bottom:
margin-left:
margin-right:
margin:0px 1px 2px 3px;  
	0px = margin-top;
	1px = margin-right;
	2px = margin-bottom:
	3px = margin-left;
margin:5px  = right,left,top,bottom = 5px;


*内边距padding
包含元素的背景，在边框内部
padding-top:
padding-bottom:
padding-left:
padding-right:

*边框
border:1px solid #000
1px = 边框的像素大小
solid = 边框的样式 
	solid//实心横线
	dashed//虚线
	dotted//点线
border-left:
border-right:
border-top:
border-bottom:
border:none; 不要边框


* padding border margin 的关系
有内到外依次是
元素自身的区域 -> padding区域 ->border区域 -> margin区域

 

 

* display 显示属性

display:block; 占整行
display:inline-block; 不占整行，
display:none;  //不显示

 

 

* float  浮动

float 浮动 所有浮动的位置都是相对于共同的父级
使用环境；举例：一行中想放多个DIV
				 li标签需要横排 
float:left  左浮动
float:right 右浮动
float:none  默认不浮动

清除浮动 clear:both;

 

* font 文本设置

<div class="a">你好啊，大海</div>

<style type="text/css">
	body{
		
	}
	.a{
		color:#333333;
		font-family:'黑体';
		font-size:60px;
		font-weight:bold;
		letter-spacing:30px;
		border:1px solid red;
		text-align:right;
	}
</style>

<hr>

*字体系列设置
font-family:'黑体';

*字体大小
font-size:30px; 

*字体样式
font-style:

*字体粗细
font-weight:bold;  加粗
font-weight:lighter; 变细

*文本颜色
color:#ff0000;	//16进制值 前面2位表示红色，中间2位表示绿色， 最后2位表示蓝色。
				//值依次是0-9,9-f(9 a b c d e f)  值越小颜色越深
color:#000;  //=  #000000;
color:red;


*字间距  默认0px
letter-spacing:30px 

*行间距 默认字体大小的行间距//如果值为0，表示每行之间没有行间距
line-height:160px

*对齐方式
text-align:left   /center   /right

 

* ul li  :  list-style-type 列表样式设置

<ul type="">
	<li>凤飞飞飞凤飞飞飞凤飞飞</li>
	<li>鹅鹅鹅鹅鹅鹅饿鹅鹅鹅</li>
	<li>鹅鹅鹅鹅鹅鹅饿鹅鹅鹅</li>
	<li>鹅鹅鹅鹅鹅鹅饿鹅鹅鹅</li>
</ul>


<style type="text/css">
	ul{
		list-style-image:url('./sina.jpg');
	}
</style>

<hr style="clear:both">

*列表样式
list-style-type:none 
				disc  实心圆
				circle 空心圆
				square 实心方框
				decimal 阿拉伯数字
				lower-latin 小写字母
	
*列表图片样式
list-style-image:url('./xx.jpg');

http://www.w3school.com.cn/cssref/pr_list-style-type.asp

 

* overflow 当内容超出元素固定区域所触发

 

overflow:scroll; 显示滚动条
overflow:auto; 根据内容多少显示滚动条
overflow:hidden; 隐藏超出的内容

visibility:隐藏元素的位置依然保留
vertical-align: 纵向的对齐多使用与td中,方式top , middle, bottom

 * position 定位

//绝对定位
<div class="a"></div>

//相对定位
<div class="b">
	<div class="bb">
	</div>
</div>

//固定定位
<div class="c">
</div>
<style type="text/css">
	body{
		padding:0px;
		margin:0px;
	}
	.a{
		width:100px;
		height:100px;
		background:red;
		position:absolute;
		left:20px;
		top:0px;
		z-index:5;
	}
	.b{
		margin:0px 0px 0px 0px;
		width:500px;
		height:500px;
		background:blue;
		position:relative;
		top:0px;
		left:50px;
		z-index:1;
	}
	.bb{
		width:50px;
		height:50px;
		background:green;
		position:absolute;
		top:10px;
		right:10px;
	}
	.c{
		width:100%;
		height:50px;
		background:#000;
		position:fixed;
		top:0px;
	}

</style>


<hr>
position定位
*绝对定位//元素在位置布局上脱离其他内容元素相对独立不受其他元素位置影响
position:absolute;

*相对定位
元素相对于它原本的位置
position:relative;

*位置固定
即便是在内容页存在滚动条，不管滚动条在任何位置，固定定位的元素的位置不变
position:fixed;

*堆叠顺序//值越大显示的层越高，
前提是元素需要设置position:属性
z-index


*要用到的属性
top, bottom, left , right,
top:20px;
相对于top移动20px,如果值为负数则往反方向移动

*如果一个绝对定位的元素想要定位相对于它的父级的位置，那么这个父级需要设置成相对定位