第4节 css基础语法（4）

今天介绍的内容如下：网站文件架构、编辑器的使用、css的宽和高以及添加背景色。此节以后，将着重介绍每个css样式，100百个左右的关键css样式需要记住，其余需要了解有印象。

1、网站文件的架构

一个网站是由css、js、html、img(图片)四个大类组成，所以我们的网站文件夹也就是由这四个子文件夹组成。

上图就是标准的网站文件结构。3个文件夹+html页面，html页面引用3个文件夹里边的内容，从而构成页面。

2、使用编辑器创建一个html

下载打开Visual Studio Code，界面如下，我们按ctr+n新建文档页面

我们快速创建标准的html文件结构，不在需要一个一个的去敲打。输入！号 然后按回车键，就可以了。注意的是！要在英文输入法时输入的才可以。

此时我们就创建了一个html文件，按ctr+s进行保存，文件名命名为hello-html.

3、、css的宽和高以及添加背景色

我们打开刚刚创建的hello-html文件，在body里写入div(tip:所有html代码必须写在body当中)

class="a"这是div的名字，我们在css文件中就可以为他添加样式。

本节需要记住的css样式代码：width(宽度)、height(高度)、background(背景)。

应用：在html文档的标签中输入标签，这里边可以输入css样式，并且控制html的输出样式，我们称之为内联样式。

使用.a来选择div名字为a的所有div。我们把.a称之为选择器。

.a

此时div的宽度是100px，高度是100px,颜色是红色，网页的单位是px（像素)，而background的值可以是三种类型：rbg(255,255,255),颜色码（#eee）,英文值（red）。

保存打开，如下图

这就是一个div块了，里边还可以写文字，插入图片，视频等等。

本节内容就到这里了，多加联系吧。

*预告：下节div中引入图片，使用外联样式。