目录
1.上节回顾
超链接a标签：<a href='地址'>超链接文本</a>
也可以用id属性来超链接文本里面的内容
<img src='图片地址' alt='图片描述'>
列表分为有序，无序，自定义列表
有序：ol 和li一起用
无序：ul和li一起用，可以用快捷键 ul>li*N来弄出N个标签
自定义标签：dl，dd，dt，其中dd是内容，dt是标题
2.CSS定义
html-->写东西出来给别人看
css-->找到html写出来的东西，再给他加特效
1.怎么找
2.加什么
css--层叠样式表-->用来对网页进行排版，美化外观，优化性能
文本--字体，大小，颜色，缩进
图片--宽高，边框，颜色，透明
html--身体
css--化妆品
网页文件后缀：.html
样式表文件的后缀： .css
css注释写法：
/*注释内容*/
3.CSS选择器
css的工作分为两步：1.找到元素 2.加样式
选择器就是帮助我们找到元素的一种方法，通过选择器找到对应的标签元素
一般修饰要在head标签里面写，style标签
1.标签选择器：选择一个标签（一个网页里的所有该标签）
语法为：
标签名{
属性:值
}
例如：
p{
color: #00ff1a;
font-size: 70px;
/* font: medium; */
}
2.id选择器：先给标签设置id名，然后通过#id名的方式找到该标签，id相当于身份证，是唯一的。不要给多个标签设置一样的id名。
语法：
<标签名 id='id名'>内容</标签>
例如：
#hot1{
color:#094;
font-size: 40px;
}
3.class选择器（类）：先给标签设置class类名/类型，然后通过.class名的方式找到该标签，class为类型，可以有多个，但是id只能有一个。
语法：
<标签 class='类名'>
<span class='money'>
.money{
color: #a00073;
font-size: 70px;
}
4.通配符选择器(*):通配符选择用*表示，表示选中网页里的所有元素。（正式开发不用这个通配符选择器）；
语法格式：
*{
属性：值；
属性：值；
}
*{
color: #6e0000;
font-size: 40px;
}
一般来说class选择器用的较多。
标签选择器：一般用来清除样式/换个样式
- 例题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
color: #00ff1a;
font-size: 70px;
/* font: medium; */
}
/* span{
font:xx-large;
font-style: unset;
} */
/* id选择器 */
#hot1{
color:#094;
font-size: 40px;
}
/* class选择器 */
.money{
color: #a00073;
font-size: 70px;
}
/* 通配符选择器 */
*{
color: #6e0000;
font-size: 40px;
}
</style>
</head>
<body>
<p>一曲高歌</p>
<p>一步杀一人</p>
<p>千里不流行 </p><!--带换行-->
<span id="hot1">我喜欢你</span> <!--不带换行-->
<span class="money">你好有钱呀!!!</span>
<span>通配符选择器</span>
</body>
</html>
4.CSS样式的三种写法
style:样式
1.内部样式表-->把样式写在页面head标签里面，选择器写在style标签里面。
2.外部样式表-->把css代码写在一个专门的.css文件里，需要使用的时候就用link标签导入，
例如： <!-- /* 外部样式表 */ -->
<link rel="stylesheet" href="demo.css">
3.行内样式表-->通过标签属性style。直接把样式写在标签里
语法：
<标签名 style='属性：属性值'>
样式表的优先级：参考就近原则 -- 行内样式 >内部样式/外部样式（谁离目标标签越近就听谁的）；
例题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- /* 外部样式表 */ -->
<link rel="stylesheet" href="demo.css">
<!-- 内部样式表 -->
<style>
.kylin1{
color: #bd0000;
font-size: 70px;
}
p{
color: #9e0000;
font-size: 30px;
}
</style>
</head>
<body>
<p class="kylin1">我喜欢你</p>
<p id="kylin2">我喜欢你</p>
<!-- 行内样式表 -->
<p style="color: aquamarine;text-align: center;font-size: 70px;">我喜欢你</p>
<b>我想你</b>
</body>
</html>
5.div盒子标签(division)
div主要是用来布局使用。因为他本身没有含义/属性/样式。很单纯，可塑性强。
适合作为容器，所以管他叫盒子，把对应的内容放在盒子里面
div本身是没有宽高/颜色/边框这些样式
属性：
width:宽度
height：高度
语法：
<div>内容</div>
快捷键：
#id属性值+enter 产生一个id的属性盒子
.class属性值+enter 产生一个class的属性盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body .font{
color: #096;
}
body>p.hot{
color: #ff0000;
}
</style>
</head>
<body>
<!-- 两个类名分别为font hot -->
<p class="font hot">我真的喜欢你</p>
<p class="font hot">我真的喜欢你</p>
<p class="font hot">我真的喜欢你</p>
<p class="font hot">我真的喜欢你</p>
<p class="font hot">我真的喜欢你</p>
<p class="font hot">我真的喜欢你</p>
<b class="font">你喜欢我？</b>
<b class="font">你喜欢我？</b>
<b class="font">你喜欢我？</b>
</bodyont
</html>
6.文本样式（font）
-
span标签是一个文本标签，它没有特别的样式/属性，很单纯，所以适合加文本样式
-
1.color：颜色的用法：
-
color：颜色英语单词（blue，green等）
-
font-size：字体大小。（px像素，em：一个字的大小）
-
font-family:字体
-
font-weight：字体粗细
-
font-style：字体样式（倾斜）
font-style：italic；
-
text-indent:文字缩进
-
text-align：设置文本对齐
-
text-decoration：设置文本下划线
-
line-height:设置文本行高
- 例如：
line-height: 100px;
- 例如：
-
7.背景样式（background）
background:背景样式
1.background-color:背景颜色
2.background-image：设置背景图片
语法：background-image: url(./image.png);
3.background-position：设置背景位置
有：left，center，right，top，button
4.background-size：设置背景大小
background-size：cover；缩放的意思
5.background-repeat：设置背景重复
background-repeat：no-repeat；设置背景不重复