H5学习---html，css---css引入，选择器，css属性

了解：另一种外部样式表的引入方法

在head中添加
	<style type="text/css">
		@import url("css/style.css");
	</style>
- 两种引入外部样式表link和import之间的区别
	差别1：本质的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。
	差别2：加载顺序的差别：当一个页面被加载的时候,link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。
	差别3：兼容性的差别：@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
	差别4：使用dom控制样式时的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的.

样式表的特征

层叠性：不重复的属性可以层叠在一起
选择器权值相同的情况下，以后定义的为准
选择器权值相同的情况下，三个样式表采用就近原则

选择器

1.元素选择器
	将页面中所有这一类的元素的样式更改掉
	a{
		color:#333;
	}
2.id选择器
	- <div id="box"></div> 起一个id名
	- #box{	  } 使用时id名前面加一个#
	- 一个元素只能有一个id名，一个id名只能被使用一次(唯一性)
	- 用于大板块外围结构
3.class,类选择器
	- 用处：想区分不同元素之间的样式差异
	- <div class="box">第二个div</div>	给元素起一个类名
		.box{	}使用时类名前面加一个.
	- 特征
		一个类名可以被重复使用
		一个元素可以起多个类名,写在一个class中用空格隔开
		<div class="box wrap">这是一个div</div>
	- 命名规则
		见名知意，可以包含字母,数字,_,-，要求小写字母开头
		<div class="user-name-l"></div>
4.群组选择器
	.wrap,.box{	} 
	- ,逗号前后没有任何联系,独立开的,大家共用一套代码
5.通配符选择器
	*{
		margin:0;外边距清零
		padding:0;内边距清零
	}
	- *星号代表页面中所有的元素
	- 开发中禁止使用*,因为运行效率低下,推荐下面写法
		body,h1,h2,h3,h4,h5,h6,ul,li,ol,dl,dt,dd{
			margin: 0;
			padding: 0;
		}

css属性

1.颜色值：rgb(216,76,41) / #D84C29 二选一使用
	例如
		background-color : rgb(216,76,41) ;
		background-color : #D84C29 ;
2.宽度width
3.高度height
	哪些元素可以设置宽高：块级元素(div,p,h1-h6,列表,table,tr,td),img,input
	a,span,b,i,em,strong,del...无法设置宽高
4.*字体大小font-size
	-浏览器默认字体大小16px
	-浏览器允许设置的最小字体12px
5.字体font-family:"微软雅黑",Arial,"arial rounded mt bold";
	- 中文必须要有引号,多个单词组成的字体也要有引号
6.字体颜色
	color:#D84C29;
7.字体粗细
	*font-weight:bold;加粗
	*font-weight:normal;正常
	font-weight:lighter;细体
	font-weight:100-900;100-900之间的整数
8.*文本和图片水平对齐方式,属性添加给父容器
	text-align:left;默认左对齐
	text-align:right;右对齐
	*text-align:center;居中
	text-align:justify;两端对齐
9.行高line-height
	单行文本所占的高度
	*单行文本的垂直居中：设置元素的行高为它的实际高度
10.文本线条
	*text-decoration:underline;下划线
	text-decoration:line-through;删除线
	*text-decoration:none;无线条
11.首行缩进
	text-indent:32px;
	text-indent:2em;
12.*去掉列表标识符
	ul,ol,li{
		list-style:none;
	}
13.边框
	*border:粗细  线型  颜色;
	线型：solid直线、dotted点状线、dashed虚线、double双线
	例如border:1px solid #000;设置四个方向
	单方向设置：
		上边框border-top:1px solid #000;
		下边框border-bottom:1px solid #000;
		左边框border-left:1px solid #000;
		右边框border-right:1px solid #000;