CSS
创建CSS方式
- 元素内嵌样式
- 文档内嵌样式
- 外部引入样式
<link rel="stylesheet" type="text/css" href="style.css">
@import 如果有多个.css 文件，可以使用 @import 导入方式引入.css 文件。只不过，性能不如多个链接。
层叠和继承
样式表层叠：指的是同一个元素通过不同方式设置样式表产生的样式重叠。 样式表继承：指的是某一个被嵌套的元素得到它父元素样式。
样式表层叠通过五种方式进行，如果样式相同，那么比如会产生冲突替换。这时，它的优先级顺序就显的比较重要。以下优先级从低到高： (1).浏览器样式（元素自身携带的样式）； (2).外部引入样式（使用引入的样式）； (3).文档内嵌样式（使用
//元素内嵌
<p style="color:red;font-size:30px;">我将被三种方式叠加样式</p>
// 文档内嵌
<style type="text/css">
p { color:blue; font-weight: bold;
}
</style>
//外部引入
p { color: green; font-style: italic;
}
//强行设置最高优先级
color: green !important;
样式继承
如果某一个元素并没有设置父元素相关的样式，那么就会使用继承机制将父元素的样式集成下来。+
选择器
| 选择器 | 名称 | 说明 | CSS 版本 |
|---|---|---|---|
| null | 通用选择器 | 选择所有元素 | 2 |
| 元素选择器 | 选择指定类型的元素 | 1 | |
| # |
id 选择器 | 选择指定 id 属性的元素 | 1 |
| . |
class 选择器 | 选择指定 class 属性的元素 | 1 |
| [attr]系列 | 属性选择器 | 选择指定 attr 属性的元素 | 2 ~ 3 |
| s1,s2,s3… | 分组选择器 | 选择多个选择器的元素 | 1 |
| s1 s2 | 后代选择器 | 选择指定选择器的后代元素 | 1 |
| s1 > s2 | 子选择器 | 选择指定选择器的子元素 | 2 |
| s1 + s2 | 相邻兄弟选择器 | 选择指定选择器相邻的元素 | 2 |
| s1 ~ s2 | 普通兄弟选择器 | 选择指定选择器后面的元素 | 3 |
| ::first-line | 伪元素选择器 | 选择块级元素文本的首行 | 1 |
| ::first-letter | 伪元素选择器 | 选择块级元素文本的首字母 | 1 |
| ::before | 伪元素选择器 | 选择元素之前插入内容 | 2 |
| ::after | 伪元素选择器 | 选择元素之后插入内容 | 2 |
属性选择器: 属性选择器，直接通过两个中括号里面包含属性名即可。当然，还有更多扩展的属性选择器。 [href] { color: orange; }
class定义属性的缺点：
- class本身没有语义，纯粹为了CSS样式服务，属于多余属性。
css 的度量单位
绝对长度： in; cm; mm; pt(pound); pc(pica);
相对长度：
em： 与元素字号挂钩 ex : 与元素字体的“x 高度”挂钩 rem: 与根元素的字号挂钩 px: 像素，与分辨率挂钩 % : 相对另一值的百分比
css 盒模型(Layout)
auto: auto 是默认值，width 在 auto 下是 100%的值；height 在 auto 下是自适应。
overflow(溢出) auto: 浏览器自行处理溢出内容。如果有溢出内容，显示滚动条。 hidden: 溢出部分，直接剪掉 scroll: 显示滚动条 visible: 都显示内容
行内元素 VS 块元素
行内元素：只占据它对应标签的边框所包含的空间。只能容纳文本或者其他内联元素。比如span 块元素： 块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。通常浏览器会在块级元素前后另起一行。能容纳其他块元素或者内联元素。div
区别： 1.块元素，总是在新行上开始；内联元素，和其他元素在一行； 2.块元素，能容纳其他块元素或者内联元素；内联元素，只能容纳文本或其他内联元素； 3.块元素中高度，行高以及顶和底边距都可以控制；内联元素中高，行高及顶和底边距不可改变。
转换： display： inline;转换为行内元素。 block;转换为块级元素。 inline-block;转换为行内块级元素。 float： 当把行内元素设置完float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。行内元素去除了之间的莫名空白。
position：
cursor:
我们不但可以指定页面上的元素样式，就连光标的样式也可以指定。样式表如下：