1.行内样式(优先级最高的)

<div style="height:100px;background: #ccc;"></div>

行内样式就是直接在标签上添加style属性,然后再属性值中填写各种css键值对,不同css之间用分号隔开。

2.内联样式

<div style="height:100px;background: #ccc;"></div>
<div style="height:100px;background: #ccc;"></div>

如果两个div都要加上同样的css样式效果,全部用style显得有点蠢。于是我们可以在html页面的head标签中,写上一个style标签块,里面设置class,id等选择器,这些就是内联样式。

<!DOCTYPE html>
<html>
<head>
<!-- 设置字符编码,utf-8可以支持中文 -->
<meta charset="UTF-8">
<title>这是网页的标题</title>

<style type="text/css">
	
	.box {
		height:100px;
		background: #ccc;
	}

</style>

</head>
<body>
	<a target="_blank" href="/Article1.0/index.jsp"><img src="/Article1.0/image/logo.png"></a>
	
	<div class="box"></div>
	<div class="box"></div>
	
</body>
</html>

3.外部css样式(优先级最低)

<link rel='stylesheet' href="index.css" />


常用css:

1. width (宽度)   px
2. height (高度)  px
3. color (给当前标签的内部文字设置一个颜色)

		<p>内容</p>
		
4. background : 给当前标签添加一个背景色		
		
		第一种用法
			background:#ccc

5. font-size: 设置字体大小  px
6. font-weight: 文字的粗细 单位是数字  一般设置600
7. text-align: 设置文字的水平对其方式  left、center、right
8. line-height: 设置文字的行高,如果一个块级元素设置行高为自己本身的高度,那么里面的文字就会垂直居中
9. display: 设置元素的级别。

			none 元素消失
			
			block  块级元素(width:100% , 首尾换行)
				--只有块级元素才可以用 margin:0 auto来实现居中定位!
			
			inline-block 行内块级元素 (width不再是100%,如果我不设置宽度,就是内容有多大,它的尺寸就有多大。同时,也没有首尾换行了。)	
				-- 如果你想要让多个块级元素在同一行中显示,可以用这个方法。
				-- 如果一个元素设置了inline-block,然后在这个元素里面有设置了其他的inline-block元素,会产生一些布局的混乱!
					因此,除非你可以非常确定元素里面不会再出现inline-block元素,那么你才可以放心地使用这个属性。
					否则,还是建议你用float或者定位来解决块级元素的并排显示问题。
					
					网上给的解释:如果发生inline-block元素的一个嵌套,
								inline-block元素内部只要发现有换行和空格,就会产生间隙,这些间隙很难抹去。		
				
			
			inline 行内元素: 设置宽度和高度是不起作用的。
			
10. font-family:设置文字的字体。(微软雅黑,黑体,宋体)

11:margin 外边距 (当前元素和其他挨着他的其他元素之间的距离)
	margin:10px; (上下左右四个方向各设置10px的外边距)
	margin:10px 20px;  (上下为10px的外边距,左右为20px的外边距)
	margin:10px 20px 30px 40px; (上  右  下  左)
	
	margin-top / margin-right / margin-bottom / margin-left
	
	注解:如果元素没有设置float属性,也没有设置position。
	如果在inline-block中嵌套inline-block元素,那么这个子元素和父元素的margin会出现各种异常,因为标签内部的空格和换行符会造成一些无法操作的区域,因此不要在margin了。
	

12:padding 内边距 (当前元素的内容和元素内边框的一个距离)

	用法和margin一样
	
	当你给元素设置padding的时候,会真实地改变元素本身的大小

13: float 元素浮动 left、right(可以使得某一个元素靠左浮动或者靠右浮动)
	当元素设置为浮动时,就会默认变成行内块级元素,宽度和高度是起作用的。


14: border: 设置元素的边框,有三个值写在一起。
	举例: border: 1px           solid / dotted            #666; 
				 边框的粗细      实线还是虚线             边框的元素

15. position : relative (相对定位) 、 absolute(绝对定位) 、 fixed (固定定位)

