css层叠样式表

层叠样式表：

		页面中可能会出现大量的元素（标签），需要去设置相同的样式，每个元素身上单独设置样式，造成大量想的代码冗余，降低开发效率，所以为了解决这个问题在也买那种来批量设置样式，由一门技术来解决----（css）批量选中元素（标签），在设置样式

DIV+CSS:

	div  盒子模型
	使用table标签来进行布局页面时，使用比较复杂并且不方便使用，引用了div盒子模型可以满足灵活进行布局，可以实现页面的复杂化书写，满足页面的需求。
		常见的容器标签
		div:盒子标签 （块级元素） ，独占一行，在浏览器或者html文档中进行一行的展示，独占一行，不自动进行换行
		p:段落标签，独占一行，在浏览器中或者html文档中进行占满一行，自动进行换行的标签
		span:占位标签，在同一行的进行显示，按照位置进行使用,行内元素

CSS文件样式表的三种引入方式：
		css的注释只有一种注释     /**/
		1. 直接在当前的标签的内部进行展示
				<div style="color:red;background-color: blue;">样式的控制</div>
		2. 直接在HTML文档的head头部中，进行统一的控制
		3. 在文档中使用  type="text/css"属性是为了告知不支持样式的浏览器忽略这个样式表;
					<style type="text/css">
					div{
						color: #DDD;
						border: 5px solid blue;
						border-bottom-color: pink;
						background-color: yellow;
					}
					p{
						background-color: red;
						border:5px solid blue;
					}
					span{
						background-color: white;
						border:4px solid pink;
					}
				</style>
			3. 外部文件进行引入的方式进行引入外不的文件：
					<link rel="stylesheet" href="1.css"></link>
						link:表示的链接的意思，将要链接到哪里去
						rel:进行引入的意思，表示将要引入什么样的文件
						href:表示需要引文件的URL(资源文件路径名)
			4.使用标签@import语句进行标识
						<style>@import url("1.css");</style>
						此规则其后的分号是必需的，如果省略了此分号，外部样式表将无法正确导入，并会生成
优先级：内部引用>文档引用>外部引用>import引用。
是否能够引用多个：外部样式控制表都能够引用多个外部的资源文件，一起进行控制的作用

ＣSS中和HTML中标签的的属性的区别：

		： bgcolor：设置的是HTML中的样式，在老版本中，现在过时了
		background-color:设置的是背景颜色：新的ＣＳＳ的出现就是为了替代以前的样式控制，建议当编写HTML页面的时候，使用统一的CSS样式表进行控制样式的展示。否则可能出现设置不显示的没有效果的现象
		两者的样式控制，后者在前者的基础上进行了增强和修改，很多样式的出现和控制基本都包含在CSS 中，CSS兼容大部分HTML样式控制器.

选择器：

所有的的html通用的选择器：

	ID选择器：ID选择符。以文档目录树(DOM)中作为对象的唯一标识符的 ID 作为选择符。 
	标签名选择器：通过html标签的名字来选择标签的选择器类选择器： 
	类选择器： html的所有标签都具有一个通用的属性叫做class，通过它可以为标签指定类名，通过类选择器可以选择指定类名的元素   .aaa{
													color:red;
													}
													<div class=”aaa”>hahahaha</div>

扩展选择器

后代选择器 选择父元素中的后代元素. —>父元素选择器后代元素选择器{}
p { color:#00FF00;}
p b { color:#FF000;}

P标签刘德华段落样式

P标签段落

子元素选择器: 选择父元素中的子元素. 父元素选择器> 子元素的选择器{}
h1 > strong {color:red;}
这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：

This is very very important.

This is really very important.

分组选择器 将多个选择器的选择结果进行一个或 的操作.
选择器1,选择器2,…{}

  					p,div { color:#FF0000;}
  					<p>P标签显示段落。</p>
  					<div>DIV标签显示段落</div>
  					注：多个不同选择器要用逗号分隔开。

属性选择器 选择具有指定属性，或指定属性的值等与指定值的选择器.

  						选择器[属性名]{}
  						选择器[属性名='属性值']{}    通配符  *
  						如果希望把包含属性 *（title）的所有元素变为红色，可以写作：
  						a[href] {color:red;}
  						与上面类似，可以只对有 href 属性的锚（a 元素）应用样式：
  						a[href][title] {color:red;}
  						为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：
  						planet[moons="1"] {color: red;}
  						假设只希望选择 moons 属性值为 1 的那些 planet 元素：
  						<planet>Venus</planet>
  						<planet moons="1">Earth</planet>
  						<planet moons="2">Mars</planet>
  						上面的代码会把以下标记中的第二个元素变成红色，但第一个和第三个元素不受影响：

相邻兄弟选择器：

  			选择选择器选择到的元素的相邻的兄弟元素
  				选择器+兄弟元素名{}
  					h1 + p {margin-top:50px;}

伪类选择器：

  			其实就在html中预先定义好的一些选择器。称为伪元素。是因为CSS的术语。
  			
  			:link 未点击的状态
  			注：在不设置visited状态时active生效，否则会出现visited覆盖active效果
  			:visited 被点击过的状态
  			:hover 鼠标移动到元素之上但是仍然未点击的状态
  			:active 被鼠标点击着的状态