Web前端-CSS3样式学习一

一、CSS：级联样式表/层叠样式表

优势：
	（1）内容与样式分离（html/css）
	（2）样式统一，代码复用，便于维护
	（3）减少未见大小，提高用户访问速度

二、语法

	选择器{
		样式属性:属性值;
		样式属性:属性值;
	}

三、引入方式

  1.内联样式
	<a style=""></a>
  2.内部样式
	<style type="text/css"></style>
  3.外部样式
	<link href="路径" rel="stylesheet" type="text/css"/>
  4.导入样式(不推荐，有兼容问题)
	@import(url)

四、样式的层叠原则

  1.就近原则
  2.内联样式>内部样式>=内部样式

五、基本选择器

  通用选择器 < 标签选择器 < class选择器 < id选择器
  优先级别：
	1.样式的层叠，和选择器的优先级别有关系，与引入方式和顺序无关
	2.样式大于属性

六、高级选择器（标签/元素/节点）

  E：基本选择器/高级选择器
	1.层次选择器
		E F	后代选择器		E后的F元素被选中
		E>F	子选择器			E后的直接子元素F被选中
		E+F	相邻兄弟选择器	F在E的（同级）后面第一个
		E~F	通用兄弟选择器	F在E的后面（所有的兄弟）
	2.复合选择器
		E,F	并集选择器	符合E和F都被选中
		EF	交集选择器	符合E和F两个才会被选中
	3.结构选择器
		E F:nth-child(n)	E下的第n个位置的F元素
		E F:nth-of-type(n)	E下的F的第n个位置
		E F:first-child		E下的第一个子元素
		E F:last-child		E下的最后一个子元素
	4.属性选择器
		E[class]		具有该属性的E标签
		E[class=""]		属性等于多少的标签
		E[class^=""]	属性以什么开头的标签
		E[class$=""]	属性以什么结束的标签
		E[class*=""]	属性的值包含某个字符的标签
	5.状态伪类选择器
		E::checked		单选或多选被选中时
		E::selection	鼠标选中状态（文本选中）
		E::hover		鼠标悬停状态
		E::disabled		禁用状态的标签被选中
	6.伪类对象选择器
		E:before	在E前面添加一个元素
		E:after		在E后面添加一个元素

七、常用样式

  1.字体样式
	大小	font-size	px/em（其他文字的倍数）	cm mm
	类型	font-family	字体风格（自定义字体/“宋体”/“微软雅黑”）
	粗细	font-weight	100~900（默认400,700=boder）
	风格	font-style	斜体/正常
  2.文本样式
	颜色		color	rgba（11，22,33,0~1）透明度
	text-indent			段落缩进 2em；
	text-align			水平方向left\right\center
	text-decoration		文本修饰 上划线\下划线\管穿线  none(无修饰)
	line-height			行高（底部对齐）
	word-break			break-all(英文单词一行写不下，强制换行)
	word-spacing		单个单词（文字）的距离
	text-transfonm:lowercase	大小字母转换
	direction:rtl		文本方向（左右方向）
  3.超链接样式
	a:link		未访问连接时
	a:visited	访问过连接时
	a:hover		鼠标悬停时
	a:active	点击中，鼠标左键未释放
	建议顺序：link > visited > hover > active
  4.列表样式
	list-style-type		none/实心圆/圆心/数字
	list-style-image 	自定义符号图片
	配合样式：
	width/height		整体高宽
	padding/margin		间距
	list-style		符号风格
	text-algin/line-height	左右上下对齐
  5.背景样式
	background			背景
	background-color	背景颜色  red/rgb()/rgba()/transparent
	background-image	背景图片（默认x/y平铺）
	background-repeat	背景图片平铺
    		repeat		x，y都可以平铺
    		repeat-x	只允许x方向平铺
    		repeat-y	只允许y方向平铺
    		no-repeat  不允许平铺
	background-position	图片位置定位(100px 100px  设置图片的其实位置偏移右下角）
			center\right\left\top\bottom
	background-size		设置背景图片的高宽
	 	 50px 100px		宽度  高度
			  			20%  30%	  百分比
    	cover			宽度设置为背景的100%，高度自适应
    	contain			高度设置为背景的100%，宽度自适应
	background-origin	图片的起始位置
    		border-box		以border的左上角为原点
    		padding-box		以padding的左上角为原点
    		content-box		以content的左上角为原点
	background-clip			超过取余的部分被裁剪
    		border-box		以border的部分被裁剪
    		padding-box		以padding的部分被裁剪
    		content-box		以content的部分被裁剪