css

CSS 简介

• CSS：层叠样式表，用来控制网页的样式和布局。
• 可以写在 <style> 标签内，也可以写在单独的 .css 文件中。

p {
    color: red;
}

前端样式表

⚠ Switch to EXCALIDRAW VIEW in the MORE OPTIONS menu of this document. ⚠

Text Elements

p { color: red; }

属性

属性名

属性值

选择器

指向原始笔记的链接

---

CSS 引入方式

方式	写法	适用场景
内嵌式	<style> p { color: red; } </style>	单个页面，样式较少
外联式	<link rel="stylesheet" href="./my.css">	多个页面共用样式
行内式	<div style="color: green;">文字</div>	临时、单独修改一个元素

---

选择器

1. 标签选择器

• 直接写标签名（如 p、div）
• 选中页面上所有该标签，无论嵌套多深

p {
    color: red;
}

2. 类选择器

• 标签上必须有 class 属性
• 一个标签可以有多个类名（空格隔开），如 class="box red"
• 多个标签可以用同一个类名

.box {
    color: red;
}
.size {
    font-size: 20px;
}

<div class="box">红字</div>
<div class="box size">红字 + 大号</div>

3. id 选择器

• 标签上的 id 属性，一个页面内 id 应该唯一
• 一个标签只能有一个 id

#header {
    background: black;
}

<div id="header">顶部</div>

⚠️ 不要给多个元素写同一个 id，虽然不会报错，但会带来维护问题。

4. 通配符选择器

• * 选中页面所有标签
• 极少单独使用，通常用于清除默认边距

* {
    margin: 0;
    padding: 0;
}