CSS学习(一) （简介,4种导入方式的对比）

最新推荐文章于 2023-10-26 17:40:43 发布

nextdoorloureed

最新推荐文章于 2023-10-26 17:40:43 发布

阅读量152

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_45845042/article/details/105449978

版权

CSS学习（一）（简介，4中导入方式的对比）

文章目录

CSS学习（一）（简介，4中导入方式的对比）
- 1，CSS简介
- 2，CSS基本写法（4种导入方式）

1，CSS简介

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言

HTML----结构 CSS----表现 JS —效果

2，CSS基本写法（4种导入方式）

方式一：内部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01</title>
<!--利用style标签编写css代码-->
    <style>
        h1{
            color:darkred;
            size: A4;
        }
    </style>
</head>
<body>
<h1>
    CSS
</h1>
</body>
</html>

方式二：外部样式-链接式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01</title>
<!--利用link标签连接css文件-->
    <link rel="stylesheet" href="css/01.css">
</head>
<body>
<h1>
    CSS
</h1>
</body>
</html>

h1{
    color:darkred;
    size: A4;
}

方式三：外部样式-导入式(不推荐使用) css2.1特有

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01</title>
    <!--import语句导入-->
    <style>
        @import "css/01.css";
    </style>
</head>
<body>
<h1>
    CSS
</h1>
</body>
</html>

方式四：行内样式（比较累赘）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01</title>
</head>
<body>
<!--style标签元素-->
<h1 style="color: green">
    CSS
</h1>
</body>
</html>

优先级比较

原则：就近原则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01</title>
<!--导入式-->
    <style>
        @import "css/01.css";
    </style>
<!--链接式-->
    <link rel="stylesheet" href="css/02.css">
<!--内部样式-->
    <style>
        h1{
            color: yellow;
        }
    </style>

</head>
<body>
<!--行内样式-->
<h1 style="color: green">
    CSS
</h1>
</body>
</html>

显示结果：行内样式 color: green
在这里插入图片描述

网页效果：
在这里插入图片描述

链接式与导入式的区别

当网页内容较多时，使用导入式时，会先显示网页骨架，在进行css样式构建（先素颜再美颜）

推荐使用链接式

nextdoorloureed

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习(一) （简介,4种导入方式的对比）

CSS学习（一）（简介，4中导入方式的对比）文章目录CSS学习（一）（简介，4中导入方式的对比）1，CSS简介2，CSS基本写法（4种导入方式）1，CSS简介层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言 ...
复制链接

扫一扫