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

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

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

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

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

一.什么是CSS？

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

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

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

二.CSS入门

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

1.下载VScode

首先推荐一款宇宙级好用的编辑器，用它来敲代码、写文档、甚至上班摸鱼看股票都行，它就是微软的VScode，此VScode不是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样式写到 -->

>

>

     >

CSS的style标签

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

h1{

color: pink;

}

保存后我们用游览器打开上面的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的学习相较于其它的比如C、C++或者Python，没有那么繁琐，但也各有各自不同的地方，比起学习其它语言，CSS能给我最直接的效果便是可以自己可以独自修改博客了，也可以根据自己的喜好去创建一个你自己喜欢的博客风格。

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

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

CSS HTML

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。