CSS样式添加方式对比

最新推荐文章于 2024-04-06 22:43:58 发布

_xwh

最新推荐文章于 2024-04-06 22:43:58 发布

阅读量513

点赞数

分类专栏：前端知识文章标签： css html

本文链接：https://blog.csdn.net/qq_44174803/article/details/121042474

版权

前端知识专栏收录该内容

13 篇文章 1 订阅

订阅专栏

文章目录

前言
一、CSS样式添加方式？
二、使用效果展示
- 1.行内添加+内嵌方式
- 2.行内添加+外部链接
总结

前言

众所周知，html是超文本标记语言，主要负责网页中的格式和内容，一般不主要负责网页中样式的设计；那么网页中样式的设计由谁来完成呢，则是CSS的主要工作。如此一来，变便能实现内容和样式分离的效果，两者不必紧密捆绑在一起，方面内容实现多样式的切换（老渣男了……）。

一、CSS样式添加方式？

目前常见的CSS添加方式有以下三种:

1.行内添加（即在标签中添加）

一般指的是在html的标签内部属性中进行设置样式，例如：

<p style="color:blue;font-size:15px">现在正在进行CSS添加方式的测试1——行内添加方式</p>

此处在p标签的style属性中设置文本的样式，该添加方式的作用域仅为当前标签所在行。

2.内嵌方式（head中添加）

一般指的是在某个html文件中的head部分进行设置，设置方式如下所示：

	<style>
        p {
            color: red;
            font-size: 12px;
        }
    </style>

此处在head内容中加上style标签，该添加方式的作用域范围为当前整个html文件。

3.链接外部CSS文件（head中添加）

一般指的是在某个html文件中的head部分进行设置，设置方式如下所示：

<link rel="stylesheet" href="css/style.css">

此处在head内容中加上link标签，link中的属性设置为待链接的外部CSS的文件地址，该添加方式的作用范围为所有引用该CSS样式文件的html文件。

对于三种CSS样式的作用效果，可以简单记为距离CSS作用内容更远的样式会被 CSS作用内容更近的样式屏蔽。。

二、使用效果展示

1.行内添加+内嵌方式

代码如下：

<!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 添加方式对比</title>
    <!-- 内嵌样式 -->
    <style>
        p {
            color: red;
            font-size: 12px;
        }
    </style>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <h3>CSS添加方式:</h3>
    <h4>1.行内添加（即在标签中添加） 2.内嵌方式（head中添加） 3.链接外部CSS文件（head中添加）</h4>
    <hr>
    <br>
    <br>
    case 1:
    <p style="color:blue;font-size:15px">现在正在进行CSS添加方式的测试1——行内添加方式</p>
    <br><br>
    case 2:
    <p>现在正在进行CSS添加方式的测试2</p>
    <br><br>
    case 3:
    <p>现在正在进行CSS添加方式的测试3</p>
</body>

</html>

显示效果如下：
在这里插入图片描述
解释：
此处三种方式都添加上了，case1使用了行内添加方式，因此只显示行内添加的效果；而case2和case3都会受到head内容中内嵌方式和外部链接方式的CSS影响，但是由于外部链接方式离文本更近，因此把内嵌方式效果屏蔽了，因此case2和3都只显示的是外部链接方式的CSS样式效果。

2.行内添加+外部链接

代码如下：

<!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 添加方式对比</title>
    <!-- 内嵌样式 -->
    <style>
        p {
            color: red;
            font-size: 12px;
        }
    </style>
    <!-- <link rel="stylesheet" href="css/style.css"> -->
</head>

<body>
    <h3>CSS添加方式:</h3>
    <h4>1.行内添加（即在标签中添加） 2.内嵌方式（head中添加） 3.链接外部CSS文件（head中添加）</h4>
    <hr>
    <br>
    <br>
    case 1:
    <p style="color:blue;font-size:15px">现在正在进行CSS添加方式的测试1——行内添加方式</p>
    <br><br>
    case 2:
    <p>现在正在进行CSS添加方式的测试2</p>
    <br><br>
    case 3:
    <p>现在正在进行CSS添加方式的测试3</p>
</body>

</html>

效果如下：
在这里插入图片描述
解释：
此处相比于1中（前一个代码），只是注释了一行代码如下，因此在head头部发挥全局作用的是内嵌方式，因此此处case2和case3显示的都是内嵌CSS样式。

<!-- <link rel="stylesheet" href="css/style.css"> -->

总结

CSS的添加方式多种多样，可以根据自己的需求进行组合选择。
此外，CSS选择器（标签选择器、类选择器和ID选择器）知识可以参考一以下链接：
https://www.cnblogs.com/goforwards/p/8457012.html
https://www.jianshu.com/p/d2f54bc64302

_xwh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS样式添加方式对比

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、CSS样式添加方式？1.行内添加（即在标签中添加）2.内嵌方式（head中添加）3.链接外部CSS文件（head中添加）二、使用效果展示1.行内添加+内嵌方式2.行内添加+外部链接总结前言众所周知，html是超文本标记语言，主要负责网页中的格式和内容，一般不主要负责网页中样式的设计；那么网页中样式的设计由谁来完成呢，则是CSS的主要工作。如此一来，变便能实现内容和样式分离的效果，两者不必紧密捆绑在一起，方面内容实现多样
复制链接

扫一扫