关于css是什么，详细的介绍大家自行查阅资料。比如昨天的的只有HTML文件那些内容的话，显示的内容很不友好，从上到下的顺序显示，从左到右看，只有左边有内容，右边是空的。这里如何排版布置就是CSS的作用。
至于学习路线，我这里列一下css的学习脑图
在HTML怎么使用CSS
一般有两种：内联样式和外部样式表
内联样式是什么，就是直接在HTML标签中使用style属性来定义元素样式：
例如
<p style="color: blue; font-size: 20px;">希里安运维开发 </p>
P与元素被设置为蓝色文本，字体大小为20px，这个方法的话后期代码多了看起来会比较乱，不推荐。
外部样式表，就是将样式代码单独放在一个后缀为.css的文件中，在HTML头部区域添加一个link元素，应用创建的.css文件,这个方法经常用。
代码语言：javascript复制<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
在css中编写规则
.p {
color: red;
font-size: 20px;
}Css的解析过程是什么样的呢？
放一张MDN上的图片展示
再说说具体流程：
1、浏览器载入HTML文件
2、HTML转换为DOM对象
3、浏览器拉取相关资源，比如样式、图片、音视频
4、拉取到css进行解析，根据选择器（element、class、id）不同，分到不同容器，浏览器根据选择器将不同的规则应用到DOM节点中再添加样式
5、规则应用于渲染树，渲染对应的结构布局
6、屏幕展示
简单来说：
读取文件-样式计算-布局-绘制
直接上案例：
这是基于昨天HTML基础上体检css的简单样式，有颜色有大小。
再说一下比较常用的基础点：
1、选择器
用于指定应用样式的HTML元素，就是咱学过那么多HTML标签内容，你具体要给那个地方应用什么样式，得有个明确的指示，就像指路标一样。
一般有以下几种：
标签选择器：通过标签名称来选择HTML元素。例如，要选择所有段落元素
代码语言：javascript复制p {
color: red;
}类选择器：通过类名来选择HTML元素。例如，要选择所有具有"class"属性且值为"example"的元素
代码语言：javascript复制.example-class {
font-size: 16px;
}ID选择器：通过ID来选择HTML元素。例如，要选择具有"id"属性且值为"header"的元素，但这个名字在这个文档内独一无二的。
代码语言：javascript复制#header {
background-color: blue;
}2、属性和值
样式由属性和值组成。属性定义了要设置的样式类型，而值则表示该样式的设置。
背景颜色
代码语言：javascript复制background-color:blue；字体大小
代码语言：javascript复制Font-size：20px；文本对齐方式：
代码语言：javascript复制text-align: center;（居中对齐）3、盒子模型
就是把HTML当成一个大房间，里面有一个一个的小房间，这个就是盒子模型。
包括内容、边框、内边距、外边距
宽度和高度：width和height属性用于定义HTML元素的宽度和高度。例如，以下代码将一个div元素的宽度设置为500像素，高度设置为300像素：
代码语言：javascript复制div {
width: 500px;
height: 300px;
}边框：border属性用于定义HTML元素的边框样式、宽度和颜色。例如，以下代码将一个图像元素的边框设置为黑色、宽度为2像素、实线样式：
代码语言：javascript复制img {
border: 2px solid black;
}内边距和外边距：padding和margin属性用于定义HTML元素的内边距和外边距。例如，以下代码将一个段落元素的内边距设置为10像素，外边距设置为20像素：
代码语言：javascript复制p {
padding: 10px;
margin: 20px;
}还是上实例：
上面文字位置、颜色、还有一个类似方框的容器，都是因为有CSS作用。
4、再说说布局
利用最简单的三栏布局
代码语言：javascript复制<style>
.left{
float:left;
width:200px;
background-color: #eee;
padding:10px;
}
.center{
margin:0 220px;
background-color: #f5f5f5;
height:300px;
padding:10px;
}
.right{
float:right;
width:200px;
background-color: #ddd;
padding:10px;
}
</style>
<div class="left">左栏</div>
<div class="center">中间</div>
<div class="right">右栏</div>Flexbox 是一种非常有用的布局方式，它可以让元素按照一定规则排列，可以方便地实现水平居中、垂直居中等效果。
代码语言：javascript复制<style>
.container{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
</style>
<div class="container">
<div>这是一个垂直居中的布局</div>
</div>直接看例子
还有grid布局，可以实现多行多列的网格布局
代码语言：javascript复制<style>
.container{
display:grid;
grid-template-columns:repeat(3, 1fr);
grid-template-rows:repeat(3, 1fr);
gap:10px;
}
.item{
background-color:#ddd;
height:100%;
}
</style>
<div class="container">
<div class="这是grid布局">1</div>
<div class="这是grid布局">2</div>
<div class="这是grid布局">3</div>
<div class="这是grid布局">4</div>
</div>
以上是三种基本布局方式，还有其他的布局，咱们后面再慢慢来讲。
好了，关于CSS的内容，今天就说到这里，基础的东西相信大家只用花一点点时间就能掌握，关键在于如何灵活使用到自己的项目。在使用中不断回顾复习就行。后面关于CSS的知识在项目中不断复习讲解。
感兴趣的同学可以后台回复前端，获取相关的学习资料，别忘了点赞关注呀。
END
