前端CSS的三种样式使用

最新推荐文章于 2024-01-09 20:48:14 发布

just_花生

最新推荐文章于 2024-01-09 20:48:14 发布

阅读量372

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/zhiyinweini3/article/details/104365034

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

背景：学习前端知识，自己做页面
目的：学习前端知识
组网图：不涉及
工具：vscode1.41.0
简介：
前端CSS有三种样式：
内联样式：

 <!-- style属性定义CSS样式 - CSS样式属性 ：样式属性值 -->
<h1 style="color: #c9394a">花花的世界</h1>

内嵌样式：

    <!-- 
        在<head>标签中，新增<style>标签
        在<style>标签中编写CSS样式
     -->
    <style>
        h2 {
            color:blue;
        }
    </style>

外联样式：

 <!-- 
        1.创建一个CSS文件（扩展名是.css）
        2.在<head>标签中，新增<link>标签，然后引入CSS文件
     -->
<link rel="stylesheet" href="01.css">

接下来代码演示：
第一种，在vscode新建test.html，新建HTML5模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>huatest</title>
</head>
<body>
    <h1 style="color: #c9394a">花花的世界</h1>
    <h2>花花的世界</h2>
    <h3>花花的世界</h3>
    <h4>花花的世界</h4>
    <h5>花花的世界</h5>
    <h6>花花的世界</h6>
</body>
</html>

使用浏览器打开如下：
在这里插入图片描述
第二种，演示内联样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>huatest</title>
    <style>
        h2 {
            color:blue;
        }
    </style>
</head>
<body>
    <!-- style属性定义CSS样式 - CSS样式属性 ：样式属性值 -->
    <h1 style="color: #c9394a">花花的世界</h1>
    <h2>花花的世界</h2>
    <h3>花花的世界</h3>
    <h4>花花的世界</h4>
    <h5>花花的世界</h5>
    <h6>花花的世界</h6>
</body>
</html>

使用浏览器打开如下：
在这里插入图片描述
第三种，外联样式：
新建01.css上面演示代码在一个文件夹。如下：

在01.css文件输入如下代码

h3 {
    color: yellow;
}

在01.html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>huatest</title>
    <style>
        h2 {
            color:blue;
        }
    </style>
    <link rel="stylesheet" href="01.css">
</head>
<body>
    <!-- style属性定义CSS样式 - CSS样式属性 ：样式属性值 -->
    <h1 style="color: #c9394a">花花的世界</h1>
    <h2>花花的世界</h2>
    <h3>花花的世界</h3>
    <h4>花花的世界</h4>
    <h5>花花的世界</h5>
    <h6>花花的世界</h6>
</body>
</html>

使用浏览器打开如下：
在这里插入图片描述
最后，附所有代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>huatest</title>
    <style>
        h2 {
            color:blue;
        }
    </style>
    <link rel="stylesheet" href="01.css">
</head>
<body>
    <!-- style属性定义CSS样式 - CSS样式属性 ：样式属性值 -->
    <h1 style="color: #c9394a">花花的世界</h1>
    <!-- 
        在<head>标签中，新增<style>标签
        在<style>标签中编写CSS样式
     -->
    <h2>花花的世界</h2>
    <!-- 
        1.创建一个CSS文件（扩展名是.css）
        2.在<head>标签中，新增<link>标签，然后引入CSS文件
     -->
    <h3>花花的世界</h3>
    <h4>花花的世界</h4>
    <h5>花花的世界</h5>
    <h6>花花的世界</h6>
</body>
</html>

just_花生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端CSS的三种样式使用

背景：学习前端知识，自己做页面目的：学习前端知识组网图：不涉及工具：vscode1.41.0简介：前端CSS有三种样式：内联样式： <h1 style="color: #c9394a">花花的世界</h1>内嵌样式： <!-- 在&...
复制链接

扫一扫