【CSS入门】通过复制粘贴学习网页设计基本属性完全指南
前言
CSS（层叠样式表）负责网站的“外观和感觉”。用户看到的所有设计，包括文本颜色和大小、布局和动画，都是用CSS创建的。
本指南根据46篇文章的要点，精心挑选并介绍了网页开发初学者应首先学习的最重要和最基本的CSS属性。每个项目都包含一个指向更详细解释和可立即复制粘贴使用的代码的链接。让我们先通过本文了解概况，然后深入探讨您感兴趣的主题。
目录
1. 首先要了解！CSS的基本规则
CSS的基础是指定“哪个元素”应用“什么样式”。让我们来看一些规则。
选择器 (class / id / 标签)
重要性：★★★★★ (必要)难度：★☆☆☆☆ (简单)
这是指定样式应用于哪个HTML元素的方法。基本区别是，class用于通用目的，id用于特定的唯一元素，像p这样的标签选择器用于所有段落。
CSS重置
重要性：★★★★☆ (推荐)难度：★☆☆☆☆ (简单)
这是重置浏览器具有的默认样式（如链接上的下划线）以防止设计不一致的概念。
2. 设置文本样式（排版）
网站的印象会随着文本的外观而发生巨大变化。以下是创建易于阅读和有吸引力的文本表达的基础知识。
文本颜色 (color)
重要性：★★★★★ (必要)难度：★☆☆☆☆ (简单)
这是指定文本颜色的最基本属性。使用红色文本用于警告或错误消息可以准确地传达信息。
字体粗细 (font-weight)
重要性：★★★★★ (必要)难度：★☆☆☆☆ (简单)
这会使文本加粗以强调重要部分。
斜体样式 (font-style)
重要性：★★★☆☆ (常用)难度：★☆☆☆☆ (简单)
这会使文本变为斜体。它用作引文或设计中的重点。
字体大小 (font-size)
重要性：★★★★★ (必要)难度：★☆☆☆☆ (简单)
这会调整文本的大小。使用em单位允许您指定相对于父元素的大小。
行高 (line-height)
重要性：★★★★★ (必要)难度：★☆☆☆☆ (简单)
这会调整文本行之间的间距，从而提高长段落的可读性。
字母间距 (letter-spacing)
重要性：★★★☆☆ (常用)难度：★★☆☆☆ (简单)
这会调整字符之间的间距。在标题中稍微隔开它们可以营造出精致的印象。
文本对齐 (text-align)
重要性：★★★★★ (必要)难度：★☆☆☆☆ (简单)
这将水平对齐内联元素，如文本，在其父元素内。
3. 掌握间距即掌握布局（盒子模型）
所有HTML元素都被视为“盒子”，调整它们周围的空间是布局的基础。
边框 (border)
重要性：★★★★☆ (推荐)难度：★☆☆☆☆ (简单)
这会在盒子周围画一条线。您可以创建各种样式，如实线或点线。
内边距和外边距 (padding / margin)
重要性：★★★★★ (必要)难度：★☆☆☆☆ (简单)
padding调整盒子内部的间距，而margin调整其外部的间距。掌握这些是实现优美布局的关键。
4. 自由排列元素（布局）
这是一种不仅可以垂直堆叠元素，还可以并排排列或环绕元素的技术。
并排布局的基础 (display: flex)
重要性：★★★★★ (必要)难度：★★★☆☆ (普通)
这是现代Web布局中最强大和最主流的技术。只需在父元素上指定它，您就可以轻松地并排排列子元素。
环绕 (float)
重要性：★☆☆☆☆ (视情况而定)难度：★★★★☆ (困难)
这是一种经典的布局技术，用于诸如在图像周围环绕文本之类的东西。
内联块 (display: inline-block)
重要性：★★★☆☆ (常用)难度：★★☆☆☆ (简单)
一个方便的属性，允许元素并排排列，同时还具有宽度和高度。
控制高度和宽度 (width / height)
重要性：★★★★★ (必要)难度：★☆☆☆☆ (简单)
这指定了盒子的大小。指定相对于父元素的百分比，例如width: 100%，是响应式设计的基础。
隐藏元素 (display: none)
重要性：★★★★☆ (推荐)难度：★☆☆☆☆ (简单)
这会从屏幕上完全隐藏一个元素。由于它也已从布局中删除，因此它的行为就像该元素从未存在过一样。
实用的两列布局
重要性：★★★★☆ (推荐)难度：★★★☆☆ (普通)
使用display: flex，您可以轻松创建一个常见的两列布局，例如侧边栏和主内容。
5. 用颜色和背景定义网站的印象
颜色和背景是决定网站整体氛围的重要元素。
背景颜色 (background-color)
重要性：★★★★★ (必要)难度：★☆☆☆☆ (简单)
这会设置元素的背景颜色。在`body`标签上指定它将为整个网站设置背景颜色，从而创建一个统一的设计。
渐变 (linear-gradient)
重要性：★★★☆☆ (常用)难度：★★★☆☆ (普通)
这会在背景中创建平滑的颜色过渡（渐变）。它可以表达比单一纯色更深刻和现代的设计。
半透明 (rgba)
重要性：★★★★☆ (推荐)难度：★★☆☆☆ (简单)
这允许您指定颜色的透明度。这对于在背景图像上叠加文本之类的事情很有用，您可以在保持可读性的同时仍允许背景显示出来。
6. 用装饰和动画吸引用户
这些是创建交互式和有吸引力的网站的技术。
圆角 (border-radius)
重要性：★★★★★ (必要)难度：★☆☆☆☆ (简单)
这会使盒子的角变圆，使其看起来更柔和。它经常用于按钮和卡片的设计中。
添加阴影 (box-shadow)
重要性：★★★★☆ (推荐)难度：★★☆☆☆ (简单)
这会向元素添加阴影，从而营造出深度感。它有效地使按钮等元素看起来像是漂浮的。
卡片布局
重要性：★★★★☆ (推荐)难度：★★☆☆☆ (简单)
通过组合圆角和阴影，创建一个整洁地组织信息的卡片式设计。
鼠标悬停效果 (:hover)
重要性：★★★★☆ (推荐)难度：★★☆☆☆ (简单)
这会在鼠标光标悬停在元素上时更改其样式，从而提供视觉反馈。
禁用按钮 (:disabled)
重要性：★★★☆☆ (常用)难度：★★☆☆☆ (简单)
这是当按钮不应被有意点击时使用的样式，例如当表单的输入不完整时。
动画 (@keyframes)
重要性：★★☆☆☆ (视情况而定)难度：★★★★☆ (困难)
这是一个强大的功能，可以为元素添加运动。它允许各种各样的表达方式，例如使元素闪烁、淡入或滑入。
标题下划线
重要性：★★★☆☆ (常用)难度：★☆☆☆☆ (简单)
使用border-bottom属性在标题下方绘制一条线，这可以清晰地定义各个部分。
7. 进阶CSS技术
一旦您学习了基础知识，我们还要学习编写更高效、更易于管理的代码的技术。
CSS变量 (:root)
重要性：★★★☆☆ (常用)难度：★★★☆☆ (普通)
将主题颜色等值定义为“变量”，并在各处重复使用，以极大地提高可维护性。
可滚动内容 (overflow)
重要性：★★★☆☆ (常用)难度：★★☆☆☆ (简单)
这会固定元素的高度，并使用滚动条显示任何溢出的内容。
表单设计
重要性：★★★★☆ (推荐)难度：★★★☆☆ (普通)
在焦点上设置输入字段的样式或自定义单选按钮对于提高表单的可用性非常重要。
结论
在本指南中，我们按目的组织并介绍了基本的CSS属性。虽然每个函数本身都很简单，但将它们组合起来可以打开无限的设计可能性。
首先，尝试使用这篇摘要文章作为参考，尝试您感兴趣的技术。然后，通过从各个解释页面复制并粘贴代码，我们希望您能通过亲眼看到它的实际效果来体验CSS的乐趣。