前端学习之级联样式单与css选择器

样式单(Style Sheet)：专门描述结构文档表现方式的文档，既可以描述这些文档
如何在屏幕上显示，也可以描述它们的打印效果，声音效果。一般不包含在结构化，优点如下：

➢表达效果丰富:样式单可以支持文字和图像的精确定位、三维层技术以及交互操作等，
➢文档体积小:在样式单中，对同一类标记只需进行一次格式定义即可，可提高传输速度。
➢便于信息检索:样式单的显示逻辑与数据逻辑分离，更容易检索到有用信息。
➢可读性好

**级联样式表：**主要有以下两个功能：

➢对页面的字体、颜色控制更加细腻，让页面内容更富表现力，CSS的表现效果远远超
出传统HTML页面的color、bgcolor 等属性的表现力。
➢通过CSS样式单可以同时控制整个站点所有页面的风格，如果整个站点所有的页面效
果都需要改变，则可直接通过CSS样式单控制，避免逐个修改每个页面文件。

CSS样式单的四种使用方式：

➢链接外部样式文件:将样式文件彻底与HTML文档分离，样式文件需要额外
引入。在这种方式下，一批样式可控制多份文档。
➢导入外部样式文件:只是使用@import来引入外部样式单。
➢使用内部样式:通过在HTML文档头定义样式单部分来实现的。每批CSS样式只控制一份文档。
➢使用行内样式:这种方式将样式行内定义到具体的HTML元素，用于精确控制一
个HTML元素的表现。每份CSS样式只控制单个HTML元素。

1.引入外部样式文件

**2.导入外部样式文件**

<style type="text/css">
	@import "outer.css";
	@import url("mycss.css");
</style>

3.使用内部样式

<style type="text/css">
	table{
		background-color:#fff;
	}
	.title{
		font-size:18px;
	}
</style>

4.使用行内样式
style=“font-size:18px;height:30px”

元素选择器

1、* ：定义对所有元素起作用的CSS样式

*{
	margin:0;
	padding:0;
 }
 div{
	background-color:grey;
 }

2、ID选择器
#idValue{ . . . }

3、class选择器
.classValue{ . . . . . . }

4、包含选择器
div .a #b { . . . . . . }

5、子选择器
div>.a { . . . . . . }

6、兄弟选择器
#Android ~ .long{ . . . . . . . }

7.选择器组合
div , .a , #abc{ . . . . . . }

还有伪元素选择器，时间不够，未来得及整理