Ceryn

CSS 学习笔记风格提示词

11分钟阅读

活跃分钟 1访问量 1点赞量 0点击量 0

请你按照我已有的 CSS 学习笔记风格，帮我整理新的 CSS 知识点笔记，并写成适合直接放入 Obsidian 的 Markdown 内容。

笔记整体风格

  • 使用简洁、直接、偏学习记录式的中文表达。
  • 不要写得太像教材，要像个人学习笔记。
  • 先给出概念，再给出常见语法或代码示例，最后补充特点、注意事项或理解。
  • 重点内容可以使用 加粗。
  • CSS 选择器、属性、属性值、伪类、组合器、代码关键词使用反引号包裹，例如：color、.box、#app、:hover、>、display: flex;。
  • HTML 标签也使用反引号包裹，例如：<div>、<a>、<img>。
  • 适合初学者理解，不要堆太多复杂概念。
  • 可以适当补充用途、场景、注意事项和常见错误。
  • 不需要生成 YAML frontmatter，文件属性会由 Obsidian 自动生成。
  • 完成整理后，应根据正文内容总结 tags。
  • tags 的语义不能和文档所在目录重复。
  • 完成整理后，这篇文章属于 AI 写作，应在 author-type 改为 ai。
  • 完成整理后，应在 status 列表中添加 Completed。
  • status 只允许使用：Backlog、Planned、Ready、In Progress、Blocked、In Review、Completed。
  • note-sections 只允许使用 introduction、outline、main-body、lead-out key-highlight，如果笔记已经包含这些内容，就可以全部写入。
  • tag、status、note-sections 这些都是 yaml 列表数组，请采用多行数组格式

标题结构

正文优先使用以下层级：

网站

如果有权威参考资料，可以放在靠前位置，例如：

CSS 参考手册

CSS：层叠样式表 | MDN

引入

用一两句话说明这个知识点为什么存在、解决什么问题。

例如：

CSS 用来控制网页的显示效果。HTML 负责内容结构，CSS 负责让这些内容变得更清晰、更美观、更适合不同设备显示。

正文

正式解释概念和用法。

可以根据内容拆分为：

定义

使用引用块或 callout 说明核心定义，例如：

定义

CSS 规则通常由选择器和声明块组成，选择器负责找到元素，声明块负责设置样式。

或者普通引用：

CSS 的核心就是：选中网页中的元素，然后给它们添加样式。

语法

给出最常见的基础写法。

选择器 {
  属性: 属性值;
}

例如：

p {
  color: red;
  font-size: 16px;
}

如果需要配合 HTML 展示，可以先给 HTML，再给 CSS。

<p class="text">这是一段文字</p>
.text {
  color: blue;
}

例子

用具体小例子说明。

示例标题

说明这个例子在做什么。

/* 示例代码 */

常见属性

如果这个知识点涉及多个属性，可以用列表或表格整理。

属性作用
color设置文字颜色
background-color设置背景颜色
font-size设置文字大小

特点

用无序列表总结规则、特征或注意事项。

  • CSS 规则通常由选择器和声明块组成
  • 声明块写在 {} 中
  • 每条声明由属性和属性值组成
  • 属性和值之间使用冒号 :
  • 每条声明结尾建议写分号 ;
  • CSS 会受到层叠、继承、优先级影响

理解

用更口语化的方式总结这个知识点的本质理解。

例如：

可以把 CSS 理解为给 HTML 内容“化妆”和“排版”。

选择器负责找到要修改的内容，属性负责说明要改什么，属性值负责说明改成什么样。

它的作用不是改变 HTML 内容本身，而是改变内容在页面中的显示效果。

引出

如果这个知识点会连接到下一个知识点，可以简单写一句。

例如：

理解了基础语法之后，就可以继续学习 CSS 组合器，用更精确的方式选中页面元素。

后续可以结合 HTML 结构和 JavaScript 行为，完成更完整的网页效果。

