css基础

莎萌玩家

于 2023-03-21 12:49:09 发布

阅读量615

点赞数 3

分类专栏： web全栈开发文章标签： css html 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_73344153/article/details/129686017

版权

1 CSS介绍

CSS 的意思为 Cascading Style Sheets，中文名是层叠样式表。

CSS 是由大名鼎鼎的 W3C 中 CSS 工作组来发布以及维护

CSS 作用是修饰 HTML 和 XML 的标记语言

CSS 属于浏览器解释语言，它可以由浏览器直接执行，不用再进行编译

CSS 是前端入门的必修课，运用它可以让我们的页面更加美观

2 CSS引入方式

2.1 行内样式

行内样式：将样式直接写在标签上，需要使用style属性。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--行内样式-->
    <p style="color: green;">我是一个段落</p>
    <p style="color: blueviolet;">我是一个段落</p>
    <p style="color: plum;">我是一个段落</p>
</body>
</html>

2.2 内联样式

内联样式：将页面内容与表现形式进行分离，方便对样式进行统一管理。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--使用style标签写在head标签内-->
    <style>
        /* 标签选择器 */
        p{
            color: green;
            font-size: 18px;
        }
        div{
            color: #3D7FBB;
            font-size: 59px;
        }
    </style>
</head>
<body>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <div>
        我是div标签
        我是div标签
        我是div标签
    </div>
</body>
</html>

2.3 外联样式

对内联样式进行进一步的抽离，方便多个html页面共用一个样式。

用法：创建一个CSS文件，需要该样式的HTML直接引用样式即可。

示例：

CSS文件

HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  link引入  -->
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <div>
        我是div标签
        我是div标签
        我是div标签
    </div>
</body>
</html>