1. CSS简介
- CSS(Cascading Style Sheets)层叠样式表，又叫级联样式表，简称样式表，文件后缀名为.css，用于HTML文档中元素样式的定义。
- CSS语法：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
color: yellowgreen;
font-size: 30px;
}
</style>
</head>
<body>
<h1>这是一个h1标题</h1>
</body>
</html>
2. CSS的引入样式
3. 选择器
3.1 全局选择器
可以与任何元素匹配，优先级最低，一般做样式初始化。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h1>这是一个h1标题</h1>
</body>
</html>
3.2 元素选择器
HTML文档中的元素，p、b、div、a、img、body等所有的标签，选择的使页面上所有这种类型的标签。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
font-size: 40px;
}
span{
color:red;
}
</style>
</head>
<body>
<h1>这是一个h1<span>标题</span></h1>
</body>
</html>
3.3 类选择器
用 . 来定义，针对想要的所有标签使用
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.title1{
font-size: 40px;
}
.title1{
color:red;
}
</style>
</head>
<body>
<h1 class="title1">这是一个h1<span>标题</span></h1>
</body>
</html>
3.4 ID选择器
以 # 来定义，针对某一个特定的标签来使用，只能使用一次，ID名称不可重复。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#mytitle{
font-size: 35px;
}
#mytitle{
color:blueviolet;
}
</style>
</head>
<body>
<h1 id="mytitle">这是一个h1<span>标题</span></h1>
</body>
</html>
3.5 合并选择器
提取共同的样式，减少重复代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1,div{
color:#856;
}
</style>
</head>
<body>
<h1 class="header">这是一个h1<span>标题</span></h1>
<div class="text">这是一段文本...</div>
</body>
</html>
3.6 选择器的优先级
4.背景属性
CSS背景属性：
- 设置背景颜色：通过background-color实现
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
background-color: palevioletred;
}
</style>
</head>
<body>
<h1 class="header">这是一个h1<span>标题</span></h1>
<div class="box">这是一段文本... </div>
</body>
</html>
- 设置背景图片：通过background-image实现
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 300px;
height: 480px;
background-image: url(1.jpg);
}
</style>
</head>
<body>
<h1 class="header">这是一个h1<span>标题</span></h1>
<div class="box">这是一段文本... </div>
</body>
</html>
- 设置如何平铺背景图像：通过background-repeat实现。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 2010px;
height: 1480px;
background-image: url(1.jpg);
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1 class="header">这是一个h1<span>标题</span></h1>
<div class="box">这是一段文本... </div>
</body>
</html>
- 设置背景图像的大小：通过background-size实现
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 2010px;
height: 1480px;
background-image: url(1.jpg);
background-repeat: repeat-x;
background-size: cover;
}
</style>
</head>
<body>
<h1 class="header">这是一个h1<span>标题</span></h1>
<div class="box">这是一段文本... </div>
</body>
</html>
5. 文本属性
- 指定元素文本的水平对齐方式：通过text-align实现
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
text-align: center;
}
</style>
</head>
<body>
<h1 class="header">这是一个h1<span>标题</span></h1>
<div class="box">这是一段文本... </div>
</body>
</html>
- 设置添加到文本的修饰，通过text-decoration实现
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
text-decoration: overline;
}
</style>
</head>
<body>
<h1 class="header">这是一个h1<span>标题</span></h1>
<div class="box">这是一段文本... </div>
</body>
</html>
- 控制文本的大小写：通过text-transform实现
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
text-transform: capitalize;
}
</style>
</head>
<body>
<h1 class="header">这是一个h1<span>标题</span>apple,banana</h1>
<div class="box">这是一段文本... </div>
</body>
</html>
- 设置文本块中首行文本的缩进：通过text-indent实现
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
text-indent: 60px;
}
</style>
</head>
<body>
<h1 class="header">这是一个h1<span>标题</span>apple,banana</h1>
<div class="box">这是一段文本... </div>
</body>
</html>
6. 表格属性
- 设置表格边框：通过border实现
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table,td{
border: 2px solid plum;
}
</style>
</head>
<body>
<table>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
</body>
</html>
- 设置表格的边框是否被折叠成一个单一的边框或隔开：通过border-collapse实现
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table,td{
border: 2px solid plum;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
</body>
</html>
- 设置表格的宽度和高度：通过weith和height实现
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table,td{
border: 2px solid plum;
}
table{
width: 500px;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
</body>
</html>
- 设置表格文字对齐方式：通过text-align实现
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table,td{
border: 2px solid plum;
}
table{
width: 500px;
border-collapse: collapse;
}
td{
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
</body>
</html>
- 设置表格线和文字之间的间隙：通过padding实现
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table,td{
border: 2px solid plum;
border-collapse: collapse;
}
td{
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<table>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
</body>
</html>
- 设置表格的颜色：通过background-color来实现
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table,td{
border: 2px solid plum;
border-collapse: collapse;
}
td{
text-align: center;
padding: 20px;
background-color: aqua;
}
</style>
</head>
<body>
<table>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
</body>
</html>
7. 关系选择器
- 后代选择器：
选择所有被E元素包含的F元素，中间用空格隔开： E F{}。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li{
color: aqua;
}
</style>
</head>
<body>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
</body>
</html>
- 子代选择器：
选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示。
E>F{}。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul>li{
color: aqua;
}
</style>
</head>
<body>
<ul>
<li>水果
<div>苹果</div>
</li>
<div>饮料
<div>可乐</div>
</div>
</ul>
</body>
</html>
- 相邻兄弟选择器
选择紧跟E元素后面的F元素，用加号表示，E+F{}。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2+p{
color:red;
}
</style>
</head>
<body>
<h2>h2标题</h2>
<p>段落1</p>
<p>段落2</p>
</body>
</html>
- 通用兄弟选择器
选择E元素之后的所有兄弟元素F，作用于多个元素
E~F{}。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2~p{
color:red;
}
</style>
</head>
<body>
<h2>h2标题</h2>
<p>段落1</p>
<p>段落2</p>
</body>
</html>
8. CSS盒子模型
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2{
width: 100px;
height: 100px;
background-color: aqua;
padding: 50px 10px;
border: 5px solid chartreuse;
margin: 30px;
}
</style>
</head>
<body>
<h2>h2标题</h2>
<p>段落1</p>
<p>段落2</p>
</body>
</html>
9. 文档流
标准流有诸多限制：
- 高矮不齐，底边对齐
- 空白折叠
- 无论多少个空格、换行、tab，都会折叠为一个空格
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span{
width: 50px;
height: 80px;
background-color: palevioletred;
}
img{
width: 100px;
height: 180px;
}
</style>
</head>
<body>
<span>这是一段文本</span>
<img src="1.jpg" alt="">
</body>
</html>
10. 浮动
浮动原理：
- 浮动以后使元素脱离了文档流
- 浮动只有左、右浮动
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
</ul>
</body>
</html>
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li{
float: left;
margin: 30px;;
}
</style>
</head>
<body>
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
</ul>
</body>
</html>
- 绝对定位
- 固定定位
11. 清除浮动