不管你用什么定位,设置了对应的定位属性值以后,就可以通过top、left、bottom、right四个css属性来控制元素的移动。

relative (相对定位): 以元素当前位置为原点,然后设置 top、left、bottom、right四个css属性来控制元素的移动。
	-- 因为不是用margin去调的,所以不会打乱布局。

absolute (绝对定位):当一个元素设置成绝对定位,并且添加了top、left、bottom、right中任何一个属性。
					那么,这个元素就会脱离当前的布局,称为一个漂浮的没人管的元素。
					漂浮的规则:
						先去看自己的父元素有没有设置相对定位或者绝对定位,如果有,就飘到父元素的左上角。
						如果父元素,就再去寻找父元素的父元素,一层一层网上找,直到找到有设置定位的那个元素位置。
						如果一个都没有,那就跑到body元素的左上角。
						
fixed (固定定位)		用法和绝对定位类似,但是不会随着浏览器滚动条的滚动而改变位置			


当元素设置为定位时,就会默认变成行内块级元素,宽度和高度是起作用的。


16. transition(不支持IE678): 过渡样式,设置某一个元素的样式进行缓慢过渡。就是说,如果你通过某些方法要改变一个元素的样式的时候,不会立刻变过去,而是缓慢地变过去。

举例:  transition: all                     1s           ease
				 要设置过渡的样式名称     过渡的时间    过渡的类型

17. cursor: 当鼠标划上去的时候改变鼠标的形状,常用值:pointer

18. list-style:none;  (取消li标签默认的小圆点)

19.z-index: 设置元素的一个层级关系,数字越大,层级越靠上面。

20. 


===============
* 鼠标悬停事件 *
===============

当鼠标滑到某一个元素上,进行css的重写,就是鼠标悬停事件。

hover

用法:

选择器:hover {
	
}

#goTop:hover {
	background: #00BFFF;
}


扩展:
如果想要通过父元素的hover事件,来改变其子元素的样式,直接这样写 (用得比较多)

.father:hover .son{
	
}

如果想要通过某一个元素的hover事件,来改变同级元素的样式,直接这样写
(注意,这个同级元素必须是放在当前hover的那个元素下面,否则是没有效果的)
当然,最好还是用JavaScript脚本来实现这种需求。

.father:hover ~.brother{
	
}


===============
* css3新特性	  *
===============

不支持IE678

1. 滤镜效果

-webkit-filter是css3的一个属性,支持给图像加上滤镜效果

现在规范中支持的效果有:

grayscale 灰度         值为0-1之间的小数 
sepia 褐色         值为0-1之间的小数
saturate 饱和度     值为num
hue-rotate 色相旋转  值为angle
invert 反色        值为0-1之间的小数
opacity 透明度     值为0-1之间的小数
brightness 亮度     值为0-1之间的小数
contrast 对比度     值为num
blur 高斯模糊           值为length
drop-shadow 阴影

 无效果   -webkit-filter:none;

        模糊   -webkit-filter:blur(3px)  
        灰度 -webkit-filter:grayscale(0.5) 
        亮度  -webkit-filter:brightness(0.5)
        对比度   -webkit-filter:contrast(2.6)
        饱和度   -webkit-filter:saturate(7.9)
      色相旋转 -webkit-filter:hue-rotate(260deg) 
      反色   -webkit-filter:invert(0.9)
 -webkit-filter:drop-shadow(10px 10px 10px #000)


2. 盒子阴影

box-shadow: 10px		 10px			 10px			 #ccc;
			右阴影       下阴影           模糊度			 阴影的颜色
			
类似的还有文字阴影
text-shadow: 10px 10px 10px #ccc;

3. 圆角属性
border-radius: 10px

border-radius: 10px(左上角和右下角) 10px (右上角和左下角)

border-radius: 10px 10px 10px 10px  (从左上角开始顺时针转一圈)

如果元素的宽度和高度一样,那么设置50%,就会变成一个正圆


4. 转动一个角度
transform:rotate(180deg);