CSS 是“Cascading Style Sheet”的缩写，中文意思为“层叠样式表”，用于描述网页的表现形式。如网页元素的位置、大小、颜色等。css的主要作用是定义网页的样式。
CSS样式
1. 行内样式
行内样式：直接定义在
HTML标签的style属性中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--行内样式-->
<p style="color: green;">段落</p>
<p style="color: blueviolet;">段落</p>
<p style="color: plum;">段落</p>
</body>
</html>
2. 内嵌样式
在
HTML头部（<head>标签内）的<style>标签中定义CSS样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: black;
color: blue;
}
</style>
</head>
<body>
<div>
<p>第一段落</p>
<p>第二段落</p>
<span>一个span标签</span>
</div>
</body>
</html>
3. 外部样式
将
CSS样式定义在一个.css格式的文件中，然后使用 HTML 的<link>标签将这个.css格式的样式文件应用到HTML文档中。
css文件
div{
background: aquamarine;
}
p{
color: red;
background: black;
}
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="d1.css">
</head>
<body>
<div>
<p>这是第一段落</p>
<p>这是第二段落</p>
<span>这是一个span标签</span>
</div>
</body>
</html>
样式优先级
行内样式 > 内嵌样式 > 外部样式 注意：尽量不要在同一个Html文件中使用多种样式
- 如果样式是固定并且不修改并且很少情况，使用内部样式
- 如果样式针对当前
html页面做的样式，并且代码量不是很大的的情况下， 使用内联样式 - 如果样式是通用，且
css代码很多，使用外部样式，需要创建一个css文件，引入。
CSS选择器
1. 通用选择器
通用选择器用星号
*表示，它不匹配某个特定的HTML元素，而是匹配HTML文档中的每个元素,开发中通常使用通用选择器来清除HTML元素中默认的内外边距
通用选择器格式：*{
}
* {
margin: 0 auto;
padding: 0;
}
2. 标签选择器
根据标签的名字 进行选择匹配
标签选择器格式：标签名{
}
p{
color: red
}
span{
color: blue
}
3. ID选择器/类选择器
根据标签的
ID属性或者class属性来匹配，ID选择器的定义需要用到#，后面紧跟ID属性值，类选择器的定义需要用到一个英文的句号.，后面紧跟class属性的值
ID选择器格式： #ID名{}
#d1{
background: aquamarine;
}
类选择器格式：.类名{}
.c1{
background: black;
}
<div>
<span id="d1">ID选择器</span>
<span class="c1">类选择器</span>
</div>
4. 层级选择器
- 后代选择器
- 子选择器
<div>
<span id="d1">ID选择器</span><br>
<span class="c1">类选择器</span><br>
<a href="#"><span>这是一个超链接</span></a>
<ul>
<li><span>这是第一项</span></li>
<li><span>这是第二项</span></li>
</ul>
</div>
span标签是div标签的后代标签，a标签也是div的后代标签
后代选择器的格式： 父标签名 子标签名{} 通过父标签去定位找到子标签 能够匹配到div下面所有符合条件的标签
子代选择器的格式： 父标签 > 子标签{} 通过父标签去定位找到子标签 能够匹配到div下直系的子标签
后代选择器使用
div span{
color: red
}
子代选择器使用
div > span{
background: black;
}
5. 组合选择器
组合选择器可以将同样的样式应用到多个选择器中，每个选择器中用逗号隔开
<div>
<span id="d1">ID选择器</span><br>
<span class="c1">类选择器</span><br>
<a href="#"><span>这是一个超链接</span></a>
<ul>
<li><span>这是第一项</span></li>
<li><span>这是第二项</span></li>
</ul>
</div>
样式代码
span,a{
color:red
} /* 该样式将会运用在所有的span标签和a标签中 */
#d1,.c1{
color:blue
} /* 该样式将会运用在所有id属性为d1,class属性为c1的标签中 */
6、伪类选择器
伪类选择器是一种特殊的选择器，可以用来选择处于特定状态的元素，例如未被访问的链接、已被访问的链接、鼠标悬停在上面的元素、活动元素和获得焦点的表单元素等
:link伪类选择器：选择所有未被访问的链接。:visited伪类选择器：选择所有已被访问的链接。:hover伪类选择器：选择鼠标悬停在上面的元素。:active伪类选择器：选择活动元素，即鼠标按下未弹起的元素。:focus伪类选择器：选择获得焦点的元素，一般是表单元素，如<input>类。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span:hover{
color: red;
}
a:link{
color: red;
}
a:active{
color: blue;
}
a:visited{
color: yellow;
}
a{
font-size: larger;
}
</style>
</head>
<body>
<div class="f">
<div class="box1"><span>这是一个span标签</span></div>
<div class="box2"><a href="#">这是一个链接</a></div>
</div>
</body>
</html>
CSS盒子模型
盒子模型是网页设计中经常用到的一种思维模型，由四个部分构成，从内到外分别为内容区（
content）、内边距（padding）、边框（border）和外边距（margin），CSS为这四个部分提供了一系列相关属性，通过对这些属性的设置可以丰富盒子的表现效果。
盒子的组成
- 外边距：
margin - 内边距：
padding - 边框：
border - 内容：
content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
</style>
</head>
<body>
<h2>盒子模型演示</h2>
<p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>
<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div>
</body>
</html>
1. margin
- 盒子的外边距，是透明的 只能设置他的边距
margin包含了上下左右四条边，开发者可以单独设置每一条边的边距。
margin-top：上边距
margin-buttom：下边距
margin-left：左边距
margin-right：右边距
2. padding
- 盒子的内边距
- 与外边距不同，
padding不是只能完全透明的，可以设置背景颜色和图片。 - 与
margin类似，padding包含了上下左右四条边，开发者可以单独设置每一条边的边距。
padding-top：上部填充
padding-bottom：下部填充
padding-left：左部填充
padding-right：右部填充
3.border
border表示盒子的边界，它可以设置成可见的，样式多样的。border像margin和padding一样可以分别对每一条边进行设置。
border-top：上边界
border-bottom：下边界
border-left：左边界
border-right：右边界
浮动
浮动可以使一个元素脱离自己原本的位置，并在父元素的内容区中向左或向右移动，直到碰到父元素内容区的边界或者其它浮动元素为止
float属性有三个可选值，如下表所示：
| 值 | 描述 |
|---|---|
left |
元素向左浮动 |
right |
元素向右浮动 |
none |
默认值，元素不浮动 |
当父元素未设置高度时，父元素的高度会取决于子元素的高度。当子元素设置浮动后，会脱离文档流，造成子元素的内容在父元素外出现，这种情况下，父元素的高度可能会塌陷到0
<!DOCTYPE html>
<html>
<head>
<style>
.box{
border: 2px solid red;
height: 400px;
width: 312px;
}
.div1{
height: 100px;
width: 100px;
float: left;
border: 2px solid yellow;
}
.div2{
float: left;
height: 100px;
width: 100px;
border: 2px solid blue;
}
.div3{
height: 100px;
width: 100px;
float: left;
border: 2px solid black;
}
</style>
</head>
<body>
<div class="box">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</div>
</body>
</html>
清除浮动
元素浮动之后，会对周围的元素造成一定的影响，为了消除这种影响您可以使用 clear 属性来清除浮动，属性的可选值如下：
| 值 | 描述 |
|---|---|
left |
左侧不允许浮动元素 |
right |
右侧不允许浮动元素 |
both |
左右两侧均不允许浮动元素 |
定位
CSS中的position属性用来设置元素在页面中的位置，通过该属性您可以把任何属性放置在任何您认为合适的位置。position常用的属性值有relative,absolute,fixed
| 属性名 | 描述 |
|---|---|
position: relative |
相对定位，即相对于元素的正常位置进行定位，不会对其他元素造成影响 |
position: absolute |
绝对定位，相对于第一个带有定位属性的父元素进行定位 默认是浏览器 |
position: fixed |
固定定位，相对于浏览器的创建进行定位 |
相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1{
width: 100px;
height: 100px;
background-color: black;
opacity: 0.5; /*透明度*/
position: relative;
left: 150px;
top: 150px;
}
.box2{
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1{
width: 100px;
height: 100px;
background-color: black;
opacity: 0.5;
/*绝对定位 不会保留原来的位*/
position: absolute;
left: 150px;
top: 150px;
}
.box2{
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
