html文件中css插入方式总结

最新推荐文章于 2024-05-16 16:33:10 发布

茱迪chen

最新推荐文章于 2024-05-16 16:33:10 发布

阅读量3.3k

点赞数 10

分类专栏：自学记录 # HTML 文章标签： html css vscode

本文链接：https://blog.csdn.net/qq_44665162/article/details/118890143

版权

自学记录同时被 2 个专栏收录

6 篇文章 1 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

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

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中添加自己需要的内容即可，我在这里添加了一个标题一个段落：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS study</title>
</head>
<body>
  <h1>这是一个平平无奇的标题</h1>
  <p>这是一段平平无奇的段落，本文仅供作者自我学习并记录，禁止转载</p>
</body>
</html>

以上就是创建并写一个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文件的<style></style>中。直接在head部分直接输入style标签，在style里写入CSS内容。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    h1{
      color: royalblue;
    }
  </style>
  <title>CSS study</title>
</head>
<body>
  <h1>这是一个平平无奇的标题</h1>
  <p>这是一段平平无奇的段落，本文仅供作者自我学习并记录，禁止转载</p>
</body>
</html>

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

4.2 内联样式(不推荐）

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
  </style>
  <title>CSS study</title>
</head>
<body>
  <h1 style="color: red;">这是一个平平无奇的标题</h1>
  <p>这是一段平平无奇的段落，本文仅供作者自我学习并记录，禁止转载</p>
</body>
</html>

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

4.3 外部样式表

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./CSS/style.css">
  <title>CSS study</title>
</head>
<body>
  <div class="div1">
    <h1>这是一个平平无奇的标题</h1>
    <p>这是一段平平无奇的段落，本文仅供作者自我学习并记录，禁止转载</p>
  </div>
</body>
</html>

导入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)

茱迪chen

关注

10
点赞
踩
42

收藏

觉得还不错? 一键收藏
0
评论
html文件中css插入方式总结

直接将我们创建的CSS-study文件夹拖动到vsCode中即可，可以看到vsCode左侧多了一个文件夹，如下图所示：vsCode中自动生成html代码段模板可以用快捷键 ! + tab。生成效果如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-eq...
复制链接

扫一扫

专栏目录