大家好，我是小Bob,一个关注软件领域而又执着于计算机底层的开发者~

相信每个学理工科的都怀有一个理工科的梦。

我也不例外，自从入门计算机，从开始学习C语言到数据结构C++和数据结构等。还记得去年的暑假，我自己搭建了一个属于自己的博客，也很好奇它的实现。于是，渐渐的对前端也是更加好奇。

在华为云这里，我看到了华为云的全栈学习，刚好学校也还没教前端，于是趁着暑假便开始了前端学习之旅。

前端三大件分别为HTML、CSS、JS。这里小编给大家介绍的是CSS。

CSS英文全称为Cascading Style Sheets，中文名为级联样式单，一般也称为层叠样式表单。

简单来说，CSS是一种样式表现语言，它是对网页结构语言（HTML）的补充，就和好朋友一样一起完成对网页的布局。主要用于对网页样式的定义，例如布局、颜色、文本等的设计，从而精确控制页面中的每一个元素。

比如在代码中，我们会学到一些背景属性：color、image、repeat等等；还有字体大小、边框设置以及效果渲染。

这里小编带大家进行简单的入门。

首先推荐一款宇宙级好用的编辑器，用它来敲代码、写文档、甚至上班摸鱼看股票都行，它就是微软的VScode，此VScode不是VS哦。此前小编以为它们是一样的，然后下载下来不仅很大也木有小编想要的效果，所以一定要下VScode哦~

• 首先，找到VScode的官网：https://code.visualstudio.com/
  
• 然后点击上图中的Download下载：
  
• 在上图中选择合适自己的版本下载即可。
• 最后便是傻瓜式安装啦~这里小编提醒大家下载后可以下一个中文简体的插件，如下。在搜索栏中搜索Chinese便会找到简体中文的插件啦~
  

到这里我们便把写前端需要的编辑器下载好啦！

接下来我们便可以开始写一个简单的CSS程序啦~

首先，我们先介绍CSS的引入。至于为什么要先介绍CSS的引入呢？之前我们也有介绍过，HTML是网页的框架，那么CSS和JS其实更多的是修饰和美观的作用。所以一般写前端会将HTML、CSS、JS的代码分别写在不同的文件里，方便我们在后期的修改和整理。

那么我们在HTML代码里就要嵌入CSS和一些JS的代码，即引入。

• CSS的引入

1. 内联模式
   将CSS样式直接写到HTML元素的style属性中
2. 内部样式
   将CSS样式写到<style>标签中
3. 引入外部样式
   精确通过<link>元素引入外部的一个CSS文件
4. 导入外部样式
   通过在<style>元素中，使用@import导入一个外部的CSS文件

怎么操作呢？

• 打开VScode,新建一个HTML文件，输入html选择html:5快速弄出代码块:
  
• 这里教大家一个简单的方法，如上图。首先打开VScode，按快捷键Ctrl+N新建一个文件，再按Ctrl+S快速保存到指定的文档并且将文件名和格式改好。
• 之后我们便直接输入html，选择html:5即可快速调出HTML的代码块。
• 

HTML代码块如下：

那么现在简单的写一个引入CSS的代码：

• 下面为一个test.html文件。

• 现在新建一个CSS文件，如：demo.css文件。并写入以下代码：

保存后我们用游览器打开上面的test.html文件即可。在CSS文件中，我们将h1的标题的颜色有所修改。

关于CSS的进阶，包括CSS的选择器和盒模型。

关于选择器的种类也是有很多，以后有机会再给大家一一描述。这里我们大致了解一下什么是盒模型。

盒子模型是对页面进行布局所需要使用的非常重要的一部分。盒子模型本质上就是一个盒子，它包括边距（margin）、边框（border）、填充（padding）、内容（content）、背景（backbround），下面对每一部分进行简单的说明。

• margin：清除边框外的区域，外边距是透明的。
• border：围绕在内边距和内容外的边框。
• padding：清除内容周围的区域，内边距是透明的。
• content：盒子的内容，显示文本和图像。
• backbround：背景包含背景颜色（background-color）、背景图（background-image），给整个盒子添加上背景样式。

比如：

我们来简述一下这张图：图中最内部的框是元素的实际内容，也就是元素框，紧挨着元素框外部的是内边距padding，其次是边框，然后最外层是外边距，整个构成了框模型。通常我们设置的背景显示区域，就是内容、内边距、边框这一块范围。而外边距margin是透明的，不会遮挡周边的其他元素。

那么，元素框的总宽度 = 元素的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度；

元素框的总高度 = 元素的height + padding的上下边距的值 + margin的上下边距的值 ＋ border的上下宽度。

其次，我们需要了解的便是对盒子模型的设置。当我们在编写代码时，只要一个盒子被选中，就要考虑它的属性问题，比如盒子需要设置哪些属性，并且考虑是否需要并排显示，最后再考虑美化问题。

1. 内容区域：width 和 height
2. 内填充区域： padding
3. 边框： border
4. 外填充区域：margin
5. 背景： background

好比一张网页就是一堆的盒子堆积起来的。这里说的盒子就是标签，也是矩形。

CSS的学习相较于其它的比如C、C++或者Python，没有那么繁琐，但也各有各自不同的地方，比起学习其它语言，CSS能给我最直接的效果便是可以自己可以独自修改博客了，也可以根据自己的喜好去创建一个你自己喜欢的博客风格。

最后，我想你肯定也想自己去新建一个属于自己的博客了吧，那顺便也可以将我的CSS也学了哦~嘿嘿，最后的最后，关于CSS的学习入门介绍暂时就到这里了，后续还会继续更新哦，敬请期待~

备注：本文来自于华为云内容共创系列。