css笔记

css:
1.什么是css？
层叠样式表
不能脱离html而单独存在
2.语法
1》属性名和属性值之间使用:隔开
2〉多对属性之间使用分号隔开
3》最后一对属性可以不加分号

	速记写法：
		简写形式：
		border:1px solid red
		padding:10px;
		padding:10px 20px;
		padding:10px 20px 30px;
		padding:10px 20px 30px 40px;
	注释：
		1.写法
			/*注释内容*/
		2.注释的作用
		3.不能嵌套使用

3.html中引入css
	1.行内样式
		style属性
		<div style=''></div>
	2.内联样式
		在html中使用style标签
		<style>
			选择器{
				css语法
			}
		</style>
	3.外部引入
		建议使用：link标签
		@import url()

引入样式的优先级：
行内样式>内联样式/外部引入

4.选择器
	元素选择器
	id选择器
		#value
	类选择器：
		class
		.value
	普遍选择器：
		*
		*{}
		div *{}
	后代选择器：
		>：选择直接子元素
		空格：选择所有后代元素，包含孙代元素
	兄弟选择器：
		+：之后的一个兄弟
			#one+div
		~：之后的所有兄弟元素	
			#one~div
	属性选择器：
		[id]
		[class='one']
		[class~='one']
		[class^='one']
		[class$='one']
		[class*='one']
	多选择器：
		使用逗号分隔
		div,p{

		}
		#one,div.two,[id]{

		}
	组合选择器
		div.one

	伪类选择器：
		:伪类名称

		:first-child
		:last-child
		:nth-child(number/odd/even)

		:hover
		:active
		:link
		:visited
	lvha


		div:first-child{}
		div :first-child{}
		p:first-child{}


	<div class='one'>
		<span></span>
		<p></p>
		<a href=""></a>
	</div>


	伪元素选择器：
		<div>hello</div>
		div::first-letter{
			color:red
		}
		::first-line
		::seclection
		::before
			content:'text'/url()
		::after

		<div>
			<span>11.11</span>  32.21
		</div>

选择器优先级：
特性值越大优先级越高，当特性值相同时，越靠下的优先级越高

基础值：
	style属性：1000、
	id：100
	class/属性/伪类:10
	元素/伪元素：1

!important:不计入特性值的计算

---

1.选择到div
2.设置样式
颜色单位：
1.关键字
2.rgb(r,g,b);0-255之间
3.rgba(r,g,b,a);a:0-1取值；0代表完全透明 1代表完全不透明
4.16进制的颜色值
#fff
#ccc

		拾色器/取色器
尺寸单位：
	1.px：绝对单位
	2.em 相对单位
	3.百分比 相对单位
		<div style="width:100%">
		   <p></p>
		</div>

c:/windows/Fonts/
控制面板-》外观--〉字体

加载网络字体：
1.下载字体
2.声明字体
3.使用字体

字体图标：
fontawesome:

iconfont

index.html:
	<link rel="stylesheet" href="outer.css">

	<div class='one'></div>
outer.css:
	.one{
		background:red
	}