这是一份简洁实用的 CSS 开发速成手册

好的，这是一份简洁实用的 CSS 开发速成手册，涵盖核心概念和常用技巧：

一、 基础概念

1. 选择器

   • 作用：指定哪些 HTML 元素应用样式。
   • 常见类型：
     • 元素选择器：p { ... }(选择所有<p>元素)
     • 类选择器：.classname { ... }(选择所有class="classname"的元素)
     • ID 选择器：#idname { ... }(选择id="idname"的元素)
     • 后代选择器：div p { ... }(选择所有在<div>内部的<p>元素)
     • 子元素选择器：div > p { ... }(选择所有作为<div>直接子元素的<p>元素)
     • 相邻兄弟选择器：h1 + p { ... }(选择紧跟在<h1>后面的第一个<p>元素)
     • 通用兄弟选择器：h1 ~ p { ... }(选择所有在<h1>后面且同级的<p>元素)
     • 属性选择器：[type="text"] { ... },[href^="https"] { ... }
     • 伪类：:hover,:focus,:nth-child(n),:first-child,:last-child(基于元素状态或位置)
     • 伪元素：::before,::after,::first-line,::first-letter(创建虚拟元素或选择部分内容)

2. 盒模型

   • 每个元素都被视为一个矩形盒子。
   • 组成部分（由内到外）：
     • 内容(content)
     • 内边距(padding) - 内容与边框之间的空间
     • 边框(border)
     • 外边距(margin) - 盒子与其他盒子之间的空间
   • box-sizing属性：
     • content-box(默认)：元素宽高 = 内容宽高
     • border-box：元素宽高 = 内容 + 内边距 + 边框 (更常用)

二、 常用属性速查

1. 文本

   • color：文本颜色 (#ff0000,rgb(255,0,0),red)
   • font-family：字体 ('Arial', sans-serif)
   • font-size：字号 (16px,1em,100%)
   • font-weight：粗细 (normal,bold,700)
   • text-align：水平对齐 (left,center,right,justify)
   • line-height：行高 (1.5,24px)
   • text-decoration：装饰 (none,underline,line-through)

2. 背景

   • background-color：背景色
   • background-image：背景图 (url('image.jpg'))
   • background-repeat：平铺 (repeat,no-repeat,repeat-x,repeat-y)
   • background-position：位置 (center,top left,50% 50%)
   • background-size：尺寸 (cover,contain,100px 200px)

3. 尺寸与边距

   • width/height：宽高 (100px,50%,auto)
   • padding：内边距 (10px,10px 20px,10px 20px 15px 5px) (上 右 下 左)
   • margin：外边距 (同上)
   • border：边框 (1px solid #ccc) (可拆分为border-width,border-style,border-color)

4. 显示与定位

   • display：
     • block：块级元素 (独占一行，可设宽高)
     • inline：行内元素 (不独占一行，不可设宽高)
     • inline-block：行内块 (不独占一行，可设宽高)
     • none：隐藏
     • flex：弹性布局容器
     • grid：网格布局容器
   • position：
     • static(默认)：正常流
     • relative：相对自身原位置偏移 (top,right,bottom,left)
     • absolute：相对于最近的非static祖先元素定位
     • fixed：相对于视口定位
     • sticky：在滚动到特定位置前为relative，之后为fixed
   • top,right,bottom,left：配合position定位
   • z-index：控制层叠顺序 (数值越大越靠前)

三、 布局核心

1. Flexbox (弹性布局)

   • 容器属性：

     .container { display: flex; flex-direction: row | column; /* 主轴方向 */ justify-content: flex-start | center | flex-end | space-between | space-around; /* 主轴对齐 */ align-items: stretch | flex-start | center | flex-end | baseline; /* 交叉轴对齐 */ flex-wrap: nowrap | wrap; /* 换行 */ align-content: /* 多行时的交叉轴对齐 */ }

   • 项目属性：

     .item { flex-grow: 0; /* 放大比例 */ flex-shrink: 1; /* 缩小比例 */ flex-basis: auto; /* 初始尺寸 */ flex: 0 1 auto; /* 简写 (grow shrink basis) */ align-self: auto; /* 覆盖容器的 align-items */ order: 0; /* 项目排列顺序 */ }

2. CSS Grid (网格布局)

   • 容器属性：

     .container { display: grid; grid-template-columns: 100px 1fr 2fr; /* 定义列 */ grid-template-rows: auto 200px; /* 定义行 */ grid-gap: 10px; /* 行列间距 (grid-column-gap, grid-row-gap) */ justify-items: start | center | end | stretch; /* 单元格内容水平对齐 */ align-items: start | center | end | stretch; /* 单元格内容垂直对齐 */ justify-content: /* 整个网格在容器内的水平对齐 */ align-content: /* 整个网格在容器内的垂直对齐 */ }

   • 项目属性：

     .item { grid-column: 1 / 3; /* 跨越第1列到第3列 */ grid-row: 1; /* 占据第1行 */ grid-area: header; /* 指定区域名 */ justify-self: /* 覆盖容器的 justify-items */ align-self: /* 覆盖容器的 align-items */ }

四、 响应式设计

1. 媒体查询(@media)
   • 根据设备特性（如屏幕宽度）应用不同样式。
   • 示例：

     /* 默认样式 (移动优先) */ body { font-size: 14px; } /* 屏幕宽度 ≥ 768px */ @media (min-width: 768px) { body { font-size: 16px; } .container { width: 750px; } } /* 屏幕宽度 ≥ 992px */ @media (min-width: 992px) { .container { width: 970px; } }

五、 实用技巧

1. CSS 变量 (Custom Properties)：

   :root { --main-color: #3498db; --padding: 10px; } .element { color: var(--main-color); padding: var(--padding); }

2. 重置样式：使用reset.css或normalize.css消除浏览器默认样式差异。

3. 单位：

   • px：像素
   • %：相对于父元素
   • em：相对于当前元素的字体大小
   • rem：相对于根元素 (<html>) 的字体大小
   • vw/vh：视口宽度/高度的 1%
   • vmin/vmax：视口较小/较大尺寸的 1%

4. 调试：浏览器开发者工具 (F12或右键检查) 是调试 CSS 的利器。

六、 学习资源

这份手册旨在快速入门和查阅核心知识。深入学习仍需实践和查阅官方文档。祝你 CSS 开发顺利！