DevNull 知识库

Appearance

CSS 基础 ​

HTML 篇搭出了页面骨架——白底黑字、没有间距、挤在一起。CSS 解决"好不好看"的问题：标题多大、间距多宽、边框什么颜色、按钮什么样式。

CSS 的工作方式就三步：选中元素 → 给元素设样式 → 处理多个样式冲突时的优先级。

一、引入方式 ​

CSS 有三种写法。行内样式直接写在标签的 style 属性上，临时验证方便但难维护；页面内部样式写在 <head> 里的 <style> 标签中，适合很小的单页示例；外部样式文件最常用——单独一个 .css 文件，HTML 通过 <link> 引入：

html
<!-- index.html -->
<link rel="stylesheet" href="style.css">
css
/* style.css */
h1 {
  color: #111827;
}

p {
  color: #4b5563;
}

HTML 管结构，CSS 管样式，文件拆开后各自清晰。

二、选择器 ​

选择器决定"选中谁"。花括号里写样式声明：

css
p {
  color: #374151;
}

选中所有 <p> 标签，文字设成深灰色。常用选择器：标签选择器（p 选中所有 <p>）、类选择器（.note 选中 class="note" 的元素）、ID 选择器（#title 选中 id="title" 的元素）、后代选择器（.card p 选中 .card 里面的 <p>）、分组选择器（h1, h2 同时选中两者）。

