大前端: 入门 CSS 的编程世界~
大家好，我是小 Bob,一个关注软件领域而又执着于计算机底层的开发者~
相信每个学理工科的都怀有一个理工科的梦。
当然小编我也不例外，自从入门计算机，从开始学习 C 语言到数据结构 C++和数据结构等。还记得去年的暑假，小编自己搭建了一个属于自己的博客，也很好奇它的实现。于是，渐渐的对前端也是更加好奇。
于是，在极客时间 APP 上，我看到了它所拥有的全栈学习，刚好学校也还没教前端，于是趁着暑假便开始了前端学习之旅。
作为 IT 人，我想大家都知道前端三的大件:HTML、CSS、JS。这里小编给大家介绍的是 CSS。
一.什么是 CSS？
CSS 英文全称为 Cascading Style Sheets，中文名为级联样式单，我们一般也称为层叠样式表单。
简单的说，CSS 作为一种样式表现语言，它可以对网页结构语言（HTML）进行补充，就和好朋友一样一起完成对网页的布局。主要用于对网页样式的定义，例如布局、颜色、文本等的设计，从而精确控制页面中的每一个元素。
比如在代码中，我们会学到一些背景属性：color、image、repeat 等等；还有字体大小、边框设置以及效果渲染。
二.CSS 入门
这里小编带大家进行简单的入门。
1.下载 VScode
首先推荐一款宇宙级好用的编辑器，用它来敲代码、写文档、甚至上班摸鱼看股票都行，它就是微软的 VScode，切记不要以为 VScode 是 VS 哦。此前小编以为它们是一样的，VS 下载下来不仅很大也木有小编想要的效果，所以一定要看清是 VScode 哦~
首先，找到 VScode 的官网：https://code.visualstudio.com/
然后点击上图中的 Download 下载：
在上图中选择合适自己的版本下载即可。最后便是傻瓜式安装啦~这里小编提醒大家下载后可以下一个中文简体的插件，如下：在搜索栏中搜索 Chinese 便会找到简体中文的插件啦~
到这里便把我们需要用到的编辑器下载好啦！
2.第一个 CSS 程序
接下来我们便可以开始写一个简单的 CSS 程序啦~
首先，我们先介绍 CSS 的引入。至于为什么要先介绍 CSS 的引入呢？之前我们也有介绍过，HTML 是网页的框架，那么 CSS 和 JS 其实更多的是修饰和美观的作用。所以前端人必学三大件，并且在布局某些网页时，通常会将 HTML、CSS、JS 的代码分别写在不同的文件里，方便我们在后期进行修改和整理。
那么这就需要我们在 HTML 的代码里嵌入一些 CSS 和 JS 的代码，即引入。
CSS 的引入:
内联模式:可以将 CSS 样式直接写到 HTML 元素的 style 属性中。
内部模式:将 CSS 样式写到<style>标签中。
引入外部模式:精确通过<link>元素引入外部的一个 CSS 文件。
导入外部模式:通过在<style>元素中，使用 @import 导入一个外部的 CSS 文件。
说到这里，那么我们该如何具体实现呢？
首先，我们先打开 VScode,新建一个 HTML 文件，输入 html 选择 html:5 快速弄出代码块:
To：教大家一个简单的方法，如上图。首先打开 VScode，按快捷键 Ctrl+N 新建一个文件，再按 Ctrl+S 快速保存到指定的文档，同时将文件名和格式改好。然后便直接输入 html，选择 html:5 即可快速调出 HTML 的通用代码块。
HTML 代码块如下：
那么现在简单的写一个引入 CSS 的代码：
现在新建一个 CSS 文件，如：demo1.css 文件。并写入以下代码：
保存后用游览器打开上面的 test.html 文件即可。
最后，我们在 CSS 文件中，将 h1 的标题的颜色有所修改。
三.CSS 进阶
关于 CSS 的进阶，我们会学到 CSS 的选择器和盒模型。
关于选择器的种类也是有很多，以后有机会再给大家一一描述。这里我们可以了解一下什么是盒模型。
1.盒子模型
盒子模型是对页面进行布局所需要用到非常重要的一部分。盒子模型我们可以简单理解为是一个盒子，它包括边距（margin）、边框（border）、填充（padding）、内容（content）、背景（backbround），下面我们会对每一部分进行简单的说明。
margin：清除边框外的区域，外边距是透明的。
border：围绕在内边距和内容外的边框。
padding：清除内容周围的区域，内边距是透明的。
content：盒子的内容，显示文本和图像。
backbround：背景包含背景颜色（background-color）、背景图（background-image），给整个盒子添加上背景样式。
比如：
我们来简述一下这张图：图中最内部的框是元素的实际内容，也就是元素框，紧挨着元素框外部的是内边距 padding，其次是边框，然后最外层是外边距，整个构成了框模型。通常我们设置的背景显示区域，就是内容、内边距、边框这一块范围。而外边距 margin 是透明的，不会遮挡周边的其他元素。
另外，我们还需要知道元素框的总宽度 = 元素的 width + padding 的左边距和右边距的值 + margin 的左边距和右边距的值 + border 的左右宽度
元素框的总高度 = 元素的 height + padding 的上下边距的值 + margin 的上下边距的值 ＋ border 的上下宽度
2.盒子模型的设置
最后的最后，我们需要了解对盒子模型的设置。当我们在编写代码时，只要一个盒子被选中，就需要考虑它的属性问题，比如需要给盒子设置哪些属性，并且综合考虑是否需要并排显示，最后再考虑美化问题。
内容区域：width 和 height
内填充区域： padding
边框： border
外填充区域：margin
背景： background
我们知道这些就好比知道 一张网页是一堆的盒子堆积起来的。这里说的盒子就是标签，也是矩形。
嗯，说到这里，我想这篇文章也只能给大家做一个简单的科普，要是想要入门 CSS，还是需要自己去找相关的书籍和视频，俗话说得好：师傅领进门，修行靠个人~
CSS 的学习相较于其它的语言比如 C、C++或者 Python，没有那么繁琐，但也有各自不同的地方，比如我们学完 CSS 便能直接独自修改博客了，也可以根据自己的喜好去创建一个你自己喜欢的博客主题。
版权声明: 本文为 InfoQ 作者【Bob】的原创文章。
原文链接:【http://xie.infoq.cn/article/a0159a7951777669db44c6141】。
本文遵守【CC-BY 4.0】协议，转载请保留原文出处及本版权声明。
潜心修炼~ 2021.03.22 加入
有幸与计算机相遇，忠于热爱~ InfoQ签约作者~
评论