css（简介，语法，选择器）

前端三要素：
html：木偶
css：化妆
javascript：动态展示（跳舞）

css:
1.什么是css？
cascading style sheets
层叠样式表
div

2.css的语法
	1.属性名和属性值之间使用:隔开
		多对属性之间使用;隔开
		最后一对属性可以不加分号
		id="one"
		class='one'
		style='根据css语法设置'
		title='one'

		<div style="width:100px;height:100px;color:red;"></div>

		<style>
			选择器{
				width:100px;
				height:100px;
				color:red
				...
			}
		</style>

		<div></div>

	2.速记写法
		简写形式
		border:1px solid red;
			border-width:1px;
				border-top-width
				border-left-width
				border-right-width
				border-bottom-width

			border-style
				border-top-style
				border-bottom-style
				。。。。
			border-color

	盒子=内容区+内边距+边框+外边距
				padding  margin

	
	padding-top:10px;
	padding-left:10px;
	padding-right:10px;
	padding-bottom:10px;

-->
padding:10px;//上下左右均为10px
padding:10px 20px;//上下10px 左右20px
padding:10px 20px 30px;//上10px 左右20px 下30px

padding:10px 20px 30px 40px;//上 右 下 左

margin：

	3.注释
		1.注释写法
			/*注释内容*/
		2.注释的作用
			解释说明
			更好的维护和管理
		3.注释不能嵌套使用
			<!--注释
				<!--inner-->
			内容-->

			/*
				/**/
			*/
3.html中引入css的方式
	1.行内样式
		style属性
		<div style=''></div>
	2.内联样式
		style标签
		<style>
			div{
				css语法
			}
		</style>

	3.外部引入
		创建.css为后缀名的文件
		link标签：先加载css
		@import url():不建议使用，先加载html

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

就近原则：哪一种设置方式更靠近元素，哪一种方式的优先级更高

4.选择器
	标签选择器/元素选择器
		根据标签名称选择一类元素

	id选择器：
		通过id属性选择一个元素
		#value
		<div id='one'></div>

		#one
	类选择器：
		class
		.value
	普遍选择器：
		*：所有
	后代选择器：
		selector1>selector2:选择直接子元素
		selector1 selector2:选择所有后代元素，包含孙代元素
	兄弟选择器：
		+:选择当前元素之后的一个兄弟元素
		~:选择当前元素之后的所有兄弟元素
	属性选择器：
		[class]:选择当前页面中具有class属性的元素
		[class='one']:选择当前页面中具有class属性，并且属性值为one的元素
		[class~='one']:选择当前页面中具有class属性，并且属性值之一为one的
		[class^='o']:选择当前页面中具有class属性，并且属性值以o字符开头
		[class$='o']:选择当前页面中具有class属性，并且属性值以o字符结尾
		[class*='o']:选择当前页面中具有class属性，并且属性值中包含o字符
	多选择器：
		使用逗号隔开多个选择器

		div	
		p

		div{
			width:100px;
			height:100px
		}
		p{
			width:100px;
			height:100px;
		}
			-->
		div,p{
			width:100px;
			height:100px;
		}

	#one,.two,p{

	}

	<div>
		<ul class='one'>
			li*3
		</ul>
		<ul class='two'>
			li*3
		</ul>
	</div>
	<p class='two'></p>

	div .one,.two{

	}

	div .one,div .two{

	}

	table tr td

	组合选择器：
		将多个选择器组合到一起使用
		div.one{

		}


		<div class="one"></div>
		<div class='two'></div>
		<div class='three'></div>
		<p class='one'></p>

	伪类选择器：
		:伪类名称

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

		和状态相关的：
		:hover:当鼠标悬停在元素上时
		:active：当鼠标按下时
		:link：当鼠标未被点击时
		:visited：当点击过之后的一个状态

设置顺序：
	link-》visited--〉hover--》active

	伪元素选择器：
		<div>hello</div>

		::伪元素的名称
		::first-letter:第一个字符
		::first-line：第一行
		::seclection:文本被选中时

		::before:在当前元素内容之前
			content:text/url()
		::after：在当前元素内容之后

---

选择器优先级：
!important:不计入特性值中，使用了该属性的样式优先级最高,不建议使用

优先级需要根据特性值来计算，特性值越大，优先级越高，特性值相同，越靠下的优先级越高

style属性中:1000
id选择器:100
类选择器/属性选择器/伪类选择器:10
元素选择器/伪元素选择器：1

div#one{//number=101

}