文章目录
- 1.引入的方式
- 1.1作为HTML的标签属性
- 1.2style标签
- 1.3link标签外部引入css文件
- 2.基础选择器
- 2.1标签选择器
- 2.2类选择器
- 2.3id选择器
- 2.4通配符选择器
- 3.复合选择器
- 3.1后代选择器
- 3.2子选择器
- 3.3并集选择器
- 3.4伪类选择器
- 4.设置样式
- 4.1字体
- 4.2文本
- 4.3背景
- 4.4圆角
- 5.显示模式
- 6.盒模型
- 7.页面布局（弹性布局）
1.引入的方式
1.1作为HTML的标签属性
针对单个元素，无法针对多个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="height: 50px; background-color: coral;"></div>
</body>
</html>
1.2style标签
可以针对多个元素，但是比较耦合，因为是在HTML代码中写CSS代码
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div {
height: 50px;
background-color: aqua;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
1.3link标签外部引入css文件
推荐的写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="3.css">
</head>
<body>
<div></div>
</body>
</html>
/* 3.css */
div {
height: 50px;
background-color: aqua;
}
2.基础选择器
2.1标签选择器
选择某个标签的所有元素，不能差异性选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2 {
color: red;
}
p {
color: aqua;
}
</style>
</head>
<body>
<h2>1</h2>
<p>11111</p>
<h2>2</h2>
<p>22222</p>
<h2>3</h2>
<p>33333</p>
</body>
</html>
2.2类选择器
（1）可以为任意的HTML标签设置class，这样一个class就可以绑定多个元素，选择某个类就可以为该类的元素设置样式
（2）通过.+类名来选择类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.red {
color: red;
}
</style>
</head>
<body>
<h2 class="red">1</h2>
<p>11111</p>
<h2 class="red">2</h2>
<p>22222</p>
<h2>3</h2>
<p>33333</p>
</body>
</html>
2.3id选择器
（1）HTML元素，可以设置id，但是必须全局唯一
（2）通#+id的值来选择某个id的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#red {
color: red;
}
</style>
</head>
<body>
<h2 id="red">1</h2>
<p>11111</p>
<h2>2</h2>
<p>22222</p>
<h2>3</h2>
<p>33333</p>
</body>
</html>
2.4通配符选择器
所有的元素都会被匹配上，特殊情况下才使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
color: red;
}
</style>
</head>
<body>
<h2>1</h2>
<p>11111</p>
<h2>2</h2>
<p>22222</p>
<h2>3</h2>
<p>33333</p>
</body>
</html>
3.复合选择器
3.1后代选择器
（1）选择的可以是儿子，也可以是孙子
（2）语法：基础选择器1 基础选择器2{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li{
color: red;
}
</style>
</head>
<body>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<ol>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li a {
color: red;
}
</style>
</head>
<body>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc<br><a>会变色</a></li>
</ul>
<ol>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
</ol>
</body>
</html>
3.2子选择器
（1）选择的只能是儿子
（2）语法：基础选择器1>基础选择器2{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.two>a {
color: red;
}
</style>
</head>
<body>
<div class="two">
<a href="#">链接1</a>
<p>
<a href="#">链接2</a>
</p>
</div>
</body>
</html>
3.3并集选择器
（1）多个选择器的并集
（2）选择器1，选择器2{}
（3）这里的选择器可以是基础选择器，也可以是复合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div,h3,ul li {
color: red;
}
</style>
</head>
<body>
<div>苹果</div>
<h3>香蕉</h3>
<ul>
<li>鸭梨</li>
<li>橙子</li>
</ul>
</body>
</html>
3.4伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 未被访问时候的样式 */
a:link {
color: black;
/* 去掉 a 标签的下划线 */
text-decoration: none;
}
/* 已经被访问后的样式 */
a:visited {
color: green;
}
/* 鼠标放上去的时候的样式 */
a:hover {
color: red;
}
/* 鼠标按下去未弹起来时候的样式 */
a:active {
color: blue;
}
/* 鼠标聚焦的时候的样式 */
.three>input:focus {
color: red;
}
</style>
</head>
<body>
<a href="#">小猫</a>
<div class="three">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</div>
</body>
</html>
4.设置样式
4.1字体
（1）字体系列：font-family，引号包裹，多个字体之间“，”间隔
（2）字体大小：font-size，值可以使用px（像素），也可以使用rem（字体的正常大小是1rem，如果设置成2rem就是把原来的字体放大2倍）
（3）字体粗细：font-weight，值的范围是100-900,400就是正常粗细，700就是粗体
（4）字体样式：font-style，值为italic就是设置倾斜字体，值为normal就是取消倾斜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.font-family .one {
/* 字体显示为隶书 */
font-family: '隶书','Microsoft YaHei';
/* 字体大小设置为30px */
font-size: 30px;
}
.font-family .two {
/* 字体显示为宋体 */
font-family: '宋体';
/* 字体大小设置为2rem（原来字体的2倍） */
font-size: 2rem;
/* 字体的粗细为400（正常粗细） */
font-weight: 400;
/* 字体样式为倾斜 */
font-style: italic;
}
.three {
/* 取消字体倾斜 */
font-style: normal;
}
</style>
</head>
<body>
<div class="font-family">
<div class="one">
这是隶书
</div>
<div class="two">
这是宋体
</div>
<em class="three">
这是倾斜字体
</em>
</div>
</body>
</html>
4.2文本
（1）文本对齐：text-algin，值为center就是居中对齐，值为left就是靠左，值为right就是靠右
（2）文本颜色：color，值可以是英文单词、16进制的数字、rgb(三个整数)（三原色写法）
（3）文本装饰：text-decoration，值为none表示什么都没有，一般用于a链接标签去除默认的下划线
（4）文本缩进：text-index，一般缩进为2个文字，值设置为2em
（5）行高：line-height，使用的最多的是将文本垂直居中（注意：文本所在的元素行高设置为该行元素高度）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
/* 通过rbg设置文本颜色 */
color: rgb(230, 17, 17);
}
.one {
/* 让文本左对齐 */
text-align: left;
/* 去除链接的下划线 */
text-decoration: none;
}
.two {
/* 让文本右对齐 */
text-align: right;
text-decoration: underline;
}
.three {
/* 让文本居中对齐 */
text-align: center;
/* 上划线 */
text-decoration: overline;
}
.four {
/* 下划线 */
text-decoration: line-through;
}
#indent {
/* 文本缩进2个文字 */
text-indent: 2em;
}
#line-height {
/* 整体高度 */
height: 50px;
/* 背景颜色 */
background-color:red;
/* 行高 */
line-height: 50px;
}
</style>
</head>
<body>
<p>要开心</p>
<h2>div对齐</h2>
<div class="one">左对齐</div>
<div class="two">右对齐</div>
<div class="three">居中对齐</div>
<h2>span不会对齐</h2>
<span class="one">左对齐</span>
<br>
<span class="two">右对齐</span>
<br>
<span class="three">居中对齐</span>
<h2>文本装饰</h2>
<div class="one">啥都没有</div>
<div class="two">下划线</div>
<div class="three">上划线</div>
<div class="four">删除线</div>
<h2>文本缩进</h2>
<p id="indent">要快乐</p>
<h2>行高</h2>
<div id="line-height">每天</div>
</body>
</html>
4.3背景
（1）背景色：background-color，值为颜色值
（2）背景图片：background-image，值为url（图片路径）
（3）背景平铺：background-repeat，值为no-repeat表示不平铺，默认的是repeat表示x轴和y轴都会平铺
（4）背景位置：background-position：x值，y值（x值：top（顶）、bottom（底）、px（像素）、百分比）（y值：left（左）、right（右）、center（居中）、px、百分比）
（5）背景尺寸：background-size，值可以是px、百分比、cover（x轴占满）、contain（包含整个背景）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#d1 {
width: 220px;
height: 220px;
/* 背景图片 */
background-image: url(花花.jpg);
}
#d2 {
width: 500px;
height: 500px;
/* 背景图片 */
background-image: url(花花.jpg);
/* 背景平铺：repeat表示x轴和y轴都会平铺 */
background-repeat: repeat;
}
#d3 {
width: 500px;
height: 500px;
/* 背景图片 */
background-image: url(花花.jpg);
/* 背景平铺：no-repeat表示不平铺 */
background-repeat: no-repeat;
/* 背景的位置 */
/* background-position: center bottom; */
background-position: 50% 50%;
}
#d4 {
width: 800px;
height: 500px;
/* 背景图片 */
background-image: url(花花.jpg);
/* 背景平铺：no-repeat表示不平铺 */
background-repeat: no-repeat;
/* 背景尺寸:contain表示包含整个背景,cover表示x轴占满，但是可能不会包含全部图片 */
background-size: contain;
/* background-size: cover; */
}
</style>
</head>
<body>
<h2>背景图片</h2>
<div id="d1">开心</div>
<br>
<h2>图片平铺</h2>
<div id="d2">开心</div>
<h2>图片位置</h2>
<div id="d3">开心</div>
<h2>图片尺寸</h2>
<div id="d4">开心</div>
</body>
</html>
4.4圆角
border-radius，值设置为50%就是圆形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
background-color: red;
height: 200px;
width: 200px;
}
#r10px {
/* 圆角10px */
border-radius: 10px;
}
#r50px {
/* 圆形 */
border-radius: 50%;
}
</style>
</head>
<body>
<h2>没有设置圆角</h2>
<div></div>
<h2>圆角10px</h2>
<div id="r10px"></div>
<h2>圆形</h2>
<div id="r50px"></div>
</body>
</html>
5.显示模式
display，值可以为block（块级）、inline（内联）、none（隐藏不显示）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div {
/* div默认是block（块级） */
display: inline;
}
.span {
/* span默认是inline（内联） */
display: block;
}
.none {
/* 隐藏不显示 */
display: none;
}
</style>
</head>
<body>
<h2>div</h2>
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
<h2>span</h2>
<span class="span">1</span>
<span class="span">2</span>
<span class="span">3</span>
<h2>display: none</h2>
<div class="none">1</div>
</body>
</html>
6.盒模型
（1）边框：border：粗细 样式 颜色
（2）内边距：padding：上 右 下 左（表示内容和边框距离，值可以是px）（padding-top：顶的内边距；padding-bottom：底的内边距；padding-left：左边的内边距；padding-right：右边的内边距）
（3）外边距：margin：上 右 下 左（表示外边元素和自己的距离，值是0 auto表示块级元素水平居中）
（4）记得去除浏览器的边距的默认值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
background-color:red;
width: 200px;
height: 100px;
}
#d1 {
/* 设置边框：粗细 样式 颜色 */
border: 2px solid red;
}
#d2 {
/* 内边距 */
padding: 5px
}
.m {
/* 设置边框：粗细 样式 颜色 */
border: 2px solid red;
/* 外边距 */
margin: 50px;
}
.auto {
/* 设置边框：粗细 样式 颜色 */
border: 2px solid red;
/* 块级元素居中对齐 */
margin: 0 auto;
}
/* 去除浏览器的默认值 */
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h2>边框</h2>
<div id="d1"></div>
<h2>内边距</h2>
<div id="d2">111111111111111111111111111111111111111</div>
<h2>外边距</h2>
<div class="m"></div>
<div class="m"></div>
<div class="auto"></div>
</body>
</html>
7.页面布局（弹性布局）
（1）display：flex（设置为弹性布局）
（2）写在父盒子上，作用在子元素上，控制子元素的位置和排列方式，不含孙子元素
（3）内联元素设置高，宽不会生效，使用弹性布局，宽就有效了
（4）使用了弹性布局，子元素是内联还是块级元素，效果是一样的
（5）主轴假设是x轴（默认)，子元素如果没有设置高度，默认就是父元素整个高度
（6）把父盒子称为flex容器，子元素称为flex item子元素排列的方向主轴
（7）设置主轴排列方式：justify-content：前，后，居中，间隔
（8）设置侧轴排列方式：align-items：前，后，居中，间隔
创建一个 div, 内部包含三个span
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100%;
height: 150px;
background-color: red;
}
div>span {
background-color: green;
width: 100px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
加上display: flex;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100%;
height: 150px;
background-color: red;
/* 设置为弹性布局 */
display: flex;
}
div>span {
background-color: green;
width: 100px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
再给 div 加上 justify-content: space-around
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100%;
height: 150px;
background-color: red;
/* 设置为弹性布局 */
display: flex;
/* 设置主轴排列方式：flex-end（向后排列）；space-around（间隔排列，行前行后都有距离）；flex-start（向前排列）；center（居中排列）；space-between（行与行之间有间距） */
justify-content: space-around;
}
div>span {
background-color: green;
width: 100px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
主轴和侧轴一起设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#container {
width: 100%;
height: 150px;
background-color: red;
/* 设置为弹性布局 */
display: flex;
/* 设置主轴的排列方式（默认是x轴） */
justify-content: space-around;
/* 设置侧轴的排列方式 */
align-items: center;
}
#container>div {
background-color: green;
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
