为满足简单网页需要，个人CSS笔记

第一节 三种样式
1、三种样式：
	1、嵌入样式
	<style type="text/css" ></style>
	<style type="text/css" >@import url("css/layout.css");</style>
	2、行内样式
	<a href="#" style="color:#000;">Home</a>
	3、连接样式
	<link href="css/print.css" rel="stylesheet" type="text/css" />

2、	1、类选择符：
	body{} div{} span{}
	2、群组选择符
	h1,h2,h3,p,span{}
	3、包含选择符
	h1 span{}
	4、id选择符
	#adam1985{} 
	5、class选择符
	.apple{}
	6、包含选择符+群组选择符
	h1 span,a,b{}
	7、通配选择符
	*{}

3、width:200px;
   height:200px;
   margin:20px; 外间距
   padding:20px; 内间距
   border:10px solid #000; 黑色边框
	
4、border:border-width border-style border-color;
	border:10px  solid #000;
   相当于
	border-style:solid;
	border-width:10px;
	border-color:#000;
   相关属性：[ border-top ] || [ border-right ] || [ border-bottom ] || [ border-left ]
	border-left:10px  solid #000;

5、border:10px solid #000;中的solid类型
	<border-style>
	none： 无轮廓。border-color与border-width将被忽略 
	hidden： 隐藏边框。IE7及以下尚不支持 
	dotted： 点状轮廓。IE6下显示为dashed效果 
	dashed： 虚线轮廓。 
	solid： 实线轮廓 
	double： 双线轮廓。两条单线与其间隔的和等于指定的border-width值 
	groove： 3D凹槽轮廓。 
	ridge： 3D凸槽轮廓。 
	inset： 3D凹边轮廓。 
	outset： 3D凸边轮廓。 

6、margin:[<length>|<percentage>|auto]
相关属性：[ margin-top ] || [ margin-right ] || [ margin-bottom ] || [ margin-left ]
auto： 值被设置为相对边的值 
<length>： 用长度值来定义外补白。可以为负值 
<percentage>： 用百分比来定义外补白。可以为负值 

例如：	margin-top:10px;
	margin-right:20px;
	margin-bottom:30px;
	margin-left:40px;
	相当于margin:10px 20px 30px 40px;(顺序:上右下左)
例:margin:30px 60px;（上下间距30px,左右间距60px）

7、padding:同margin


第二节 CSS字体与文本样式
8、body {font-family:Verdana, Arial, Helvetica, sans-serif;}
	字体家族：font-family:Verdana, Arial, Helvetica, sans-serif（字体顺序从左到右找）

9、字体大小：font-size:
<absolute-size>： 根据对象字体进行调节。可选参数值：xx-small | x-small | small | medium | large | x-large | xx-large 
以 medium 作为基础参照，xx-small相当于medium 3/5 (h6)，x-small: 3/4，small: 8/9 (h5)，medium: 1 (h4)，large: 6/5 (h3)，x-large: 3/2 (h2)，xx-large: 2/1 (h1)， 
<relative-size>： 相对于父对像中字体尺寸进行相对调节。使用成比例的em单位计算。可选参数值：smaller | larger 
<length>： 用长度值指定文字大小。不允许负值。 
<percentage>： 用百分比指定文字大小。其百分比取值是基于父对象中字体的尺寸。不允许负值。 

	例如：body {
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:11px;
		}

