CSS3基础认识

Q _Q

于 2022-04-25 22:29:55 发布

阅读量103

点赞数

分类专栏： CSS3 文章标签： css3 css

本文链接：https://blog.csdn.net/weixin_54021642/article/details/124416046

版权

CSS3 专栏收录该内容

42 篇文章 5 订阅

订阅专栏

CSS3基础认识

CSS：层叠式样式表(Cascading style sheets)

CSS的作用：给页面中的HTML标签设置样式

注意：如果同一标签设置了相同的属性，此时样式会被覆盖，写在最下面的生效

CSS引入方式：

1 内嵌式

书写位置：style标签

作用范围；当前页面

使用场景：小案例

注意：style标签虽然可以写在任意位置，但约定俗成写在head标签中

2 外联式

书写位置：CSS文件

作用范围；多个页面

使用场景：项目

注意：要通过link标签在网页中引入

3 行内式

书写位置：style属性中

作用范围：当前标签

使用场景：配合js使用

注意：不推荐，后面会学习js配合使用

例题：

<!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>Document</title>
    <!-- 1 内嵌式 -->
    <style>
        h1 {
            color: brown;
        }
    </style>
    <!-- 2 外联式 -->
    <link rel="stylesheet" href="1.css">
</head>

<body>
    <h1>这是一个h1标签</h1>
    <h2>这是一个h2标签</h2>
    <!-- 3 行内式 -->
    <h3 style="color: green;">这是一个h3标签</h3>

</body>

</html>

效果图：