CSS的三种引入方式——三种书写CSS的方式

他咔咔咔

已于 2024-07-17 22:55:25 修改

阅读量172

点赞数 1

分类专栏： CSS 文章标签： css 前端

于 2024-07-17 22:52:51 首次发布

本文链接：https://blog.csdn.net/weixin_64294248/article/details/140507480

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、概念

CSS是组成网页的重要部分，一种用于设置网页外观（表现）的文档，CSS不是一种编程语言。CSS（英文全称：Cascading Style Sheets），意为层叠样式表，CSS主要用于美化页面，我们平时所看到的界面效果，大多都离不开CSS样式。

CSS的语法为：

选择器 {
     属性：属性值;
}

二、三种引入CSS的方式

（一）内嵌样式

也就是直接在需要被修饰的html文件中书写CSS，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /* 1）内联样式 */
        .item{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    
</body>
</html>

（二）行内样式

也就是在所修饰的标签中书写样式，代码如下：

<body>
    <!-- 2) 行内样式 -->
    <div style="width: 120px;height: 120px;background-color: blue;"></div>

</body>

（三）外部引入样式

也就是在其他目录下（一般在工作目录下创建CSS文件夹，然后将.css文件放在该文件夹中）引入CSS文件，需要用link标签，<link rel="stylesheet" href="./xx.css">引入外部文件，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
    <!-- 3) 外联样式 -->
    <link rel="stylesheet" href="./app.css">
    <div id="box"></div>  
</body>
</html>

三、三种引入CSS的方式代码演示

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 1）内联样式 */
        .item {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="item"></div>

    <!-- 2) 行内样式 -->
    <div style="width: 120px;height: 120px;background-color: blue;"></div>

    <!-- 3) 外联样式 -->
    <link rel="stylesheet" href="../app.css">
    <div id="box"></div>

</body>

</html>

app.css的代码如下：

#box{
    width: 140px;
    height: 140px;
    background-color: green;
}

最终效果如下，三种方式的样式均能正常显示。

他咔咔咔

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS的三种引入方式——三种书写CSS的方式

CSS是组成网页的重要部分，一种用于设置网页外观（表现）的文档，CSS不是一种编程语言。CSS（英文全称：Cascading Style Sheets），意为层叠样式表，CSS主要用于美化页面，我们平时所看到的界面效果，大多都离不开CSS样式。
复制链接

扫一扫