1 定义
CSS Cascading Style Sheets层叠样式表，定义如何显示HTML元素（长宽高、颜色、间距、背景等展示效果）
2 基本语法
p {//选择器
color: red;//属性：值
font-size: 14px;//属性：值
}
选择器：声明哪个元素采用这个样式表，选择器可以是标签、class、id和属性
属性：样式属性
值：属性对应的值
3 选择器分类
3.1 上下文选择器（派生选择器）
通过依据元素在其位置的上下文关系来定义样式。
分类：
后代选择器
tr td { color: pink;}
子元素选择器
a>img { width:200px;}
相邻兄弟选择器
h1+p { padding: 5px;}
3.2 类选择器
类选择器用于描述一组元素的样式，在标签中声明class属性，通过选择class属性来声明样式表的适用范围。
多个标签可以共用一个class值。一个标签的class属性也可以有多个值。
使用class属性作为选择器，需要在class的值前面加点号.
示例：
<p class="c1" >hello </p>
<p class="c1 c2 c3" >world!!!</p>
.c1 {
font-size: 20px;
}
3.3 ID选择器
id选择器可以为标有特定id的HTML元素指定样式；
每一个标签的id属性值必须是唯一的；
使用id选择器，需要在id属性值前面加#号；
示例：
<p id="i1">你好</p>
#i1{
font-size: 30px;
font-weight: 10;
color: #008000;
}
3.4 属性选择器
对带有指定属性的HTML元素设定样式；
主要应用在表单元素中；
示例：
input[type=text]{//input标签中的文本框
color: red;
}
4 引入样式
4.1 内联样式
<p style="padding: 10px;">内联样式</p>
4.2 内部样式表
<head>
<!-- 内部样式表 -->
<style>
p {
font-family: '宋体';
font-size: 50px;
color: red;
}
</style>
</head>
4.3 外部样式表（CSS文件）
<head>
<!-- 引入外部样式表：css文件 -->
<link rel="stylesheet" type="text/css" href="../../css/main.css" />
</head>
4.4 样式加载优先级
样式级别由高到低：
内嵌样式 > 内部样式表 > css文件（外部样式表）
如果有相同的样式属性，优先加载级别更高的样式
5 CSS盒子模型
如果把一个H5元素看成一个盒子，则盒子的全部组成如下图所示：
外边距：元素与其他元素之间的距离；
内边距：元素边框与内容之间的距离；
内容：标签中包含的文本、图片等；
5.1 外边距margin
| margin |
设置所有(上下左右)外边距的属性 |
margin: 10px; |
| margin-top |
设置元素的上外边距 |
|
| margin-bottom |
设置元素的下外边距 |
|
| margin-left |
设置元素的左外边距 |
|
| margin-right |
设置元素的右外边距 |
margin缩写用法:
同样适用于padding;
从上边距开始，顺时针旋转设置(上右下左)；
margin: 25px 50px 75px 100px;
上边距25px
右边距50px
下边距75px
左边距100px
margin: 25px 50px 75px;
上边距25px
左右边距50px
下边距75px
margin: 25px 50px;
上下边距25px
左右边距50px
margin: 25px;
所有边距25px
5.2 边框border
| border |
设置整个边框的属性 |
border: 1px solid #FFO; border: 粗细 边框类型 颜色 solid实线 dashed虚线 |
| border-width |
设置边框宽度（粗细） |
border-width: 1px; |
| border-color |
设置边框颜色 |
|
| border-style |
边框样式（虚线、实线） |
border-style: dashed/solid |
| border-top |
设置上边框样式 |
border-top: 1px solid #FFO; |
| border-top-width |
设置上边框宽度 |
|
| border-top-color |
设置上边框颜色 |
|
| border-top-style |
设置上边框样式 |
5.3 文本样式
| font |
设置所有的字体属性 |
|
| font-family |
设置字体 |
|
| font-size |
设置字体大小 |
|
| font-style |
设置字体样式 |
normal正常的字体(默认字体样式，可用于去掉html i斜体标签默认斜体样式) italic斜体。对于没有斜体变量的特殊字体，将应用oblique oblique倾斜的字体 |
| font-weight |
设置字体粗细 |
font-weight: normal/bold/300; |
示例：
.title{
font: italic bold 12px/30px Georgia, serif;
//斜体 加粗 字体大小 字体名称
}
6 背景设置
| background |
设置背景全部属性 |
|
| background-attachment |
背景图像是否固定或随页面的其余部分滚动 |
background-attachment:fixed; |
| background-color |
背景色 |
background-color:#FF0; |
| background-size |
背景图尺寸 |
background-size: 100%; |
| background-image |
设置背景图 |
background-image:url(../img/bg.jpg); |
| background-position |
设置背景图的起始位置 |
空格分隔X轴和Y轴坐标 background-position: top center; background-position:-24px 210px; |
| backgrount-repeat |
设置背景图像是否重复 |
background-repeat: no-repeat; |
7 CSS定位
7.1 position属性定位
| 值 |
描述 |
| fixed 固定定位 |
参照物：浏览器 脱离DOM流，不占据空间 常用作漂浮广告，返回顶部等特效样式 这种定位方式是相对于整个文档的，只需设置它相对于各个方向的偏移值，就可以将该元素固定在页面固定的位置； |
| relative 相对定位 |
参照物：自身 存在DOM流中，占据原先的空间 该定位可以通过设置top/bottom/left/right等值，使得指定元素相对其正常的位置进行偏移，这种定位不脱离文档流 |
| static 静态定位 |
HTML元素的默认值，没有定位，元素出现在正常的流中； 也就是按照文档的书写布局自动分配在一个合适的地方； 这种定位方式用margin来改变位置，对top/bottom/left/right/z-index等设置值无效，这种定位不脱离文档流； |
| absolute 绝对定位 |
参照物：最近的已定位（fixed/relative/absolute）祖先元素 如果没有已定位的祖先元素，那么他的位置相对于<html>或<body> 脱离DOM流，不占据空间 这种定位通过top/right/bottom/left等属性设置偏移值 |
示例：
<style type="text/css">
h2{
position: absolute;
left:100px;
top:150px
}
</style>
<body>
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
</body>
7.2 overflow属性
overflow 属性规定当内容溢出元素框时发生的事情
| 值 |
描述 |
示例 |
| visible |
默认值，内容不会被修剪，会呈现在元素框之外 |
|
| hidden |
内容会被修剪，并且其余内容是不可见的 |
overflow: hidden; |
| scroll |
内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容 |
overflow: scroll; |
| auto |
如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 |
|
| inherit |
继承父类元素的overflow属性值 |
示例：
<style type="text/css">
div {
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll;
}
</style>
<body>
<p>
如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。
</p>
<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
</div>
</body>
7.3 z-index属性
- z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面或后面）
- 值越大，越靠前
- 没有指定z-index，后面的元素压住前面的元素
| 值 |
描述 |
示例 |
| number |
根据数字确定堆叠顺序，值越大，越靠前 |
z-index: 999; |
| auto |
overflow: auto; |
|
| inherit |
继承父元素的z-index属性值 |
overflow: inherit; |
7.4 top/bottom/left/right属性
定位一个元素的上外边距与其包含块上边框之间的偏移量。
top: 10%; //元素向下移动10%
left: -10px; //元素向左移动10像素
8 CSS显示
8.1 display属性
| 值 |
描述 |
| none |
此元素不会被显示 |
| block |
此元素将显示为块级元素，此元素前后会带有换行符 |
| inline |
默认值，此元素会被显示为内联元素 |
| inline-block |
行内块元素 |
| table |
此元素会作为块级表格来显示（类似table标签），表格前后带有换行符 |
| table-row |
此元素会作为一个表格行显示（类似tr） |
| table-cell |
此元素会作为一个表格单元格显示（类似td和th） |
| inherit |
继承父元素的display属性的值 |
8.2 visibility属性
| 值 |
描述 |
| visible |
默认值，元素是可见的 |
| hidden |
元素不可见，但是原有的位置还存在 |
| collapse |
在表格元素中使用，此值可以删除一行或一列，但是不会影响表格布局； 被行和列占据的空间会留给其他内容使用； 此值在其他元素中使用，等效于hidden； |
| inherit |
继承父元素的visibility属性的值 |
9 CSS伪类
伪类用于定义元素的特殊状态。（也叫触发事件）
例如，它可以用于：
- 设置鼠标悬停在元素上时的样式
- 为已访问和未访问链接设置不同的样式
- 设置元素获得焦点时的样式
| :link |
选择未访问的链接时 |
a:link |
| :visited |
选择访问过的链接时 |
a:visited |
| :hover |
鼠标悬停状态（鼠标悬停事件） |
a:hover |
| :active |
选择正在活动的链接时 |
|
| :focus |
获得焦点时的状态（获得焦点事件） |
input:focus |
| :first-letter |
选择每个p标签的首字母 |
p:first-letter |
| :first-line |
选择每个p标签的第一行 |
|
| ::before |
在每个p标签之前插入内容 |
p::before{ content: "hi "; } |
| ::after |
在每个p标签之后插入内容 |
|
| :lang(language_code) |
为元素的lang属性选择一个初始值 |
p:lang(en) |
示例：当鼠标放在图片上悬停时，修改图片尺寸
img:hover{
width: 200px;
height: 200px;
}
<img src="../../img/icon.jpg" width="100px" height="100px" />
HTML的lang属性可用于声明网页或部分网页的语言。这对搜索引擎和浏览器是有帮助的；
示例：
<html lang="en"></html>
<p lang="zh"></p>
| ISO 639-1 语言代码 | |
| en |
英语 |
| zh |
中文简体/繁体 |
| fr |
法语 |
| it |
意大利语 |
| ja |
日语 |
| ko |
朝鲜语/韩语 |
| ru |
俄语 |
10 CSS浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框（父级框元素）或另一个浮动框为止。
如果元素设置了浮动，后面紧邻的元素则会受到浮动的影响，若要不受影响，则要在后面清除浮动（可用clear:both;等方法），在两个相邻元素设置相同浮动的情况下，两元素将按顺序相邻摆放。这种定位使得元素脱离DOM文档流。
如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。
| 属性 |
描述 |
值 |
| clear |
指定不允许元素的哪一侧有浮动元素 |
left right both 两边 none inherit |
| float |
指定一个盒子（元素）是否浮动 |
left right none inherit继承父元素 |
示例：
<html>
<head>
<style>
div{
border: 0px solid #000000;
width: 100px;
height: 100px;
margin: 5px;
color: white;
}
</style>
</head>
<body>
<div style="float: left; background-color: black;">1</div>
<div style="float: left; background-color: red;">2</div>
<div style="float: left; background-color: blue;">3</div>
</body>
</html>