10、颜色（color）:
	color:Color Name | HEX | RGB | RGBA | HSL | HSLA |transparent
	例如:
	body {
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:11px;
		color:#3399cc;  (相当于缩写方式:color:#39c;)
		}
	十六进制表示法： p {color:#cccccc;}
	RGB表示法：p {color:rgb(255,255,0);}

11、(加粗变细)font-weight:normal|bold|bolder|lighter|<integer>
normal： 正常的字体。相当于number为400 
bold： 粗体。相当于number为700。 
bolder： 特粗体。也相当于strong和b对象的作用 
lighter： 细体 
<integer>： 用数字表示文本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 

	例如
	body {
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:11px;
		color:#3399cc;  (相当于缩写方式:color:#39c;)
		font-weight:normal;}
	h2 {font-weight:normal;}
		
12、(线性)text-decoration:[text-decoration-line]||[text-decoration-style]||[text-decoration-color]
[ text-decoration-line ]： 指定文本装饰的种类。相当于CSS2.1的 text-decoration 属性，可取值：none | underline | overline | line-through | blink （Firefox1.0及Opera4.0开始支持blink，其它浏览器尚不支持） 
[ text-decoration-style ]： 指定文本装饰的样式。 
[ text-decoration-color ]： 指定文本装饰的颜色。

	例如：p {
	color:rgb(200,0,0);
	font-weight:400;
	text-decoration:underline;
	} 
	p {
	color:rgb(200,0,0);
	font-weight:400;
	text-decoration:line-through;
	}
	去掉a标签的下划线
	a{
	text-decoration:none;
	color:rgb(0,0,255);
	}

	包含模式
	h2 a{
	text-decoration:none;
	color:rgb(0,0,255);
	}


13、text-transform:none|capitalize|uppercase|lowercase|full-width
none： 无转换 
capitalize： 将每个单词的第一个字母转换成大写 
uppercase： 将每个单词转换成大写 
lowercase： 将每个单词转换成小写 
full-width： 将所有字符转换成fullwidth形式。如果字符没有相应的fullwidth形式，将保留原样。这个值通常用于排版拉丁字符和数字等表意符号。（CSS3） 	

	例如：a {
	text-decoration:none;
	color:rgb(0,0,255);
	text-transform:capitalize;
	}	

14、行高：line-height:30px
line-height：normal | <length> | <percentage> | <number>
取值：
normal： 允许内容顶开或溢出指定的容器边界。 
<length>： 用长度值指定行高。可以为负值。 
<percentage>： 用百分比指定行高，其百分比取值是基于字体的高度尺寸。可以为负值。 
<number>： 用乘积因子指定行高。可以为负值。 
	
	例如：p {	
	color:rgb(200,0,0);
	font-weight:400;
	text-decoration:none;
	line-height:200%;
	}

15、单词间距:word-spacing:[normal|<length>|<percentage>]{1,3}

	例如：p {	
	color:rgb(200,0,0);
	font-weight:400;
	text-decoration:none;
	line-height:30px;
	word-spacing:20px;
	}

16、字母间距:letter-spacing:[normal|<length>|<percentage>]{1,3}

17、文本属性text-align:[[start|end|left|right|center]||<string>] | justify | match-parent | start end
取值：
left： 内容左对齐。 
center： 内容居中对齐。 
right： 内容右对齐。 
justify： 内容两端对齐。 
start： 内容对齐开始边界。（CSS3） 
end： 内容对齐结束边界。（CSS3） 
<string>： 字符串必须是单一字符，否则申明将无效。（CSS3） 
match-parent： 这个值和 inherit 表现一致，只是该值继承的 start 或 end 关键字是针对父母的 direction 值并计算的，计算值可以是 left 和 right 。（CSS3） 
start end： 指定 start 对齐第一行和任何强制打断的行；end 对齐所有剩余的行不受 text-align-last 影响。（CSS3） 

	例如：h2 {
	font-weight:400;
	text-align:center;
	}	

18、设置对象中文本的缩进：text-indent:：[ <length> | <percentage> ] && [ hanging || each-line ]?
<length>： 用长度值指定文本的缩进。可以为负值。 
<percentage>： 用百分比指定文本的缩进。可以为负值。 
each-line： 定义缩进作用在块容器的第一行或者内部的每个强制换行的首行，软换行不受影响。（CSS3） 
hanging： 反向所有被缩进作用的行。（CSS3）

	例如：p {	
	color:rgb(200,0,0);
	font-weight:400;
	text-decoration:none;
	line-height:30px;
	word-spacing:normal;
	letter-spacing:normal;
	text-align:left;
	text-indent:20px;
	}
	p {text-indent:2em}  # 1em = 16px  12px = 0.75em

19、(重要)设置标签内外边距默认属性
	* {
	margin:0;
	padding:0;
	}
    再对需要的边距进行修改：
	p {	
	color:rgb(200,0,0);
	font-weight:400;
	text-decoration:none;
	line-height:30px;
	word-spacing:normal;
	letter-spacing:normal;
	text-align:left;
	text-indent:1em;
	padding:20px 0;
	}	


第三节：
20、