【前端寻宝之路】总结学习使用CSS的引入方式

Aileen_0v0

已于 2024-03-04 20:49:56 修改

阅读量1.7k

点赞数 28

分类专栏：前端寻宝之路系列文章标签：前端学习 css 运维网络容器 docker

于 2024-03-04 20:40:06 首次发布

本文链接：https://blog.csdn.net/Aileenvov/article/details/136441555

版权

前端寻宝之路系列专栏收录该内容

12 篇文章 3 订阅

订阅专栏

](https://img-home.csdnimg.cn/images/20220524100510.png#pic_center)

🌈个人主页: Aileen_0v0
🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法|MySQL|
💫个人格言:“没有罗马,那就自己创造罗马~”

`CSS`

层叠样式表(Cascading Style Sheets)

👉CSS能够对网页中元素位置的排版进行像素级精确控制,实现美化页面的效果,能够做到页面的样式和结构分离.

css控制页面的展示效果
html 决定页面结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>hello world</p>
</body>
</html>

在这里插入图片描述

<!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>
        p{
            color: red;
            font-size:  40px;
        }
    </style>
</head>
<body>
    <p>hello world</p>
</body>
</html>

在这里插入图片描述

<!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>
        p{
            color: red;
            font-size:  40px;
        }
    </style>
</head>
<body>
    <p>hello world</p>
    <p>Aileen</p>
    <h1>你好</h1>
</body>
</html>

在这里插入图片描述

`选择器+{一条/N条声明}`

选择器(selector)决定针对谁修改使用:区分键值对,使用:区分键(property)和值(value)
声明决定修改啥
声明的属性是键值对,
selector{ property:value }

`CSS引入方式`

内部样式表

将css嵌套到html中 (通过style)标签嵌套

`行内样式表`

在这里插入图片描述

⚠ 行内样式表的优先级比内部样式表优先级高.

`外部样式表`

1.创建一个css文件
2.使用 link 标签引入 css
<link rel="stylesheet" href="/path/example.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>
    <link rel="stylesheet" href="./demo02.css">
</head>
<body>
    <p>hello css</p>
</body>
</html>

p{
    color:crimson;
    font-size: 80px;
}

`Summary`

在这里插入图片描述

](https://img-home.csdnimg.cn/images/20220524100510.png#pic_center)

Aileen_0v0

关注

28
点赞
踩
26

收藏

觉得还不错? 一键收藏
打赏
23
评论
【前端寻宝之路】总结学习使用CSS的引入方式

总结学习使用CSS的引入方式
复制链接

扫一扫

专栏目录