H5学习---html，css---选择器，文本列表边框属性，背景，精灵图

选择器

- 元素选择器
	把页面中的某一类标签改变相同的样式
- 类选择器
	- 命名规则：见名知意,包含字母数字_-,小写字母开头
	- 一个元素可以有多个类名,一个类名可以被多个元素所使用
		<div class="box wrap content"></div>
- id选择器
	- 每个版块最外层的大容器
	- id具有唯一性
		<div id="box"></div>
- 群组选择器
	- 共用相同的代码
		#box,.wrap,.list{}
- 通配符选择器
	- 去掉所有元素的内外边距
	- *代表页面所有的元素
	*{
		margin:0;
		padding:0;
	}
	body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd{
		margin:0;
		padding:0;
	}
- 子代选择器(IE6不识别)
	.nav>li{
		大于号前后一定是父子关系
	}
- 后代选择器
	.lists a{
		空格前后是包含关系
	}
- 伪类选择器
	love-hate爱恨
		a:link 访问前
		a:visited 访问后
		a:hover 鼠标移入
		a:active 激活状态(按下未松开状态)
	:hover重点介绍,任何元素都能使用

权值

- 权值相同的情况下,以后定义的为准
- 权值不同的情况下,以权值大的为准
- 权值的计算规则：
	元素选择器1
	类选择器10
	id选择器100
	内联1000
- 计算权值 #wrap>.link a{}计算后权值为100+10+1=111
- 附带知识点：!important手动调整样式的优先级
	background-color: red !important;

CSS文本属性

1.***文本大小font-size:20px;
	em单位：父元素字体大小的倍数
	默认值font-size:medium;等同于16px大小
2.***文本字体font-family:字体1,字体2,字体3;
	字体是中文必须有"",一个单词不需要"",多个单词组成的字体要加"arial narrow"
3.字体颜色color:rgb(12,124,20)或者#D43E62;
	rgb(12,124,20)每一位的范围[0-255]
		- 红色rgb(255,0,0)
		- 绿色rgb(0,255,0)
		- 蓝色rgb(0,0,255)
		- 白色rgb(255,255,255)
		- 黑色rgb(0,0,0)
	#D43E62六位十六进制表示法,每一位的范围0-9,A-F
		- 黑色#000000简化成#000
		- 白色#ffffff简化成#fff
		- #ff22ed不能简化
4.文本粗细
	***字体加粗font-weight:bold;
	字体正常font-weight:normal;
	字体变细font-weight:lighter;
	可以取具体数值font-weight:100-900;
5.文本倾斜
	font-style:italic/oblique;
	两个值区别在于italic是指斜体字，而olique是倾斜的文字
6.文本和图片水平对齐方式
	- 控制元素内部的文本和图片居中,而不是div本身位置的居中
	***文本水平居中text-align:center;
	文本水平居左text-align:left;
	文本水平居右text-align:right;
	文本两端对齐text-align:justify;
7.垂直对齐方式
	- 只针对特定的元素生效：行内块(img,input),表格
	***vertical-align:baseline;基线对齐
	vertical-align:top上;
	vertical-align:bottom下;
	vertical-align:middle垂直居中;
8.行高line-height
	line-height:1.5em;
	***单行文本的垂直居中line-height:父元素的高度;
9.文本线条修饰
	下划线text-decoration:underline;
	删除线text-decoration:line-through;
	无线条text-decoration:none;
10.首行缩进
	text-indent:2em;可以给负值
11.检索英文字母大小写
	text-transform:none;无转换
	text-transform:capitalize;首字母大写
	text-transform:uppercase;全都大写
	text-transform:lowercase;全都小写
12.字间距letter-spacing:10px;
13.词间距word-spacing:10px;
14.文字简写属性
	font:[字体粗细  字体倾斜] 字体大小/行高  字体样式;
	font:bold italic 12px/1.5em "宋体"; 
	***font:12px/1.5em "宋体"; 一定是这样的书写形式(包含字体大小、行高、字体样式)

css列表属性

***ul,ol,li{list-style:none;}
- 列表标识符list-style-type:
		disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号);
- 列表图片标识符
		list-style-image：url(相对路径);
- 列表标识符位置
	list-style-position:outside(外边)/inside(里边);

边框属性

- 四个方向边框的设置border:1px solid #000;
- 单方向边框的设置
	border-top:1px solid #000;上边框
- 线型：solid直线、dotted点状线、dashed虚线、double双线
- 利用边框制作一个三角形
	.box{
		width: 0px;
		/*height: 0px;*/
		border-top: 10px solid transparent;
		border-right: 10px solid transparent;
		border-bottom: 10px solid yellow;
		border-left: 10px solid transparent;
	}
	transparent代表是透明色

背景

- 背景颜色background-color
- 背景图与img的区别：
		背景图一般用在装饰作用(例如小图标)
		内容用img标签
- 引入背景图
	background-image:url();
- 背景图重复
	background-repeat:repeat;默认水平垂直都重复
	background-repeat:no-repeat;不重复
- 背景定位
	background-position:100px 200px;
		第一个值代表水平方向移动，正值向右
		第二个值代表垂直方向移动，正值向下
	background-position:right bottom;右下角
	background-position: center center;水平居中垂直居中
- ***背景的简写(集合了以上四个属性值)
	background: pink url(img/join_24.png) no-repeat center center;
- 背景固定
	background-attachment:scroll滚动/fixed固定;

css精灵图、雪碧图、css sprite

- 讲众多小图标拼合到一整张图片上，用户在请求图片的时候只需要请求一次，效率高
-