H5学习---html，css---背景,属性选择器

渐进增强优雅降级

渐进增强:针对低版本浏览器进行构建页面，保证最基本的功能，
	然后再针对高级浏览器进行效果、交互等改进和追加
	功能达到更好的用户体验
优雅降级:一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

css选择器

一、层级选择器

	E>F 子代选择器(非css3)
	E+F 匹配紧邻元素E的后面的元素F(非css3)
	E~F 选择前面有E元素的每个F元素

二、属性选择器

	1、E[attr]：只使用属性名，但没有确定任何属性值
	2、E[attr="value"]：指定属性名和属性值(值完整)
	3、E[attr~="value"]：指定属性名，并且具有属性值，
		此属性值是一个词列表，并且以空格隔开，
		其中词列表中包含了一个value词
	4、E[attr^="value"]：属性值是以value开头的(一部分也可以)
	5、E[attr$="value"]：属性值是以value结束的(一部分也可以)
	6、E[attr*="value"]：属性值中包含了value(一部分也可以)
	7、E[attr|="value"]：属性值是value或者以“value-”开头的值
		（比如说zh-cn）;
	***4/5/6是css3新增的选择器

三、伪类选择器

	1.结构性伪类选择器
		X:first-child 匹配子集的第一个X元素(非css3)
		X:last-child 匹配子集的最后一个X元素
		X:nth-child(n) 匹配索引值为n的子元素,索引值从1开始
		X:only-child 匹配唯一的子元素
		X:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素X
		X:only-of-type 匹配同类型中唯一元素X
		X:first-of-type 匹配同类型兄弟元素中的第一个X元素
		X:nth-last-child(n) 从最后一个开始算索引
		X:nth-last-of-type(n) 匹配同类型中的倒数第n个兄弟元素X
		X:root匹配文档的根元素
		X:empty匹配没有任何子元素,也没有文本的元素X
			.list li:nth-child(even){偶数
				background-color: yellow;
			}
			.list li:nth-child(odd){奇数
				background-color: pink;
			}

2.目标伪类选择器

		E:target 选择匹配E的所有元素，且匹配元素被相关URL指向

3.语言伪类选择器

		E:lang(language) 指定了lang属性,而且其值为language(非css3)

4.UI元素状态伪类选择器

		E:enabled 匹配（form表单）中处于可用状态的E元素
		E:disabled 匹配（form表单）中处于不可用状态的E元素
		E:checked 匹配（form表单）中处于选中状态的E元素
		E::selection 匹配E元素中被用户选中的部分

5.否定伪类选择器

		E:not(s) （IE6-8浏览器不支持）
		匹配所有不匹配简单选择符s的元素E

6.动态伪类选择器(非css3)

		E:link 超链接并未被访问过
		E:visited 超链接已被访问过
		E:active 元素被激活
		E:hover 鼠标停留在元素E上
		E:focus 元素获取焦点

盒子阴影

box-shadow:水平阴影位置  垂直阴影位置  模糊距离  [阴影尺寸] 阴影颜色  [内阴影inset];
box-shadow: 0 0 10px #000;

文本阴影

text-shadow:水平阴影位置  垂直阴影位置  模糊距离  阴影颜色;

文本换行的相关属性

word-wrap
	属性值：
	normal只在允许的断字点换行（浏览器保持默认处理）
	break-word允许长单词或 URL地址换行到下一行
word-break
	属性值：
	break-all直接进行单词内的断句
	keep-all文本不会换行，只能在半角空格或连字符处换行

@font-face字体图标

阿里巴巴矢量图标库

背景新增属性

1.background-origin背景原点
	padding-box 背景图像填充框的相对位置(默认值)
	border-box 背景图像边界框的相对位置
	content-box 背景图像的相对位置的内容框
2.background-clip背景裁切
	border-box 背景被裁剪到边框盒(默认值)
	padding-box 背景被裁剪到内边距框
	content-box 背景被裁剪到内容框
3.background-size背景尺寸
	cover把背景图像扩展至足够大，完全覆盖背景区域
	contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
	具体数值/百分比
4.多背景属性

边框的新增属性

1.border-image图片边框
	border-image-source 路径
	border-image-slice 图片边框向内偏移
	border-image-repeat 平铺(repeat)铺满(round)拉伸(stretch)
	border-image-outset 边框图像区域超出边框的量
简写形式border-image:路径  偏移  平铺;
2.border-radius 圆角边框
	border-radius:5px;
	border-radius: 5px 10px 20px 50px;从左上角开始顺时针设置倒角
	border-radius: 30px/15px;倒椭圆形
	border-radius:10px 20px 30px 40px/40px 30px 20px 10px;