目录
什么是CSS
CSS全称Cascading Style Sheet，层叠样式表。CSS主要被用来修改HTML的显示样式，让HTML元素看起来更加美观。HTML主要关注网页的内容，而CSS主要关注元素的样式。
CSS类型
按照CSS的作用域，CSS可以分为：
- 行内样式
- 内部样式
- 外部样式
具体三种样式的使用规则可以看这篇文章：
【前端学习之路】在HTML中链接css样式的三种方法
他们对HTML元素影响的优先级为：行内样式>内部样式>外部样式
CSS语法
一个样式由三部分构成：选择器（selector），属性（property）和值（value）。
选择器（selector）：选择定义样式的HTML元素
属性（property）：希望改变的属性
值（value）：给每个属性指定一个值，属性和值被冒号分开，并由花括号包围。
例子：
body {
color: #000000;
background: #ffffff;
margin: 0;
padding: 0;
font-family: serif;
}
选择器
标签选择器
标签选择器以标签为选择器，定义的样式影响HTML文档中所有相同标签。
语法结构：标签{}
例如：将所有h1标签的都变成红色。
<!--样式定义-->
<style type="text/css">
h1{
color:red
}
</style>
<!--在HTML中使用-->
<h1>h1标题</h1>
类选择器
类选择器以一个点号显示，用来定义一类元素的样式。
语法结构：.元素class属性值{}
例如：使用类选择器选中元素并修改文字元素对齐方式
<!--样式定义-->
<style type="text/css">
.center {text-align: center}
</style>
<!--在HTML中使用-->
<h1 class="center">
This heading will be center-aligned.
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
id选择器
id选择器可以为特有id的HTML水元素指定特定的样式。
语法结构：#元素特定id值{}
例子：使用id选定元素并修改其颜色
<!--样式定义-->
<style type="text/css">
#red {color:red;}
#green {color:green;}
</style>
<!--在HTML中使用-->
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
派生选择器
通过元素的上下文关系来定义样式，使标记更加简洁，选择器之间用空格分开。
语法结构：选择器1 选择器2 … 选择器3{}
例子：你希望table中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：
<style type="text/css">
table strong {
font-style: italic;
font-weight: normal;
}
</style>
分组选择器
对选择器进行分组，被分组的选择器就可以分享相同的声明，用逗号将需要分组的选择器分开。
语法结构：选择器[,选择器] {}
例：
h1,.green,#green{
color:green;
}
其中h1, .green, #green三个选择器共用一个样式声明。
CSS框模型
在CSS的概念中，一切皆为框(盒)。
框模型 (Box Model) 规定元素框处理元素内容、内边距、边框和外边距的方式。
- element : 元素。
- border : 边框
- padding : 内边距，或者填充。
- margin : 外边距，空白或空白边。
例子：
假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。
如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素:
#mybox {
width: 70px;
padding: 5px;
margin: 10px;
}
HTML元素显示方式
按照元素框的显示方式，可以分为
- 块元素：一个框独占一行，一行最多一个框
- 行内元素：多个行内元素可以共享一行
- 可变元素：由元素的父元素决定是块元素还是行内元素
块元素
块级元素生成一个元素框，(默认地)会填充其父级元素的内容，旁边不能有其他元素，在元素框之前和之后生成“分隔”符。一般是其他元素的容器元素，例如div。
块元素特点：
- 总是在新行上开始
- 高度，行高以及顶和底边距都可控制；
- 缺省宽度是它的容器(上级元素)的100%，除非设定一个宽度。
常见块元素：
<h1>：标题
<p>：段落
<div>：层
<form>：表单
行内元素
也叫内联元素，内联元素在当前行内生成元素框，而不会打断这行，行内元素不会在它本身之前或之后生成“分隔符”，行内元素只能容纳文本或者其他行内元素。
行内元素特点：
- 和其他行内元素都在一行上
- 高，行高及顶和底边距不可改变
- 宽度就是它的文字或图片的宽度，不可改变。
常见行内元素：
<a>：超链接；
<font>：字体
<image>：图片
<textarea>：多行文本输入框
<input>：输入框
<select>：选择输入框
<br>：换行
可变元素
可变元素：为根据上下文语境决定该元素为块元素或者内联元素。
常见的可变元素：
<applet>：Java Applet
<button>：按钮
使用display属性改变元素的框模型
display 属性设置为 inline：行内元素
display 属性设置为 block：块元素
display属性设置为 none ：让生成的元素根本没有框，这样的话，该框及其所有内容就不再显示。
例子：修改Display
<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<script src="js/jquery-1.9.1.min.js" type="text/javascript">
</script>
<script type="text/javascript" >
function changeDisplay() {
//1-获得用户新的显示选择
var newDisplay = $("#selectDisplay").val();
//2-设置元素样式的display属性
$("#head1").css({"display" : newDisplay});
$("#head2").css({"display" : newDisplay});
}
</script>
</head>
<body>
<h1 id="head1">我是标题1</h1>
<h1 id="head2">我是标题2</h1>
<select id="selectDisplay" onchange="changeDisplay();">
<option selected>block</option>
<option>inline</option>
<option>none</option>
</select>
</body>
</html>
选择不同的display属性，动态改变h1标签的display状态。
HTML元素定位
坐标系统：可以将任何元素(框模型)放置在坐标系统(浏览器)的任何位置上。
距离：使用像素(px)或者百分比(%)
CSS定位方式
普通流定位
绝对定位
绝对定位的元素位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块
绝对定位使元素的位置与文档流无关，不占据空间。
要对元素进行绝对定位，应将position属性的值设为absolute。接着，你可以通过属性left、right、top和bottom来设定将盒子放置在哪里。
相对定位
采用相对定位的元素，其位置是相对于它在文档中的原始位置(流定位模型)计算而来的。这意味着，相对定位是通过将元素从原来的位置向右、向左、向上或向下移动来定位的。
采用相对定位的元素会获得相应的空间，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
元素定位属性
其中使用z-index属性可以将内容显示在不同层，形成堆叠顺序。