代码风格

  • CSS 代码块使用 css 语言标记。
  • HTML 代码块使用 html 语言标记。
  • 代码示例要尽量短，能说明问题即可。
  • 代码中可以加入简短注释，但不要过多。
  • 如果一个知识点需要 HTML 结构配合说明，可以同时给出 HTML 和 CSS。
  • 示例优先使用真实常见场景，例如文本颜色、链接样式、背景图片、列表样式、边距、卡片布局、表单状态等。
  • CSS 属性名和属性值之间保留一个空格，例如：color: red;。
  • 选择器和 { 之间保留一个空格。
  • 每条声明独占一行。

内容组织习惯

请优先按照这个顺序写：

  1. 这个东西是什么
  2. 为什么需要它
  3. 基础语法是什么
  4. 常见用法有哪些
  5. 代码例子
  6. 注意事项
  7. 我的理解式总结

表达习惯

  • 解释选择器时，可以写成：“用于选中页面中的某些元素”。
  • 解释属性时，可以写成：“用于控制元素的某种显示效果”。
  • 解释属性值时，可以写成：“告诉浏览器这个样式具体设置成什么”。
  • 解释 class 选择器时，可以写成：“用于选中带有指定 class 的元素”。
  • 解释 id 选择器时，可以写成：“用于选中指定 id 的元素，一般用于页面中唯一的元素”。
  • 解释组合器时，要说明它和 HTML 层级结构的关系。
  • 解释伪类时，可以写成：“用于选中元素的某种状态或位置”。
  • 解释 :hover 时，要说明鼠标移上去时页面会出现什么效果。
  • 解释 :checked、:disabled、:focus 等输入伪类时，要说明它在页面中的实际状态。
  • 解释单位时，要说明 px 更固定，em、rem、%、vw、vh 更适合响应式或相对变化。
  • 解释布局时，要说清楚它解决的是元素怎么排列的问题。
  • 遇到可访问性、响应式、SEO 相关内容，要用简单话说明它的价值。

常见主题写法

基础语法

重点说明 选择器、属性、属性值、声明块。

h1 {
  color: red;
}

可以写成：h1 是选择器，color 是属性，red 是属性值。

引入方式

说明内联 CSS、内部 CSS、外部 CSS 的区别。

  • 内联 CSS 写在元素的 style 属性中
  • 内部 CSS 写在 <style> 标签中
  • 外部 CSS 写在单独的 .css 文件中，通过 <link> 引入

选择器和组合器

说明选择器是为了选中元素，组合器是为了根据 HTML 的父子、后代、兄弟关系选中元素。

常见组合器：

  • A B：后代组合器
  • A > B：子代组合器
  • A + B：相邻兄弟组合器
  • A ~ B：通用兄弟组合器

优先级

说明当多个样式同时作用到一个元素时，浏览器会根据层叠规则决定最终使用哪一个。

可以按这个顺序说明：

  1. 内联样式通常更高
  2. id 选择器高于 class 选择器
  3. class、伪类、属性选择器高于元素选择器
  4. 相同优先级时，后写的样式覆盖先写的样式
  5. !important 很强，但不建议随便用

盒模型和边距

说明每个元素都可以看成一个盒子，由 content、padding、border、margin 组成。

  • content：内容区域
  • padding：内边距
  • border：边框
  • margin：外边距

单位

说明绝对单位和相对单位的区别。

  • px：固定像素
  • %：相对于父元素
  • em：相对于当前元素字体大小
  • rem：相对于根元素字体大小
  • vw：相对于视口宽度
  • vh：相对于视口高度

伪类

说明伪类用于选中元素的状态或位置。

a:hover {
  color: red;
}

可以写成：鼠标移到链接上时，链接文字变成红色。

链接和资料

如果有权威参考资料，可以放在靠前位置，也可以放在正文中。

常用资料：

CSS 参考手册

CSS：层叠样式表 | MDN

输出要求

  • 只输出完整 Markdown 笔记内容。
  • 不要额外解释“我将如何写”。
  • 不要使用过度复杂的术语。
  • 内容要能直接复制进 Obsidian。
  • 如果我给出笔记标题，例如 CSS 盒模型，就按这个主题生成完整笔记。
  • 如果我要求“写入”，就直接整理成对应文件内容。

使用方式

之后可以这样提问：

请按照我的 CSS 学习笔记风格，整理一篇 [[CSS 盒模型]]

或者：

按照 CSS 学习笔记风格，帮我写入 [[CSS Flexbox]]

关系图谱