html文件中css插入方式总结

在练习CSS的时候发现css插入方式有三种，故此总结，自己学习使用：

目录

1. CSS简介

2. 创建一个HTML文件

3. 在浏览器中查看HTML页面

4. 向HTML中引入CSS的三种方式

4.1 内部样式表

4.2 内联样式(不推荐）

4.3 外部样式表

​

引用

---

1. CSS简介

 以下是百度百科关于CSS的介绍：

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 [1] 

由此可知CSS的学习是为了展示HTML，所以我们在学习的时候应该搭配HTML文件一起学习。建议有HTML基础的人再学习CSS,或者将两部分内容结合起来一起学习。我练习代码的时候用的是Vscode，所以举例和截屏都是Vscode。内容过于详尽，适合初学的时候一步一步跟着走，不建议有使用基础的人耽误时间。以下是具体流程。

2. 创建一个HTML文件

第一步: 在合适的地方自己建一个文件夹用于后续代码存放。我在D盘用来自学的文件夹下新建了CSS-study文件夹：

第二步：然后打开Vscode,将我们谷歌创建的文件夹用鼠标拖拽到Vscode页面空白处：

再我们直接将自己创建的CSS-study文件夹拖动到Vscode中后，可以看到Vscode左侧多了一个文件夹，如下图所示：

 第三步：在文件夹下创建新的文件，当鼠标放在我们刚刚创建的文件夹上时会出现下图所示的图标，点击：

第四步：输入自定义文件名，Vscode中文件的格式由后缀决定，所以当我们想创建html文件的时候应该手动添加.html：

 输入完成后右侧就会出现刚刚创建好的文件的代码区域了：

第五步：Vscode中自动生成html代码段模板可以用快捷键 ! + tab。生成效果如下：

 第六步：在body中添加自己需要的内容即可，我在这里添加了一个标题一个段落：

代码如下： 

  
  
  
  


  
这是一个平平无奇的标题
  
这是一段平平无奇的段落，本文仅供作者自我学习并记录，禁止转载

以上就是创建并写一个HTML的详细过程了。 

3. 在浏览器中查看HTML页面

我们刚刚写了一个简单的HTML页面，想要在浏览器中查看效果，方法如下：

对于第一次使用Vscode写HTML文件的人来说，想要快速打开浏览器浏览页面，应该先下载插件。 在vsCode里先在扩展中搜索"open in browser"，并安装插件。我这里是以前已经安装过了，所以图标是设置，没有安装过的人应该是蓝色的长方形上面有“安装”字样：

 安装完之后，我们就可以方便快捷的打开浏览器了，有两种方法：

第一种是使用快捷键Alt + B打开默认浏览器，或者使用快捷键Shift + Alt + B打开指定的浏览器。之前我们写的HTML文件在浏览器中的显示如下：

另一种方法是在文件目录上鼠标右键点击，然后选择Open in Default Browser或者Open in Other Browser:

4. 向HTML中引入CSS的三种方式

向HTML中引入CSS有三种方式，分别是内部样式表，内联样式和外部样式表。不推荐使用第二种方式。看看知道就行。

4.1 内部样式表

不使用外部CSS文件，将CSS存放在HTML文件的中。直接在head部分直接输入style标签，在style里写入CSS内容。代码如下：

  
  
  
  
  


  
这是一个平平无奇的标题
  
这是一段平平无奇的段落，本文仅供作者自我学习并记录，禁止转载

我们将标题设置为皇室蓝色，在浏览器中展示如下： 

4.2 内联样式(不推荐）

不使用外部CSS文件，该样式仅影响一个元素，在HTML的body中的标签后面直接设置style属性，这种方式不推荐！代码如下：

  
  
  
  
  


  
这是一个平平无奇的标题
  
这是一段平平无奇的段落，本文仅供作者自我学习并记录，禁止转载

 我们将标题设置为红色，在浏览器中展示如下：

4.3 外部样式表

外部样式使用外部CSS文件，保存在.css文件中。需要在HTML中使用标签引入CSS外部文件。

我们先需要建立外部CSS文件。在CSS-study文件夹下新建CSS文件夹，在CSS文件夹下新建style.css文件:

建好CSS文件夹后右键选择新建文件： 

给新文件输入文件名，需要手动加.css后缀。 

 在index.html文件中将style.css文件导入进来，代码如下：

  
  
  
  
  


  

    
这是一个平平无奇的标题
    
这是一段平平无奇的段落，本文仅供作者自我学习并记录，禁止转载
  

导入CSS文件，我们在和head中添加link，引入文件，href 属性指向了一个外部样式表的位置，其中./指明当前文件的上级目录，这里href后面的以上是我们index.html文件引入了其上级目录下的CSS文件夹下的style.css。

同时将body中我们之前写的文本放入div标签中分割为一个独立的的区域，用class = “xx”来给该代码段赋名。我们这里给该段起名“div1”。

在style.css文件下给第"div1"设置样式，用.div1来指明所对应的HTML的哪一部分，div1为该段名字：

 style.css文件中的代码如下：

.div1{
  color:blueviolet;
}

 我们将标题设置为紫罗兰色,在浏览器中展示如下[2]： 

引用

[1] CSS （层叠样式表）(access time:2021/7/19)

[2] 为初学者准备的：CSS 速成 (access time:2021/7/19)