层叠样式表（英语：Cascading Style Sheets，缩写：CSS；又称串样式列表、级联样式表、串接样式表、阶层式样式表）是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。CSS 被分为不同等级：CSS1 现已废弃， CSS2.1 是推荐标准， CSS3 分成多个小模块且正在标准化中。CSS3现在已被大部分现代浏览器支持，而下一版的CSS4还在开发中。
一、CSS(层叠样式表)的三种引入方式
1.内联样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
语法：内联样式（行内样式）在标签中加入一个style属性，CSS的样式作为属性值 多个属性值之间用;进行拼接
-->
<h1 style="color: deeppink;font-family: '微软雅黑';">这是一个h1标题</h1>
</body>
</html>
2.内部样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
语法：内部样式在head标签中加入一个style标签，在里面定位到你需要修饰的元素，然后在{}中加入你要修饰的样式。
-->
<style type="text/css">
h1{
color: red;
font-family: 宋体;
}
</style>
</head>
<body>
<h1>这是一个H1标题</h1>
</body>
</html>
3.外部样式
要创建一个css文件，css文件其的后缀.css
h1{
color: red;
font-family: 宋体;
}再创建html文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入外部CSS资源：使用link标签-->
<link rel="stylesheet" type="text/css" href="css/mystyle.css"/>
</head>
<body>
<h1>这是一个标题</h1>
</body>
</html>
注意：
开发中三种书写方式中外部样式表用的最多，因为这种方式真正做到了 元素页面和样式 分离，而样式表三种方式的优先级遵循：就近原则
二、CSS选择器
1.基本选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
1.元素选择器：根据元素的名字进行选择
获取页面上所有元素
*/
h1{
color: red;
font-family: "rockwell extra bold";
}
/*
2.类选择器 给元素指定class属性的值
特点：不同 类型的元素使用相同的样式
*/
.mycss{
color: #0000FF;
font-family: "ms reference specialty";
}
/* 3.id选择器 */
#myid{
color: yellow;
font-family: "bodoni mt black";
}
/*
优先级： id选择器>类选择器>元素选择器
*/
</style>
</head>
<body>
<h1>乾坤大挪移</h1>
<h1>乾坤大挪移</h1>
<h1>乾坤大挪移</h1>
<h1 class="mycss">乾坤大挪移</h1>
<h1>乾坤大挪移</h1>
<h1>乾坤大挪移</h1>
<h2 class="mycss">乾坤大挪移</h2>
<h2 id="myid" class="myh2" >乾坤大挪移</h2>
</body>
</html>
2.关系选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关系选择器</title>
<style type="text/css">
/* 1.后代选择器 */
div h1{
color: #FF0000;
}
/* 2.直接子代选择器 */
div>h1{
color: #0000FF;
}
</style>
</head>
<body>
<div>
<h1>马哥</h1>
<h1>马哥</h1>
<h1>马哥</h1>
<h1>马哥</h1>
<h1>马哥</h1>
<h1>马哥</h1>
<span>
<h1>马哥</h1>
<h1>马哥</h1>
<h1>马哥</h1>
</span>
</div>
</body>
</html>
3.属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style type="text/css">
input[type="text"]{
background-color: #0000FF;
}
input[type="text"][value="ya"]{
background-color: orange;
}
</style>
</head>
<body>
<form action="" method="post">
用户名：<input type="text" value="uname" /><br>
密码：<input type="password" value="pwd" /><br>
验证码：<input type="text" value="ya" /><br>
<input type="submit" value="登录按钮"/>
</form>
</body>
</html>
4.伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<style type="text/css">
/* 静止状态 */
a:link{
color: #FF0000;
}
/* 鼠标悬浮状态 */
a:hover{
color: #FFA500;
}
/* 触发状态 */
a:active{
color: #FFFF00;
}
/* 设置完成状态 */
a:visited{
color: cadetblue;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">点我呀</a>
</body>
</html>
注意：一般伪类选择器都用在超链接
三、浮动
1.什么是浮动
网页设计中对页面布局有两种方式，一种是浮动float，另一种就是定位position。
W3C将float划分在CSS定位属性中，对其的描述为：规定元素是否浮动。Float属性在实际运用过程中是将元素转变为浮动元素，通过属性值来确定元素浮动方向。Float有4个属性值，既：none、left、right和inherit。在CSS中，任何元素都可以利用float属性被设置为浮动状态，从而实现不同的页面效果。
在HTML文件中标准文档流排列方式遵循从上往下，从左至右，遇块（块级对象）换行的原则。为元素的float属性赋值后，该元素将从标准文档流中脱离出来，紧贴上级元素的左右边框，根据属性值进行左右浮动。而浮动元素所空出来的位置，会由下一个文档流顶上，靠着上一个文档流的底部，占距原来文档流的位置。Float属性区别于文字内容的左右对齐text-align样式，它只针对html标签设置靠左靠右浮动，且没有居中浮动的样式。
浮动设计的初衷是为了解决文字环绕图片问题，浮动后不会将文字挡住，这是设计初衷，不能违背的。CSS 的 Float（浮动）使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。说到脱离文档流要说一下什么是文档流，文档流是是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了
2.浮动的原理是什么？
下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“阻挡住了”：
3.CSS 中所有的浮动属性
"CSS" 列中的数字表示不同的 CSS 版本（CSS1 或 CSS2）定义了该属性。
属性 | 描述 | 值 | CSS |
clear | 指定不允许元素周围有浮动元素。 | left right both none inherit | 1 |
float | 指定一个盒子（元素）是否可以浮动。 | left right none inherit |
4.案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>布局</title>
<style type="text/css">
#div01{
float: left;
}
#div02{
float: left;
}
#div03{
float: left;
}
</style>
</head>
<body>
<div id="mydiv" style="background-color: aliceblue;">
<div id="div01" style="width: 100px;height: 100px;background-color: #5F9EA0;"></div>
<div id="div02" style="width: 200px;height: 200px;background-color: royalblue;"></div>
<div id="div03" style="width: 300px;height: 300px;background-color: red;"></div>
</div>
<div style="width: 1000px;height: 200px;background-color: darkmagenta; ">
</div>
</body>
</html>
5.清除浮动 -（使用 clear）
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>布局</title>
<style type="text/css">
#div01{
float: left;
}
#div02{
float: left;
}
#div03{
float: left;
}
</style>
</head>
<body>
<!-- 消除浮动影响方式1：给外层的设置overflow: hidden; -->
<!-- <div id="mydiv" style="background-color: aliceblue; overflow: hidden;">
<div id="div01" style="width: 100px;height: 100px;background-color: #5F9EA0;"></div>
<div id="div02" style="width: 200px;height: 200px;background-color: royalblue;"></div>
<div id="div03" style="width: 300px;height: 300px;background-color: red;"></div>
</div>
<div style="width: 1000px;height: 200px;background-color: darkmagenta;">
</div> -->
<!-- 消除浮动影响方式2：给外层的盒子设置高度 -->
<!-- <div id="mydiv" style="background-color: aliceblue; height: 300px;">
<div id="div01" style="width: 100px;height: 100px;background-color: #5F9EA0;"></div>
<div id="div02" style="width: 200px;height: 200px;background-color: royalblue;"></div>
<div id="div03" style="width: 300px;height: 300px;background-color: red;"></div>
</div>
<div style="width: 1000px;height: 200px;background-color: darkmagenta;">
</div> -->
<!-- 消除浮动影响方式3：给被影响的盒子设置属性-->
<div id="mydiv" style="background-color: aliceblue;">
<div id="div01" style="width: 100px;height: 100px;background-color: #5F9EA0;"></div>
<div id="div02" style="width: 200px;height: 200px;background-color: royalblue;"></div>
<div id="div03" style="width: 300px;height: 300px;background-color: red;"></div>
</div>
<div style="width: 1000px;height: 200px;background-color: darkmagenta; clear: both;">
</div>
</body>
</html>
四、CSS position 属性
1.定义和用法
position 属性规定元素的定位类型。
说明
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
默认值： | static |
继承性： | no |
版本： | CSS2 |
JavaScript 语法： | object.style.position="absolute" |
2.可选择的值
值 | 描述 |
absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
relative | 生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
inherit | 规定应该从父元素继承 position 属性的值。 |
3.静态定位（static）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--静态定位：
如果我们不写position属性的话，相当于默认效果就是静态定位。
静态效果：就是元素出现在它本该出现的位置。一般使用静态定位可以直接省略不写。
-->
<img src="img/1.png" style="position: static;"/>
</body>
</html>
4.相对定位（relative）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相对定位</title>
</head>
<body>
<!--
相对定位：相对元素自身所在的原来的位置进行定位
可以设置 left right top bottom四个属性
效果：在进行相对定位以后，元素原来所在的位置被保留了，保留占位其他元素的位置不会发生移动
一般情况下，left和right不会同时使用，top和bottom不会同时使用，选择一个方向即可，
优先级：左上>右下
z-index 用来设置堆叠顺序，设置元素谁上谁下，那个值大，那个元素在上
注意：z-index属性要设置在定位的元素之上
-->
<div style="background-color: #5F9EA0;">
<div style="width: 100px;height: 100px;background-color: antiquewhite;position: relative;z-index: 10px;"></div>
<div style="width: 100px;height: 100px;background-color: darkgoldenrod;position: relative; left: 10px; bottom: 30px;z-index: 15px;"></div>
<div style="width: 100px;height: 100px;background-color: darkmagenta;"></div>
</div>
</body>
</html>
相对定位的应用场合：
（1）元素在较小范围内移动的时候
（2）结合绝对定位一起配合使用
5.绝对定位：（absolute）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位</title>
<style type="text/css">
#mydiv{
background-color: #5F9EA0;
height: 500px;
margin-left: 300px; /* 左边距 */
position: relative;
}
/* 如果只是给其中的一个div设置绝对定位，它是相对整个页面而言进行定位的，
如果要相对当前父级元素定位，则需要在父级元素中设置position: relative
一般情况绝对定位都是在父级配合相对定位使用
*/
#div01{
background-color: antiquewhite;
width: 100px;
height: 100px;
position: absolute; /* 绝对定位 */
left: 30px;
top: 50px;
}
#div02{
background-color: aquamarine;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="mydiv">
<div id="div01"></div>
<div id="div02"></div>
</div>
</body>
</html>
5.固定定位（fixed）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>固定定位</title>
<style type="text/css">
#mydiv{
height: 300px;
width: 50;
background-color: cornflowerblue;
/* 固定定位 */
position: fixed;
right: 30px;
top: 60px;
}
</style>
</head>
<body>
<div id="mydiv">
<ul>
<li>京东秒杀</li>
<li>京东秒杀</li>
<li>京东秒杀</li>
<li>京东秒杀</li>
<li>京东秒杀</li>
</ul>
</div>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
<p>helloworld</p>
</body>
</html>
五、盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
不同部分的说明：
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style type="text/css">
#boxid{
width: 100px;
height: 100px;
background-color: #5F9EA0;
margin: 20px;
border: 5px;
padding: 10px;
}
</style>
</head>
<body>
<div id="boxid">
念去去暮霭程程楚天阔
</div>
</body>
</html>
