前端基础——CSS样式
一. CSS 定义二. CSS 优点三. CSS 样式表分类四. HTML如何使用 CSS1. 内联样式（在 HTML 标签中使用）2. 内部样式表（位于 head 标签内部）3. 外部样式表3.1 link 引入3.2 import 引入
五. 选择器1. 全局选择器（*）2. 标签元素选择器3. id 选择器4. class（类）选择器5. 选择器分组6. 后代选择器7. 子元素选择器8. 伪类选择器
六. 盒子模型1. 内边距（padding）2. 边框（border）3. 外边距（margin）
七. 定位1. static2. relative3. absolute4. fixed
一. CSS 定义
CSS 指层叠样式表 (Cascading Style Sheets)。所有的主流浏览器都支持层叠样式表。
二. CSS 优点
使页面结构表现分离，极大地提高了工作效率。
三. CSS 样式表分类
内联样式（在 HTML 标签中使用）内部样式表（位于 <head> 标签内部）外部样式表
内联样式拥有最高的优先权，其次为内部样式表，最后为外部样式表。
四. HTML如何使用 CSS
1. 内联样式（在 HTML 标签中使用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
</head>
<body>
<p style="color:red;">p标签
</p>
</body>
</html>
2. 内部样式表（位于 head 标签内部）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<style type="text/css">
<!--此处为css样式-->
</style>
</head>
<body>
</body>
</html>
3. 外部样式表
3.1 link 引入
此种方法使用频率最高，也是最常使用的方法，让结构与表现分离。
<link type=
"text/css" rel=
"stylesheet" href=
"外部 CSS 样式文件资源地址">
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<link type="text/css" rel="stylesheet" href="Two.css">
</head>
<body>
<p>p标签
</p>
</body>
</html>
3.2 import 引入
这种方法导入方式和 <link/> 方式功能一样，就是语法不同，在 <style> 和 </style> 之间使用。 此种方法import结尾必须加 “；”。
@import "";<style type=
"text/css">
@import "外部 CSS 样式文件资源地址";
</style>
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<style type="text/css">
@import "Two.css";
</style>
</head>
<body>
<p>p标签
</p>
</body>
</html>
@import url("");<style type=
"text/css">
@import url("外部 CSS 样式文件资源地址");
</style>
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<style type="text/css">
@import url("Two.css");
</style>
</head>
<body>
<p>p标签
</p>
</body>
</html>
五. 选择器
1. 全局选择器（*）
*{}作用于全局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.info{
color: red;
}
</style>
</head>
<body>
<p class="info">这是一个段落标签！
</p>
<strong class="info">这是一个加粗标签！
</strong>
</body>
</html>
2. 标签元素选择器
通过作用标签名进行设置。如 p、h1、em、a，甚至可以是 html 本身。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<style type="text/css">
html{
background-color: midnightblue;
}
p{
color:white;
}
</style>
</head>
<body>
<p>这是一个段落标签！
</p>
</body>
</html>
3. id 选择器
通过 id 属性的值进行设置。id 选择器具有唯一值，相同的 id 属性的值不可重复。对应 #
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<style type="text/css">
#info{
color: red;
}
</style>
</head>
<body>
<p id="info">这是一个段落标签！
</p>
</body>
</html>
4. class（类）选择器
通过class属性的值进行设置可以多个class属性值相同，开头不能用数字。对应 .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<style type="text/css">
.info{
color: red;
}
</style>
</head>
<body>
<p class="info">这是一个段落标签！
</p>
<strong class="info">这是一个加粗标签！
</strong>
</body>
</html>
5. 选择器分组
可以将任意多个选择器分组在一起，对此没有任何限制。设置多个标签为相同样式，可以用到使用此选择器。多个标签之间用逗号分隔。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.info,strong{
color: red;
}
</style>
</head>
<body>
<p class="info">这是一个段落标签！
</p>
<strong>这是一个加粗标签！
</strong>
</body>
</html>
6. 后代选择器
又称为包含选择器。后代选择器可以选择作为某元素后代的元素。可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<style type="text/css">
#ul li{
color:red;
}
</style>
</head>
<body>
<ol id="ul">
<li>一组
<ul>
<li>一组一列
</li>
</ul>
</li>
<li>二组
</li>
</ol>
</body>
</html>
7. 子元素选择器
与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素。子选择器使用了大于号（>)作为子结合符。子结合符两边可以有空白符。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<style type="text/css">
h1 > strong{
color:red;
}
</style>
</head>
<body>
<h1>holle
<strong>world
</strong> !
</h1>
</body>
</html>
8. 伪类选择器
:link 未访问的状态:visited 已访问的状态:hover 鼠标经过的状态:active 选定的状态，鼠标点击的一瞬间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<style type="text/css">
a:link {
color: black;
}
a:visited{
color: red;
}
a:hover{
color: blue;
}
a:active{
color:yellow;
}
</style>
</head>
<body>
<a href="#">跳转
</a>
</body>
</html>
a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。a:active 必须被置于 a:hover 之后，才是有效的。伪类名称对大小写不敏感。
六. 盒子模型
元素框的最内部分是实际的内容，直接包围内容的是内边距，内边距的边缘是边框，边框以外是外边距。盒子模型规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。一个盒子中主要的属性有五个： width：内容的宽度 height：内容的高度 padding：内边距 border：边框 margin：外边距
1. 内边距（padding）
定义元素边框与元素内容之间的空白区域。padding 属性接受长度值或百分比值，但不允许使用负值。有四个单独的属性，分别设置上、右、下、左内边距： padding-top：上内边距 padding-right：右内边距 padding-bottom：下内边距 padding-left：左内边距可以同时设置上、右、下、左内边距： (1). padding:10px; 上、右、下、左内边距都是10px (2). padding:10px 20px; 上、下内边距为10px，左、右内边距为20px (2). padding:10px 20px 30px; 上内边距为10px，左、右内边距为20px，下内边距为30px (2). padding:10px 20px 30px 40px; 上内边距为10px，右内边距为20px，下内边距为30px，左内边距为40px 顺序：上 - 右 - 下 - 左
2. 边框（border）
边框是围绕元素内容和内边距的一条或多条线。border 属性允许你规定元素边框的样式、宽度和颜色。每个边框有 3 个方面：宽度、样式，以及颜色。样式： (1).定义单边样式 border-top-style：上边框样式 border-right-style：右边框样式 border-bottom-style：下边框样式 border-left-style：左边框样式 (2),同时定义多边样式：
border-style: solid dotted dashed double
;
宽度 (1).定义单边宽度 border-top-width：上边框宽度 border-right-width：右边框宽度 border-bottom-width：下边框宽度 border-left-width：左边框宽度 (2),同时定义多边宽度：
border-width: 10px 5px 15px 5px
;
颜色 (1).定义单边宽度 border-top-color：上边框颜色 border-right-color：右边框颜色 border-bottom-color：下边框颜色 border-left-color：左边框颜色 (2),同时定义多边颜色：
border-color: 10px 5px 15px 5px
;
同时边框宽度、样式，以及颜色 (1).定义单边宽度、样式，以及颜色 border-top:1px solid blue;：上边框宽度为1px,样式为实线，颜色为蓝色 border-right:1px solid blue;：右边框宽度为1px,样式为实线，颜色为蓝色 border-bottom:1px solid blue;：下边框宽度为1px,样式为实线，颜色为蓝色 border-left:1px solid blue;：左边框宽度为1px,样式为实线，颜色为蓝色 (2),同时定义多边颜色：
border: 1px solid blue
;
3. 外边距（margin）
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。有四个单独的属性，分别设置上、右、下、左外边距： margin-top：上外边距 margin-right：右外边距 margin-bottom：下外边距 margin-left：左外边距可以同时设置上、右、下、左外边距： (1). margin:10px; 上、右、下、左外边距都是10px (2). margin:10px 20px; 上、下外边距为10px，左、右外边距为20px (2). margin:10px 20px 30px; 上外边距为10px，左、右外边距为20px，下外边距为30px (2). margin:10px 20px 30px 40px; 上外边距为10px，右外边距为20px，下外边距为30px，左外边距为40px
七. 定位
使用 position 属性，可以选择 4 种不同类型的定位，将会影响元素框生成的方式。position 属性值的含义：
1. static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
2. relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
3. absolute
(1). 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 (2). 可以覆盖页面上的其他元素。 (3). 可以设置z-index属性控制层叠顺序。
4. fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