html
<h1 id="page-title">文章管理</h1>
<p class="note">这是一条普通说明。</p>
<p class="note warning">这是一条提醒。</p>
css
#page-title { color: #111827; }
.note { color: #374151; }
.warning { color: #b45309; }

class 可以重复使用，一个元素也能写多个 class（空格分隔）。id 通常一个页面里唯一。日常样式主要用 class，id 留给锚点、脚本定位或少量唯一元素。

三、层叠规则 ​

CSS 的 C 是 Cascading（层叠）。同一个元素被多条规则命中时，浏览器按优先级决定谁生效。大致优先级：行内样式 > ID 选择器 > 类选择器 > 标签选择器。优先级相同时，后写的覆盖先写的。

css
p { color: #4b5563; }       /* 标签选择器，优先级低 */
.note { color: #2563eb; }   /* 类选择器，优先级高 */

<p class="note"> 同时被两条规则命中，最终是蓝色——类选择器比标签选择器更具体。CSS 文件变长后，重复选择器和后写覆盖很常见，排查时浏览器开发者工具的 Styles 区域会显示哪些规则被覆盖了（划掉的线）。

四、盒模型 ​

浏览器里每个元素都是一个盒子。盒子从内到外四层：内容 → 内边距（padding）→ 边框（border）→ 外边距（margin）。

css
.card {
  width: 240px;
  padding: 16px;        /* 内容和边框之间的距离 */
  border: 1px solid #d1d5db;  /* 边框 */
  margin: 24px;         /* 和外部元素之间的距离 */
}

默认情况下 width 只算内容区域，padding 和 border 会额外撑大盒子——布局时经常踩这个坑。常见做法是全局改成更直观的计算方式：

css
* {
  box-sizing: border-box;
}

border-box 让 width 包含内容、内边距和边框，设宽度时不用再心算 padding 会不会撑出去。

margin 和 padding 可以写多个值：一个值（四方向相同）、两个值（上下、左右）、四个值（上、右、下、左，顺时针）。比如 margin: 8px 16px 是上下 8px、左右 16px。

五、颜色与字体 ​

颜色最常用十六进制写法（#2563eb），也支持颜色名（red）、RGB（rgb(37, 99, 235)）。字体相关属性：font-family（字体列表，前面的不可用就用后面的）、font-size（字号）、font-weight（字重，700 是粗体）、line-height（行高，正文通常 1.5 或 1.6）、text-align（对齐方式）。

css
body {
  color: #111827;
  background-color: #ffffff;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

font-family 最后的 sans-serif 是通用兜底——前面的字体都没有时，用系统默认无衬线字体。

六、间距与边框 ​

页面看着挤，多半是间距没处理好。常见模式：

css
body {
  margin: 0;          /* 去掉浏览器默认外边距 */
  padding: 24px;      /* 内容跟窗口边缘留距离 */
}

.card {
  border: 1px solid #e5e7eb;   /* 1px 实线，浅灰 */
  border-radius: 8px;           /* 圆角 */
  padding: 16px;
}

border 通常包含宽度、线型、颜色三个值。border-radius 控制圆角。

七、按钮与交互状态 ​

按钮和链接可以通过 CSS 设样式。:hover 是伪类，表示鼠标悬停状态：

css
.button {
  padding: 8px 12px;
  border: 1px solid #2563eb;
  border-radius: 6px;
  color: #ffffff;
  background-color: #2563eb;
  cursor: pointer;
}

.button:hover {
  background-color: #1d4ed8;   /* 悬停时颜色变深 */
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.5;                 /* 禁用时半透明 */
}

常见伪类：:hover（悬停）、:focus（获得焦点）、:disabled（禁用）。cursor: pointer 让鼠标移上去显示手形；禁用时改成 not-allowed，视觉上区分可操作和不可操作。

八、表格与表单样式 ​

表格要加 border-collapse: collapse——不然相邻单元格之间出现双边框：

css
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
}

th {
  background-color: #f9fafb;
  font-weight: 600;
}

表单字段把 label 设成 display: block 独占一行，输入框自然排到下一行：

css
.form-field {
  margin-bottom: 12px;
}

.form-field label {
  display: block;
  margin-bottom: 6px;
}

.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
}

.form-field input:focus {
  outline: none;
  border-color: #2563eb;   /* 获得焦点时边框变蓝 */
}

去掉浏览器默认 outline 时要补一个明显的焦点样式——否则键盘用户看不到当前焦点在哪个输入框。

九、完整样式 ​

把前面的样式合到一篇文章管理页。HTML 只写结构，样式全放 style.css：

文件：index.html

html
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <title>文章管理</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <main class="page">
      <header class="page-header">
        <h1>文章管理</h1>
        <p class="muted">文章列表与发布记录。</p>
      </header>

      <section class="card">
        <h2>文章列表</h2>
        <table>
          <thead>
            <tr>
              <th>标题</th>
              <th>分类</th>
              <th>状态</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Python 入门</td>
              <td>技术</td>
              <td><span class="tag">已发布</span></td>
            </tr>
            <tr>
              <td>CSS 布局笔记</td>
              <td>技术</td>
              <td><span class="tag">草稿</span></td>
            </tr>
          </tbody>
        </table>
      </section>

      <section class="card">
        <h2>新增文章</h2>
        <form action="/api/articles" method="post">
          <div class="form-field">
            <label for="title">标题</label>
            <input id="title" name="title" type="text" required>
          </div>

          <div class="form-field">
            <label for="content">正文</label>
            <textarea id="content" name="content" rows="4"></textarea>
          </div>

          <button class="button" type="submit">提交</button>
        </form>
      </section>
    </main>
  </body>
</html>

文件：style.css

css
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 24px;
  color: #111827;
  background-color: #f3f4f6;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  line-height: 1.6;
}

.page {
  max-width: 760px;
  margin: 0 auto;
}

.muted {
  color: #6b7280;
}

.card {
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background-color: #ffffff;
}

.card h2 {
  margin: 0 0 12px;
  font-size: 18px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
}

th {
  background-color: #f9fafb;
  font-weight: 600;
}

.tag {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  color: #1d4ed8;
  background-color: #eff6ff;
}

.form-field {
  margin-bottom: 12px;
}

.form-field label {
  display: block;
  margin-bottom: 6px;
  color: #374151;
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: #2563eb;
}

.button {
  padding: 8px 12px;
  border: 1px solid #2563eb;
  border-radius: 6px;
  color: #ffffff;
  background-color: #2563eb;
  cursor: pointer;
}

.button:hover {
  background-color: #1d4ed8;
}

打开这个页面，HTML 骨架还是 HTML 篇那套，但加上 CSS 后有了背景色、卡片容器、圆角边框、表格分割线、按钮样式——像样多了。但页面还是静态的：点提交不会真的提交，列表里的数据是写死的。交互得靠 JavaScript。

十、常见问题 ​

现象常见原因排查入口
CSS 没生效<link> 路径写错、文件名不一致浏览器 Network 面板
样式被覆盖后写规则覆盖、选择器优先级更高开发者工具 Styles（看划掉的规则）
盒子宽度超出width、padding、border 叠加检查 box-sizing
表格双边框没写 border-collapse: collapse表格样式
焦点样式消失去掉 outline 后没补焦点样式:focus 规则

浏览器开发者工具的 Elements 面板能选中元素，Styles 区域显示命中的 CSS 规则、被覆盖的规则和最终生效的属性。CSS 排查从这里开始——看到样式不对，先选中元素看 Styles 面板，比盯着 CSS 文件猜快得多。