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

🌈个人主页: Aileen_0v0
🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法|MySQL|

💫个人格言:"没有罗马,那就自己创造罗马~"
bare of几乎没有,缺乏

文章目录

CSS

  • 层叠样式表(Cascading Style Sheets)

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

  • css控制页面的展示效果
  • html 决定页面结构
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>
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>
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">
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>
    <link rel="stylesheet" href="./demo02.css">
</head>
<body>
    <p>hello css</p>
</body>
</html>
css 复制代码
p{
    color:crimson;
    font-size: 80px;
}

Summary

相关推荐
行云流水剑12 分钟前
【学习记录】使用 Kali Linux 与 Hashcat 进行 WiFi 安全分析:合法的安全测试指南
linux·学习·安全
持久的棒棒君17 分钟前
npm安装electron下载太慢,导致报错
前端·electron·npm
KKKlucifer18 分钟前
加密通信 + 行为分析:运营商行业安全防御体系重构
网络·安全·重构
xuanwojiuxin1 小时前
linux panic-propagation
linux·运维·服务器
crary,记忆2 小时前
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
前端·webpack·angular·angular.js
门前云梦3 小时前
《C语言·源初法典》---C语言基础(上)
c语言·开发语言·学习
漂流瓶jz3 小时前
让数据"流动"起来!Node.js实现流式渲染/流式传输与背后的HTTP原理
前端·javascript·node.js
achene_ql3 小时前
select、poll、epoll 与 Reactor 模式
linux·服务器·网络·c++
藥瓿亭3 小时前
K8S认证|CKS题库+答案| 9. 网络策略 NetworkPolicy
linux·运维·docker·云原生·容器·kubernetes·cks
955.3 小时前
k8s从入门到放弃之Pod的容器探针检测
云原生·容器·kubernetes