前端研习录（02）——CSS内联样式、内部样式及外部样式

清风不渡

已于 2022-06-21 11:16:30 修改

阅读量485

点赞数

分类专栏：前端研习录文章标签：前端 css html

于 2022-06-21 11:09:49 首次发布

本文链接：https://blog.csdn.net/WXKKang/article/details/125386796

版权

前端研习录专栏收录该内容

44 篇文章 3 订阅

订阅专栏

版权声明

本文原创作者：清风不渡
博客地址：https://blog.csdn.net/WXKKang

一、CSS由什么构成

重拾前端记忆，记录学习笔记，现在进入CSS部分，CSS的唯一作用就是美化我们的网页，通常由选择器+一条或多条声明组成，如下：

选择器{
	声明:声明值;
	声明:声明值;
	声明:声明值;
}

注意：声明与声明值之间用“：”隔开，多个声明之间用“；”隔开

二、内联样式

内联样式直接在标签内通过用style的方式实现，如下：

<p style="color: blueviolet;font-size:20px">我是内联样式</p>

缺点：内联样式缺乏整体性和规划性，不利于维护，不提倡

三、内部样式

内部样式通常在<head>标签中通过<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">
    <title>清风不渡</title>

    <style>
        p{
            color: red;
            font-size: 40px;

        }
    </style>
</head>
<body>
    
    <h3>内部样式</h3>

    <p>我是内部样式</p>

</body>
</html>

缺点：单个页面内的css代码具有统一性和规划性，便于维护，但是在多个页面之间容易混乱

四、外部样式

在html文档外部建立css文档，通过link的方式引入html文档，然后在css文档中编写css代码，如下：

p{
	color: blue;
    font-size: 60px;
}

<!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>清风不渡</title>

    <!--
        引入css文件
    -->
    <link rel="stylesheet" href="./css/one.css">

</head>
<body>
    
    <h3>外部样式</h3>

    <p>我是外部样式</p>

</body>
</html>

优点：代码模块化管理，复用率高，维护方便

清风不渡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端研习录（02）——CSS内联样式、内部样式及外部样式

重拾前端记忆，记录学习笔记，现在进入CSS部分，CSS的唯一作用就是美化我们的网页，通常由选择器+一条或多条声明组成，如下：二、内联样式内联样式直接在标签内通过用style的方式实现，如下：三、内部样式内部样式通常在标签中通过标签进行声明，如下：四、外部样式在html文档外部建立css文档，通过link的方式引入html文档，然后在css文档中编写css代码，如下：......
复制链接

扫一扫