一、今日内容
首先对这些属性进行一个演练
想要深刻理解所有常用的CSS属性，最好先学会以下几个最基础最常用的CSS属性
font-size 文字大小
color前景色（文字颜色）
background-color背景色
width宽度
height高度
二、对CSS常用属性进行演练
1、字体的默认大小是16px的
还可以看到字体的颜色，以及字体等等信息
为什么是16px的呢？
浏览器是默认做了一个设置的，有一个外观，外观中的自定义字体
并且是一个微软雅黑的
当然这里还设置了一些其他的字体，这个是因为如果这个字体操作系统不支持是可以自动的设置其他的字体的
需要知道的一件事是字体默认是16px的。
tip：
这里编写样式的时候可以使用简写让VScode能够快速的识别出来是什么样式，这个是一种语法，后面进行讲解。
另外，div是默认占用一整行的，给div设置background-color的时候就能够看出来
另外之前讲过div标签浏览器会给他增加一个默认的属性叫做display:block，所以div是一个块级元素，是独占一行的
span不是块级元素，我们可以给这个标签增加一个这样的属性也能偶成为块级元素了。
还要注意到一点，div是默认没有高度的，因为它只有一个属性，为什么我们能够看得见这个div是因为有内容已经讲这个元素支撑起来了，才能够看见。
另外这里似乎还会有一些边距，这些边距的产生是因为body元素提供的。
还要注意一点，如果我们给div设置了宽度，虽然看着是当前div元素右边是有很大的空间的，但是如果后面还有元素是不会在div后面的，因为div还是独占一行，
后面会通过一些方式改变这一点。
注意到color是设置的前景色，不光光包括字体的颜色，这里还包括文字，装饰线，边框，外轮廓等等的颜色。
以下是这些属性的一个示例代码。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>01常见的CSS属性的演练</title><style>/* 01 font-size 设置字体的大小 */.title {font-size: 30px;}/* 02 color 设置字体的颜色 */.color {color:chocolate; /* 这里的chocolate这个是巧克力色的意思，后面会使用十六进制等等类型的颜色 */}/* 03 div是默认占用一整行的 background-color设置背景颜色*/.bgc {background-color:pink;}/* 04给标签设置宽度和高度width height */.wh {width:200px;height:200px;color:chocolate;background-color:black;}</style>
</head>
<body><!-- 01 字体的默认大小是16px的 --><p class="title">01字体的默认大小--经过更改之后的效果</p><p>01字体的默认大小是16px</p><!-- 02 设置字体的颜色 --><p class="color">02设置字体的颜色--经过更改之后的效果</p><p>02设置字体的颜色</p><!-- 03 div默认占用一整行 background-color设置背景颜色 --><div class="bgc">03 div是默认占用一整行的--经过更改之后的效果</div><div>03 div是默认占用一整行的</div><!-- 04 width宽度 height高度 --><div class="wh">04给标签设置宽度和高度--经过更改之后的效果</div><div>04给标签设置宽度和高度</div></body>
</html>
2.基于前面的学习做一个简单的案例练习吧
在真实开发的时候我们不会一个个结构的写，我们只是写具有相同结构的一个部分然后通过js进行遍历，给这些结构一些数据即可
每一个结构称为一个item。
tip，img标签里面的alt属性是alternative单词的缩写，表示占位，可替换的物体
注意：设置div的宽度的时候，里面的图片是不会变化的
这里就直接对图片设置样式吧
使用后代选择器，比如：.item img，或者直接给图片设置也可以，选择器这里后面也会讲解。
如果想要水平排布呢，就是因为div是一个块级元素，就算右边没有东西也是独占一行。
这里来说更改div的特性为inline就会失效，因为，inline行内元素是不能设置宽度的。
块级元素和行内元素这些东西后面也会进行讲解。
但是可以设置为display: inline-block;然后设置一个vertical-align: top;垂直方向布局。这里这两个属性不太好理解
后面会单独讲解这个特性。并且这种解决方案也不是太好的解决方案。
因为两个结构之间会产生空隙，为什么产生空袭呢？这些东西后面再讲解。
然后第二种解决方案是添加一个float: left;这样的解决方案，给他添加一个浮动。
就不会产生空隙。
然后第三种解决方案是使用flex的布局方案。
需要将这些结构再放到一个盒子中。
好，现在先不要掌握这么多的东西。
现在先只要知道方案一和方案二即可。当然这里可以先不用管这些方案，直接垂直的也可以。后面这些方案都会讲解。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>02常见的CSS属性的练习</title><style>.item {width:400px;background-color:aqua;/* 解决方案一 float:left; 这种不会有空隙*/float:left;/* 解决方案二 display: inline-block;vertical-align: top; 这种会有空隙*/}.item img {width:400px;}.title {background-color:orange;color:red;font-size:20px;}</style>
</head>
<body><h1>王菲的专辑</h1><div class="item"><h3>《天空》</h3><img src="https://ts1.cn.mm.bing.net/th/id/R-C.8eff649c542f0f723c42d22822bc7745?rik=iW%2bffwpIXRqXaQ&riu=http%3a%2f%2fimg.leikeji.com%2fresource%2fimg%2fd243345ec1284d858dc2fc660227147e.jpg&ehk=Y3qxKfaeheGUjtWdmG64Nvd5ZrwIBhx3%2bHMzDAVVtgM%3d&risl=&pid=ImgRaw&r=0" alt="王菲专辑《天空》"><p><span class="title">王菲-《天空》</span>这位华语乐坛的传奇天后，以其空灵飘逸的嗓音和独树一帜的音乐风格，长久以来俘获了无数乐迷的心。在她的众多经典作品中，《天空》这张专辑无疑占据了举足轻重的地位，它不仅标志着王菲音乐生涯的一个重要转折点，更是将她的音乐才华推向了一个新的高度。</p></div><div class="item"><h3>《胡思乱想》</h3><img src="https://www.ofaye.com/attachment/d/9b/deefcbf7b79e63ea/2000.jpg" alt="王菲专辑《胡思乱想》"><p><span class="title">王菲-《胡思乱想》</span>是她音乐生涯中的一张重要作品，于1994年6月29日由新艺宝唱片公司发行。这张专辑不仅展现了王菲独特的音乐风格和强烈的个性，还标志着她在香港乐坛的崭露头角。</p></div>
</body>
</html>
为什么使用inline-block的时候会有空隙呢？是因为我在两个div之间进行了一个换行，中间有一个空行导致的空隙。但是删除这些空行导致代码的可读性就会变差。
三、额外知识点的补充
前面讲解完成这些东西需要有一个额外知识进行补充
首先第一个需要讲解一个元素，这个元素叫做link元素，如果使用外部样式需要使用link进行引入，之后进行讲解；
然后讲解一个计算机进制，CSS的颜色有一种表示是十六进制。
然后就是CSS颜色的表示，各种关系有什么区别，如何使用颜色。
然后就是Chrome的调试工具的使用。
最后讲解一个浏览器渲染流程。
1.link元素
这个是用来链接外部资源的，规范了文档与外部资源的关系
link元素通常是用在head元素中的
前面使用link元素引入css样式
这个东西的目的就是将资源引入到当前HTML中的。
另外一个是创建站点的图标
我们使用的是默认图标
我们可以引入一个图标，使用link进行引入
link元素常见的属性是href的属性，这个属性用来指定被链接资源的URL，URL可以是绝对的，也可以是相对的。
另外一个属性是rel，指定链接的类型，常见的链接类型可以参考文档：
https://developer.mozilla.org/zh-CN/docs/Web/HTML/link_types
例如：icon是站点图标，stylesheet是css样式图标
另外图标也是可以制作的，直接在网上搜索icon图标制作即可，将图片上传自动转换成icon
另外在文档中我们也可以看到
DNS是域名解析服务器，在网络上浏览东西的时候将URL通过DNS解析成为ip地址端口号等去找到主机对应的服务，有解析的过程是会花时间的
如果能够提前解析好就不用重复的解析了，这种就是一种性能的优化。
fetch是获取的意思。
目前掌握link元素最主要的作用即可。
2.认识进制
进制是数学里面的概念。
通俗的理解就是：当数字达到某个值的时候进一位来表示。
最熟悉的是十进制，当数字为9的时，使用一位已经表示不了了，就需要前进一位变成2位。
而数字只有0到9，如果是十六进制需要引入字母，a-f，表示10-15
日常生活当中，我们人使用的大多数都是十进制，原因可能是人类正好十根手指。
阿尔伯特·爱因斯坦：常识就是人到十八岁为止所累积的各种偏见。
在编程语言中也可以表示这些进制。
如果使用js，在终端中的打印结果会在Console中显示
另外二进制是以0b开头，英文名叫做binary
然后八进制是以0o开头，英文名叫Octonary
十六进制是以0x开头，英文名叫hexadecimal
关于进制转换自行进行了解，这个是非常简单的。
tip：一个生活小技巧，如果520情人节忘记了，给大家一个建议，在522那天过，因为十六进制的522，对应的十进制是1314.
3.CSS中颜色的表示方法
当我们设置color样式和background-color样式的时候都会设置一个颜色的值。
前面设置的颜色的词都是单词，不可能将所有颜色的单词都记住。
就算将所有的颜色单词写出来也是不够的。
在CSS中，颜色有以下几种表示方法：
颜色关键字color keywords，这种方式是不区分大小写的标识符，它表示一个具体的颜色。
我们一般不会这样进行表示，我们会采用RGB的方式表示，RGB是一种色彩空间，通过R，G，B三原色组成了不同的颜色；
也就是通过调整这三个颜色不同的比例，可以组合成其他的颜色。
RGB各种原色的取值范围是0-255；
这样会形成很多种颜色。
通过这些颜色混合在一起会形成新的颜色。
要使用这样的方式需要使用到rgb的函数
当设置成255,0,0的时候就是一个红色，当设置0,255,0的时候就是一个绿色
当设置成0,0,255的时候就是一个蓝色
0，0，0的时候是一个黑色
255,255,255的时候是一个白色
可以说黑色是最纯洁的颜色
如果是白色是所有颜色达到最大的颜色。
RGB也有别的表示方法，也可以使用十六进制表示。
对应转换成十六进制即可。
并且前面添加一个井号
这个是黑色的十六进制表示
最规范的是两位两位的表示
如果每两个位置的值都是相同的就可以缩写
那么问题就来了，我们怎么知道一个网站的这些样式的颜色呢？
做设计的人会将这些颜色等等东西直接给到我们。
另外有一些颜色是有半透明的
单纯从颜色来讲是没有的，需要使用一个a，这个后面进行讲解，需要使用的时候再讲解。
4、Chrome浏览器开发者工具
如何打开开发者工具呢？
之前是通过右键打开的
也有一个快捷方式是F12
其他的小技巧是：
快捷键，Ctrl + 可以调整页面或者是调试工具的字体大小；
可以通过删除某些元素来查看网页结构；
可以通过增删CSS样式来调试网页样式；
tip:这个东西可以通过学习爬虫来学习
5、浏览器渲染网页的流程
我们现在编写的包含两个东西一个是HTML，另外一个是CSS
这些东西是交给浏览器的
浏览器是如何显示出来的呢？
浏览器首先加载的是HTML
放到浏览器中，然后解析我们的HTML，从上到下解析
解析到link的时候会将我们引入的样式CSS下载下来，这里是不会等待下载成功的
这里优点多线程的意思
不会等待加载CSS直接往下面解析
并且浏览器需要考虑到元素的嵌套关系，转换成为一个树形的结构，
各种各样的树的结构，后面会讲解数据结构。
专业的词叫做DOM Tree
接下来要做的事情是添加样式，相当于当前这个光秃秃的树开始枝繁叶茂，生成最终的渲染树Render Tree，最终展示Display
当然这里没有画渲染树。
之后会进行深入的讲解。
