前言
能做到这里说明你已经把html的大部分常用标签都学完了，但是做出来的网页还只是毛坯房，接下来我们要学习如何对网页的样式进行美化，以及如何对各种html排列整齐。
网页包括三个部分，结构、样式、逻辑，分别对应html、css、JavaScript，你就已经把html学完了，怎么样，简单的吧
CSS的编写位置
1.行内样式
写在标签的 style 属性中，（又称：内联样式）
<h1 style="color:red;font-size:60px;">你好</h1>缺点：样式不能复用、结构与样式没有分离 ，造成页面混乱，阅读困难，不利于后期的维护
2.内部样式
写在 html 页面内部，将所有的 CSS 代码提取出来，单独放在 <style> 标签中
<h1>你好</h1>
<style>
h1 {
color: red;
font-size: 40px;
}
</style>3.外部样式（跳过）
写在单独的 .css 文件中，随后在 HTML 文件中引入使用
注：这种形式我们暂时不用，就先不展开讲了，以防你又晕了
案例
分别利用行内样式和内部样式实现，写一个段落标签，内容为“蓝色忧郁”，然后将其字体大小变为40px，文本颜色变为蓝色（blue）
行内样式
<p style="font-size: 40px;color: blue;">蓝色忧郁</p>内部样式
<p>蓝色忧郁</p>
<style>
p{
font-size: 40px;
color: blue;
}
</style>练习：
写一个p标签，内容为你好，字体大小100px，颜色蓝色，要求使用内部样式和行内样式两种方法实现
样式表的优先级
行内样式 > 内部样式 = 外部样式
CSS选择器
1.标签选择器
为页面中 某种标签 统一设置样式
<style>
/* 选中所有h1标签 */
h1 {
color: orange;
font-size: 40px;
}
/* 选中所有p标签 */
p {
color: blue;
font-size: 60px;
}
</style> 2.类选择器
class 翻译过来有：种类、类别的含义，所以 class 值，又称：类名。
<style>
/* 选中所有class值为speak的元素 */
.speak {
color: red;
}
/* 选中所有class值为answer的元素 */
.answer {
color: blue;
}
</style> 注意点：
class的名是我们自己取的，按照标准：不要使用纯数字、尽量使用英文与数字的组合，命名要有意义，做到 “见名知意”。
一个元素不能写多个 class 属性，下面是 错误示例：
<!-- 该写法错误，元素的属性不能重复，后写的会失效 --> <h1 class="speak" class="big">你好啊</h1>一个元素的 class 属性，能写多个值，要用空格隔开，例如：
<!-- 该写法正确，class属性，能写多个值 --> <h1 class="speak big">你好啊</h1>
3.id选择器
<style>
/* 选中id为city的标签 */
#city {
color: orange;
font-size: 40px;
}
</style> 总结：id选择器和class类选择器的区别在于，类选择器是选择一类事物，类名是可以重名的，但是id通常是唯一的，不能重名
总结
| css选择器 | 示例 |
|---|---|
| 类选择器 | .input_box可以选中所有<div class="input_box"> |
| 标签选择器 | input可以选中所有<input>标签 |
| id选择器 | #input_box可以选中所有<div id="input_box"> |
练习：
通过标签选择器实现，写一个h3标签，内容为你好，将字体大小设置为50px，颜色为蓝色。
通过class选择器实现，写一个h1标签，内容为哈哈，将字体大小设置为100px，颜色为红色
通过ID选择器实现，写一个p标签，内容为拜拜，将字体大小设置为200px，颜色为绿色
伪类选择器
这里补一种特殊的选择器，这种选择器是选中一种特殊的状态
如何理解“伪” ? — 虚假的，不是真的。
如何理解“伪类”？ — 像类( class )，但不是类，是元素的一种特殊状态。
:link 超链接未被访问的状态。
:visited 超链接访问过的状态。
:hover 鼠标悬停在元素上的状态。
:active 元素激活的状态。
我在这里只介绍一种最常用的:hover
<body>
<button class="login_button">登录</button>
</body>
<style>
.login_button {
/* 设置按钮的宽度 */
width: 100px;
/* 设置按钮的背景颜色 */
background-color: #ecf5ff;
/* 设置文字的颜色 */
color: #5eadff;
/* 调整按钮的字体粗细 */
font-weight: 700;
/* 加上按钮的边框 */
border: #5eadff 1px solid;
}
/* 选中鼠标悬浮到登录按钮上的状态 */
.login_button:hover {
background-color: #409eff;
color: white;
}
</style>注意：预览的时候请使用PC模式预览，不要用手机端，因为手机上是没有鼠标的，所以我们如果是开发APP的话，是不用考虑这个鼠标悬浮效果的。
通配符选择器
*是通配符选择器，它的作用是选中页面上所有的元素
很多时候，浏览器自带一些边距，也搞不清楚哪些标签有默认边距，哪些没有，管他呢，通配符选择器选中所有的标签，然后，全部，去掉💢，完事😎😎😎😁👌。
<style>
/* 去掉所有元素的默认边距 */
*{
padding: 0;
margin: 0;
}
</style>CSS常用属性
宽度
width
<style>
div {
width: 100px;
}
</style>高度
height
<style>
div {
height: 100px;
}
</style>字体大小
font-size
<p>这是一段文字</p>
<style>
p {
font-size: 40px;
}
</style>字体粗细
font-weight
属性值：100~1000 且无单位，数值越大，字体越粗
<p>这是一段文字</p>
<style>
p {
font-weight: 600;
}
</style> 文本颜色
color
<p>这是一段文字</p>
<style>
p {
color: red;
}
</style> 开发中常用的是： rgb/rgba 或 HEX/HEXA （十六进制）。
背景颜色
- background-color：设置背景颜色
<style>
div {
background-color: red;
}
</style> 背景图片
background-image：url(背景图片的地址)
url()中需要填入背景图片的地址，所以你得先在项目文件夹中放入一张图片，注意，这个地址是字符串，要加引号
<style>
div {
background-image: url('./背景图片.jpg');
}
</style> CSS渐变
background-image有一个好玩的用法，就是如果你没有背景图片的话，可以设置一个渐变色来代替
这个所以用来是网页花里胡哨的，一般都不用的，所以了解即可
第一个是简单的三色渐变（线性渐变）
使用关键词设置线性渐变的方向，有四个方向，to top,to bottom,top left,to right
<style>
body {
width: 100vw;
height: 100vh;
background-image: linear-gradient(red, yellow, green);
background-image: linear-gradient(to right top,red,yellow,green);
background-image: linear-gradient(to top,red,yellow,green);
}
</style>圆角
border-radius
也可以按百分比进行设置，如果圆角是50%，那么就刚好是一个圆
<style>
img {
border-radius: 20px;
border-radius: 50%;
}
</style> 文本修饰
属性名： text-decoration
作用：控制文本的各种装饰线。
可选值
none： 无装饰线underline：下划线overline： 上划线line-through： 删除线
<style>
a {
text-decoration: none;
}
</style> 文本缩进
属性名： text-indent 。
作用：控制文本首字母的缩进。
属性值： css 中的长度单位，例如： px
<style>
p {
text-indent:40px;
}
</style> 练习：
- 写一个div标签，宽度300px，高度500px，背景颜色黄色
- 在刚才的div标签里，放入一个h2标签，内容为“哈哈”，调整颜色为红色，字体大小50px，字体的粗细900，文本缩进2em，并且要求有修饰线
文本对齐（水平）
属性名： text-align
作用：控制文本的水平对齐方式。
常用值：
left：左对齐（默认值）right：右对齐center：居中对齐
<div style="text-align: center;">
<img src="./1.png" style="width: 100px;" alt="">
<p>这是一段文字</p>
</div>特别提醒：该属性只对行内元素或者文本类标签才生效，块级元素可以使用margin的auto自动分配实现居中
文本对齐（垂直）
顶部：无需任何属性，在垂直方向上，默认就是顶部对齐。
居中：对于单行文字，让 height = line-height 即可
底部：这个目前实现起来很麻烦，以后学了定位再去弄吧
实在居中不了就算了，这个本来也只是权宜之计，等学了布局之后，调位置就相当简单了
行高
属性名： line-height
作用：控制一行文字的高度。
<style>
p {
line-height: 60px;
line-height: 1.5;
line-height: 150%;
}
</style> 注：如果不加单位px，是参考自身 font-size 的倍数，也可以使用百分比表示
CSS鼠标属性
cursor：设置鼠标光标的样式
可选值：
pointer ：小手
move ：移动图标
text ：文字选择器
crosshair ：十字架
wait ：等待
help ：帮助
<style>
body{
cursor: url("./left_ptr.png"), pointer;
}
</style>注：可以使用url()引入自己的图片自定义鼠标的样式
一个很坑的点：cursor可以设置很多值，以逗号分隔，除了第一个，后面的都是备用，除非第一个加载失败，才会使用备用，这点都很好理解对吧，坑的在后面，我也是试了很久才研究出来的。
如果你使用了自定义的光标，就必须有一个备用光标，因为浏览器认为你的自定义鼠标不靠谱，万一加载不出来，不就没鼠标了吗？所以要求一定要有备用光标它才放心，你如果敢不设置备用光标，浏览器就敢不生效。
练习：
写一个div标签，宽高都是200px，背景颜色黄色，在该div标签中放入一个p标签，要求p标签居中摆放，并且有酷炫的鼠标
元素隐藏（了解）
方式一：visibility
visibility 属性默认值是 show ，如果设置为 hidden ，元素会隐藏。
元素看不见了，还占有原来的位置（元素的大小依然保持）。
方式二： display
设置 display:none ，就可以让元素隐藏。
彻底地隐藏，不但看不见，也不占用任何位置，没有大小宽高。
CSS盒子模型
1. CSS 长度单位
px：像素。em：相对元素 font-size 的倍数。%：相对父元素计算。vw：视口宽度，整个视口宽100vw，10vw 就是视口宽度的 10%vh: 视口高度，整个视口高100vh，10vh 就是视口高度的 10% 。
2.盒子模型的组成
盒子模型包括三个东西，内边距，边框，外边距，直接运行代码大家感受一下吧。
<style>
input{
padding: 10px;
border: 1px solid black;/*1像素粗细 实线 黑色*/
margin: 10px;
}
</style>border是设置边框的属性，我们需要分别设置边框的粗细，类型和颜色，在上面这个案例中，我设置边框为1个像素的黑色实线，你如果觉得太细了，或者想换成别的颜色也可以自己修改一下。
线的类型也可以换，除了实线solid，还可以设置为圆点（dotted）、短横线dashed的边框，双实线double等等，因为不常用，我就不全部列举了。
观察一下上面这段代码，我增加了三行代码以及注释，体会到内边距、边框、和外边框的作用了吗？
总结一下吧。
| css属性 | 作用 |
|---|---|
| margin（外边距） | 盒子与外界的距离 |
| border（边框） | 盒子的边框 |
| padding（内边距） | 紧贴内容的补白区域 |
但是我们发现直接设置padding的话，是四周都有边距，但是我们想要左边的内边距多一点，应该怎么办呢？大家观看表格自己解决。
| css属性 | 作用 |
|---|---|
| padding-top | 设置上边距 |
| padding-bottom | 设置下边距 |
| padding-right | 设置右边距 |
| padding-left | 设置左边距 |
<style>
input{
padding: 10px;
padding-left: 20px;
border: 1px solid black;
margin: 10px;
}
</style>padding我用了简写的方式，因为我想要上下的边距小，左右的边距大，如果四个方向一一设置就太麻烦了，可以通过padding:上下 左右，来设置两个方向的边距，也可以设置四个方向的边距，顺序依次是padding:上 左 下 右
案例：
制作一个文本输入框，要求内边距是10px，外边距是10px，边框为1个像素的黑色实线边框，提示文字为“请输入用户名”
<input type="text" placeholder="请输入用户名"/>
<style>
input{
margin: 10px;
padding: 10px;
border: 1px solid black;
}
</style>练习：
制作一个密码输入框，要求左内边距是50px，其余三个边内边距为10px，外边距是15px，边框为3个像素的黑色虚线边框，提示文字为“请输入密码”
3.box**-**sizing 怪异盒模型
使用 box-sizing 属性可以设置盒模型的两种类型
| 可选值 | 含义 |
|---|---|
| content-box | width 和 height 设置的是盒子内容区的大小。（默认值） |
| border-box | width 和 height 设置的是盒子总大小。（怪异盒模型） |
在content-box中，如果一个标签被设置了内边距，那么实际上这个标签的宽高都会被撑大。
在border-box中，如果一个标签被设置了内边距，它会压缩内部的空间，而不会影响总的宽高。
总之，如果你设置了内边距或者边框，推荐使用怪异盒模型就完事
定位
固定定位（fixed）
2.1 如何设置固定定位？
给元素设置 position: fixed 即可实现绝对定位。
可以使用 left 、 right 、 top 、bottom 四个属性调整位置。
通俗来说，就像粘在屏幕上某个位置的苍蝇一样
练习：
- 用div标签划分一个区域，宽100vw，高8vh，背景颜色黄色，将其固定定位距离屏幕顶部20px的地方
- 将四张图片，分别固定到屏幕的四个角（左上，左下、右上、右下）
静态定位（static）
默认定位方式
top、right、bottom、left 和 z-index 属性对其不起作用
相对定位(relative)
懒得写了，略
绝对定位(absolute)
虽然有用，但是也懒得写了，略
粘性定位(sticky)
用得不多，我也不熟，略
布局
布局和定位是有区别的，专业概念不掰扯了，通俗点说，你可以理解为：
定位是控制一个元素的位置，布局是调整一堆元素如何摆放
关于布局的方式有很多，默认是文档流布局，还有浮动、定位、表格等布局，如果要一个个详细讲，再一个个举例，太累了，你也记不住。其实从我的开发经验来说，就是弹性盒子最实用，也最简单，所谓一招鲜，吃遍天，我的网站中，95%用了弹性盒子。
那弹性盒子究竟有什么好处呢？弹性盒子顾名思义是有弹性的，它可以根据盒子自动调整大小，不用我们去操心太多，非常省心好用，具体的原理也不讲了，讲多了你们容易困，在实际案例中去体会吧。
弹性盒子布局
如何给元素设置为弹性盒子
给标签元素设置设置： display:flex属性即可
注意：既然是盒子，就是用来装东西的，回想哪个标签是用来装东西，忘了的话可以去html的笔记查一下，div是容器标签，我们一般将div标签设为弹性盒子，每次都有很多同学，将img标签、p标签等设置为弹性盒子💥😡😡。
弹性盒子排列方向
网页元素都是整整齐齐的，要么横着放，要么竖着放，没有斜着放的。
| 弹性盒子排列方向 | 横向 | 纵向 |
|---|---|---|
| flex-direction | row | column |
弹性盒子对齐方式
| justify-content、align-items的属性 | 作用 |
|---|---|
| flex-start | 弹性项目向行头紧挨着填充 |
| flex-end | 弹性项目向行尾紧挨着填充 |
| center | 弹性项目居中紧挨着填充 |
| space-between | 弹性项目平均分布在该行上 |
| space-around | 弹性项目平均分布在该行上，两边留有一半的间隔空间 |
课后练习：
完成上图中五种定位
我先帮你做个示范，你写后面四种
flex-start:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="section">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
<style>
.section{
width: 100vw;
height: 200px;
background-color: lightgray;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.box{
width: 100px;
height: 100px;
background-color: orange;
border: 1px solid black;
}
</style>综合任务：
仿照本网站的样式，做一个导航栏，该导航栏的宽度是100vw，固定定位在屏幕顶部。鼠标放上去的时候颜色发生变化。（2课时）
主轴换行方式
属性名： flex-wrap
nowrap ：默认值，不换行。
wrap ：自动换行，伸缩容器不够自动换行。
wrap-reverse ：反向换行（不常用）。
课后练习
分别利用行内样式和内部样式实现，写一个段落标签，内容为“粉色浪漫”，然后将其字体大小变为50px，文本颜色为白色（white），背景颜色为粉色（pink）
不限方法，用3级标题标签添加文本“原价160原石”，并添加删除线样式。接着继续添加2级标题标签“现价80原石”，并将文字内容变为红色加粗
写一个段落标签，内容为“蓝色忧郁”，然后将其字体大小变为40px，文本颜色变为蓝色（blue）,再写一个段落标签，内容为“粉色浪漫”，然后将其字体大小变为50px，文本颜色为白色（white），背景颜色为粉色（pink）
要求使用行内样式，划分一个区域，要求该区域宽500px，高300px，背景颜色为蓝色
要求使用内部样式，划分一个区域，要求该区域宽800px，高200px，背景颜色为粉色
为网页设计一个标题，文字内容为“直播销售平台”，要求文字居中对齐。再设计一个副标题，文字内容为“——我们只玩真实的”，文字大小要比标题小，文字颜色为深灰色，要求文字靠右
制作一个滚动标签，内容为“欢迎各位专家前来参观”，要求字体大小为60px，文本颜色为红色
制作一个“火箭.png”图片，要求图片的宽度为三个字大（3em）
制作一个滚动标签，包含图片和文字两个部分，图片使用“火箭.png”，要求图片的宽度为三个字大（3em），文字使用span标签，内容为“感谢马斯克送的一亿发火箭”，内容加粗并且是红色的。
变换和动画
CSS过渡
学习了:hover之后，我们可以做很多好玩的事情，比如当鼠标悬停到按钮的时候，将标题区域拉长一点，或者再换一个背景颜色，都是我们学习过的知识，只是简单组合起来应用一下，怎么样，有想法了吗？
<body>
<button>你好</button>
</body>
<style>
button {
width: 200px;
height: 100px;
background-color: aquamarine;
padding: 20px;
box-sizing: border-box;
}
button:hover {
width: 600px;
}
</style>现在的问题就是，当鼠标放上去的时候，咣，很快的啊，一瞬间就看到效果了，比较突兀，比马保国的闪电五连鞭还快，我们希望这个效果能够柔和一点，不要那么快，应该怎么做呢？这个时候我们要学习一个新的知识叫过渡
过渡通过transition属性来设置，分别要设置过渡的持续时间、过渡的类型，能够过渡的属性
过渡的持续时间
用s（秒）做单位就行了，分别设置0.1s和10s看一下有什么区别吧。
过渡的类型
| 属性值 | 含义 |
|---|---|
| ease | 平滑过渡 —— 默认值 |
| linear | 线性过渡 |
| ease-in | 慢 → 快 |
| ease-out | 快 → 慢 |
能够过渡的属性
| 属性值 | 含义 |
|---|---|
| none | 不过渡任何属性 |
| all | 过渡所有能过渡的属性 —— 默认值 |
| 具体某个属性名 | 例如： width 、 heigth ，若有多个以逗号分隔。 |
例如：transition: 1s linear all;一秒钟的线性变化，针对所有的属性
过渡的类型和能够过渡的属性都是有默认值的，你可以不写，但是过渡时间没有默认值，必须写。
简写：transition: 1s
<body>
<button>你好</button>
</body>
<style>
button {
width: 200px;
height: 100px;
background-color: aquamarine;
padding: 20px;
box-sizing: border-box;
transition: 1s;
}
button:hover {
width: 600px;
}
</style>transform变换
属性名：transform
可选值：
| 效果 | 属性 | 含义 |
|---|---|---|
| 位移 | translate | 一个值代表水平方向，两个值代表：水平和垂直方向。 |
| 缩放 | scale | 一个值代表同时设置水平和垂直缩 放；两个值分别代表：水平缩放、垂直缩放。 |
| 旋转 | rotate | 设置旋转角度，需指定一个角度值( deg )，正值顺时针，负值逆时针。 |
| 扭曲 | skew | 需指定一个角度值( deg ) |
<style>
.login_button{
/* 设置按钮的宽度 */
width: 100px;
/* 设置按钮的背景颜色 */
background-color: #ecf5ff;
/* 设置文字的颜色 */
color: #5eadff;
/* 调整按钮的字体粗细 */
font-weight: 700;
/* 加上按钮的边框 */
border: #5eadff 1px solid;
/* 记得加上过渡效果,不然变化得太快了 */
transition: 1s linear all;
}
.login_button:hover{
/* 位移（往右位移100px，往下位移50px） */
/* transform:translate(100px,50px); */
/* 缩放（放大两倍） */
/* transform: scale(2); */
/* 旋转（旋转90度） */
/* transform: rotate(90deg); */
/* 扭曲（扭曲45度） */
/* transform: skew(45deg); */
/* 复合写法 */
transform:translate(100px,50px) scale(2) rotate(90deg) skew(45deg)
}
</style>CSS动画
animation-name ：给元素指定具体的动画
animation-duration ：设置动画所需时间
animation-delay ：设置动画延迟
animation-timing-function ，设置动画的类型
ease ： 平滑动画 —— 默认值
linear ： 线性过渡
ease-in ： 慢 → 快
ease-out ： 快 → 慢
ease-in-out ： 慢 → 快 → 慢
animation-iteration-count ，指定动画的播放次数，infinite为无限播放
animation-direction ，指定动画方向
normal ： 正常方向 (默认)
reverse ： 反方向运行
alternate ： 动画先正常运行再反方向运行，并持续交替运行
alternate-reverse ： 动画先反运行再正方向运行，并持续交替运行
<body>
<div></div>
</body>
<style>
div {
width: 100px;
height: 100px;
background-color: blue;
/* 要使用的动画名 */
animation-name: da_xiao;
/* 设置动画所需时间 */
animation-duration: 3s;
/* 动画循环次数为无限循环 */
animation-iteration-count: infinite;
/* 复合写法 */
animation: da_xiao 3s infinite alternate;
}
@keyframes da_xiao {
from {
/* 这里可以不写，不写就表示原来啥样就啥样 */
}
to {
width: 500px;
background-color: red;
}
}
</style>还可以精细控制
<style>
@keyframes da_xiao {
0% {
}
50% {
transform: translate(100px, 0px);
}
100% {
transform: translate(100px, 100px);
}
}
</style>样例：
再提供两个案例吧，提供的案例就是本网站正在使用的，方便你观察。
旋转：
<style>
img{
animation: rotating 2s infinite linear;
}
@keyframes rotating {
to{
}
from{
transform: rotate(360deg);
}
}
</style>呼吸灯效果（这个不用看懂，就玩玩就行）
这个用的是阴影效果做的，可以感受下，其实也不难
<style>
/* 图片周围的呼吸灯效果 */
.img {
animation: breathe 12s infinite ease-in-out;
}
@keyframes breathe {
0% {
box-shadow: 0 0 5px 0 rgba(255, 0, 0, 0.7);
}
25% {
box-shadow: 0 0 10px 5px rgba(0, 255, 0, 0.7);
}
50% {
box-shadow: 0 0 15px 10px rgba(47, 150, 255, 0.7);
}
75% {
box-shadow: 0 0 10px 5px rgba(255, 255, 0, 0.7);
}
100% {
box-shadow: 0 0 5px 0 rgba(255, 0, 0, 0.7);
}
}
</style>
