-
CSS的全称是Cascading Style Sheets，这意味这CSS是级联的样式表。你可以通过看看这个关于 CSS 级联的精彩网站（有测验！）来了解更多的技巧。
-
现在大量的通过游戏来学习CSS的网站已经开始火爆，
flex布局： flexboxfroggy.com/
Grid布局： cssgridgarden.com/ and
CSS选择器：flukeout.github.io/
-
一部分的CSS级联样式是比较奇怪的。html元素可以通过各种方式设置样式，根据您为元素设置的式样，某些原生的式样会被覆盖。编写内联样式将覆盖任何样式。id选择将覆盖class的样式。可以参考这篇文章：see this post on calculating CSS specificity - Star Wars edition!
-
用 CSS 修复 HTML 中的缺点不是一个好主意。首先修复您的 HTML。
-
HTML 中的伪元素也可以设置样式，并在样式元素方面提供方便的技巧。最著名的是::beforeand ::after，但总共有七个伪元素。
-
CSS 允许组织网页上的元素。甚至还有一些布局系统——最著名的包括 Grid、Flexbox、浮动和表格（按从新到旧的顺序）。
-
如果您的项目的浏览器支持允许，一定要尝试一些最新的 CSS，例如 Grid。如果人们太害怕尝试新的 CSS，即使它还没有完全的浏览器支持，那么没有人会尝试它！使用caniuse.com检查浏览器支持。
-
网页上的元素可以使用多种不同的值来调整大小和间隔。有px, ems, rems, ch, vw, vh, %, 等等。在构建更复杂的网页时，元素大小或间距值的相互作用会对样式的易用性和可维护性产生很大的影响。
-
对于编写 CSS 的每一种速记方式，很可能都有一种编写 CSS 的速记方式。例如margin: 20px 30px 10px 15px可以是margin-right: 30px, margin-left: 15px, margin-top: 20px, margin-bottom: 10px。对于阅读您的 CSS 的其他开发人员来说，编写长手版本有时会更清晰！
-
您可以直接在浏览器的开发工具中更改 CSS（要打开它们，请右键单击浏览器窗口并选择“检查”或“检查元素”）。最棒的是，任何样式都不会被保存，因此您可以在这里进行实验！开发工具的另一个优点是“计算样式”选项卡，因为它可以准确显示当前应用于元素的样式。这在调试 CSS 时非常有用！除了计算样式外，开发工具还将显示布局样式，让您清楚地指示将哪些边距、填充和边框应用于元素。
-
Stack Overflow和CSS Tricks是两个与 CSS 相关的问题的朋友。
-
检查 MDN 文档以获取最新的 CSS 文档。他们甚至为许多 CSS 属性提供了一些实时游乐场 - 例如developer.mozilla.org/en-US/docs/…
-
了解相对位置和绝对位置是值得的。我的意思position: relative是具有子（嵌套）元素的父元素带有position: absolute.
-
一个网页往往由许多不同大小的盒子组成。每个元素实际上被浏览器视为一个框 - 标题、段落、跨度，一切。每个框由 4 项组成 - 元素的内容、填充、边距和边框。默认情况下，盒模型声明您添加到元素的任何边框或填充都将添加到元素的宽度或高度之上。这可能令人困惑或违反直觉。设置box-sizing: border-box告诉元素在添加边框或填充时不要增加宽度或高度。而是调整内容大小。
-
除非您确定正确管理自己的焦点状态，否则不要删除默认的浏览器焦点轮廓。
最后
推荐一些系统学习的途径和方法。
每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。
HTML 和 CSS：
