第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中引入图片,使用外联样式。

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180522G1B2YN00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券