浅谈CSS

课程目标：

	1、Css是什么？
	2、如何在Html中引入Css
	3、Css选择器
	4、Css的基本语法
	5、Css盒装模型
	6、Css的定位
	7、冲突解决方案

1、Css是什么？
Css是Cascading Style Sheets（级联样式表）的缩写。
Css是一种样式表语言，用于为HTML文档定义布局。例如，Css设计字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。Html可以用于为添加布局效果，但是有可能被无用。而Css则提供了更多的选择，而且更为精准、完善。现在所有浏览器都支持Css。
总之，Html是定义网页内容，Css则是定义内容样式，一般的话，内容和样式分离，即可以方便维护，也可以实现代码重用。

2、如何在Html中引入Css
方法一：行内样式表（style属性）

定义在某一个标签里面，写法：
<标签名 style=“属性名：属性值；属性名：属性值”>
作用范围：只作用于当前标签里面。
方法二：内部样式表（style元素）

作用范围：作用于当前页面里面，如果内部样式和行内样式的属性重复了优先使用行内样式表。
方法三：外部样式表（引用一个样式表文件）
外部样式表就是一个扩展名为css的文本文件。
例如，样式表文件名为style.css，它通常被存放于名为style的目录中
作用范围：可以同时控制多个html的文档布局（一个css文件可以被多个html文件引入），一个html文件也可以引入多个css文件。
用法：<link rel=“stylesheet” type=“text/css” href=".css文件路径" =>
使用link这种方法的优点：多个HTML文档可以同时引用一个样式表。换句话说，可以用一个CSS文件来控制多个HTML文档的布局。

3、Css选择器（六大选择器）：
3.1标签（标记）选择器
标签名{
属性名：属性值；
属性名：属性值；
}
作用范围：作用于同一标签里面
3.2id选择器 —（id是唯一的 id的值不能重复）
#id的值{ 属性名：属性值； }
作用范围：只作用于当前的id里面
3.3class选择器 类选择器 （class的值是可以重复的）
.class的值{ 属性名：属性值； }
作用范围：作用于class一样的标签里面，class可以有多个一样的
3.4通配符选择器 作用于整个页面
*{ 属性名：属性值 }
作用范围：作用于文档中的所有元素。
3.5派生选择器
外部的标签 里面的标签 里面的标签{
属性名：属性值；
}
3.6伪类选择器
伪类：锚伪类–链接的不同状态：未被访问状态、已被访问状态、鼠标悬停状态、活动状态。
提示：
3.6.1在Css定义中，a:hover必须被置于a:link和a:visited之后，才是有效的
3.6.2在Css定义中，a:active 必须被置于 a:hover 之后，才是有效的
3.6.3伪类名称对大小写不敏感

4、Css的基本语法（单位：px）
height：高度；
width：宽度；
broder（边框）：颜色 宽度 线的类型；
border-redius：边框半径；
background-color：背景颜色；
background-image：url（“路径”）；背景图片
opacity：透明度（0.0-1.0：0.0透明度最高，1.0透明度最低）
font-family：字体；
font-size：字体大小；
margin：上边距px 左边距px；外边距
margin：上边距px auto；自动居中
margin-top：上边距px；
margin-left：左边距px；
padding：上边距px 左边距px；内边距
text-align：center；文本居中
text-indent：首行缩进；
letter-spacing：文字间距px；

5、Css盒装模型
盒状模型（box model）用于描述一个为HTML元素形成的矩形盒子
涉及为各个元素调整外边距（margin）、边框（border）、内边距（padding）和内容的具体操作
浮动元素：
可以通过CSS属性float令元素向左或向右浮动
也就是说，令盒子及其中的内容浮动到文档（或者是上层盒子）的右边或者左边
6、Css的定位 （绝对定位和相对定位（相对定位使用较多））
6.1 绝对定位：
6.1.1 position属性的值设为absolute
6.1.2 相对于最近的已定位祖先（上一级标签）或body的精确位置
6.1.3 如果在祖先元素上添加“position:relative”，则绝对定位元素相对于它进行偏移
6.1.4 否则，元素相对与body进行偏移，偏移之后，下一个标签会取代它原来的位置

6.2相对定位：
6.2.1 应将position属性的值设为relative
6.2.2 其位置是相对于它在文档中的原始位置计算而来的，后面的标签不会占据它原来的位置。

7、冲突解决方案