CSS或层叠样式表完成我们的Web设计规则定义的语言。艺术家们都在使用CSS每天创造，组织和编码的网页布局的基本规则。这已成为前端设计最流行的语言，最近CSS3更是有着更加强大的能力。但是这些代码都有着专业的术语，它们都代表什么意义呢？这对于老鸟来说很不屑，但是对于菜鸟来说也很要命。下面文章来源于国外网站，自己英文功力有限，只能借助谷歌翻译过来，如果你有一定的英文阅读能力，建议你去看文章的原始链接，就在此页的最后！
语言本身已充分开发了好几年。可能会出现混乱主要是由于误解和滥用的类似条款。CSS的新观念带来了很多的表。我们将介绍一些最流行的术语，掌握它，成为一个CSS大师。

为什么要使用CSS

这个问题已经提出过，甚至进入2011年，我们可以看到同样的结果。CSS是一个强大的语言中，没有脚本或编程。这种风格的语言，更具体的用代码来描述网页如何分布。

使用CSS，我们可以直接控制单独的HTML元素的属性。所有的块，段，链接和图像可以通过CSS规则调试。对于设计师来说，这就更加方便的控制页面的排版，可以天马行空的去创意。

属性和值

这是学习CSS首先需要知道的。所有代码都有两个动作：选择一个元素应用于设计。后者是通过创建属性值。比如我们举一个例子，color: red;是一个很简单的属性/值对。我们使用的是该属性的颜色，让我们能够在任何可以接受的值传递来更改文本的颜色。这也可以是十六进制代码或RGB（红绿蓝）颜色数据。设计师很多时候也没有提到价值观，因为它可能会产生误导。

属性和值实际上是一种单一的意念。声明要求每个属性的值，并在他们自己的价值观是没有意义的。网上有很多文件里在许多不同的属性和它们如何影响的HTML元素。我会建议购买从附近的任何一个CSS书店的参考书。它们相当便宜，几乎所有持有你需要的信息。

选择价值

选择需要完成一整行的CSS代码。 这些都是我们申报设置什么类型的元素，我们的目标。 有很多选择，很多是如此令人费解的平均设计师不需要的技能。 检查 W3号的选择文档 ，如果你想了解更多信息。最简单的方式开始样式定义是使用属性选择裸元素。 这意味着代码，如操纵根 p 的段落， 分区 为师，甚至身体 和 HTML的 可用于操纵整个网页文件。 下面是一个简单的例子的段落元素样式的。

p { font-family: Arial, sans-serif; color: #222; font-weight: bold; }

是什么让CSS的实际重量是如何准确选择狙击即可。 最好的方式来完成是通过有针对性的风格被称为方法2 类和 标识 。 这些都是在HTML普遍的想法，你可以设置任何元素有一个ID，并通过属性类值。 然后，它使用CSS的样式简单，适用该特定块。

p#firstpar { font-size: 14px; } /* styles paragraph with ID of "firstpar" */
p.comment { font-size: 1.0em; line-height: 1.3em; } /* styles paragraph(s) with class of "comment" */

长度单位和价值观

很多时候，这些条款混在一起，而不是一个大惊喜。 值分别为安置解释过我们用来描述属性。 长度单位，它们也被用来描述一个属性值

所不同的是这些值需要的数值数据，因此必须返回一些单位形式。 像素（px）是最普遍，可用于几乎所有东西：宽/高， 字体 大小，填充/利润率，仅举几例。
除了这些，你可能会看到百分比（％）用于布局往往是通过流体。 当设置的宽度为百分比值，编译器将承担100％是Web浏览器的整个宽度。 这使许多设计师的精度，应用样式时，布局结构和偶数页排印。

声明块

现在把这些条件都在一起，我们终于能够讨论的核心思想背后的样式。 代码块是用来划定区域，并指定主题元素细节。 例如，下面是一个简单的导航容器的代码行：

div#nav { display: block; width: 100%; padding: 3px 6px; margin-bottom: 20px; }

最简单的方式来显示此代码行属性是一个接一个。 CSS的开发人员使用的代码块，打破自己的路线上每个属性。 这一议程不仅占用更多空间，但减少的能力，“脱脂”您的工作表准确地找到你所需要的。

一个更好的方式来打破的代码块是分离到自己的错综复杂的元素注入后，他们到达一个阈值。 这个数字是个人，将被开发商之间的不同。 这是引爆点傻里，逻辑驱使它不断一行一切主要是因为可读性。
下面我写了一个导航属性​​块的例子都在一起。 这种做法保持在相同的位置更深的元素，编辑所有的导航元素要简单得多

div#nav  { display: block; width: 100%; padding: 3px 6px; margin-bottom: 20px; }
div#nav ul { list-style: none; display: block; }
div#nav ul li { float: left; margin-right: 10px; font-size: 12px; }
div#nav ul li a { color: #0f0f0f; text-decoration: none; display: inline-block; padding: 2px 5px; }

从CSS2/CSS3可能进步

在头版头条最近一直在马不停蹄CSS3的谈话令人惊讶的好处，从有关。 但真正 改变 了语言？ 显然，旧的代码仍然运行得很好。 这至少说明完全向后兼容编译器之间（总是一件好事）.

主要的差异主要与新的属性。 这些允许圆角，辍学的阴影效果，呈现在浏览器中。 CSS3中还提供了用于描述文档色彩的新工具。 凌华HSL（色调，饱和度，亮度）是除了高强度低合金钢，其中包括一个Alpha通道，以减少不透明度的最新产品。
属性选择器是一个巨大的进步方面为直标记的样式。 在这样的代码风格，你可以针对特定的元素名称，包含一定的价值属性。 这些大多是工作的时候使用的标记，如XML哪里有不规范的设计原则来操作节点。 下面的例子是一个相对简单的想法:

div[attrib^="1"] { /* styles here */ }

上面的代码的CSS选择器库的一部分。 这将影响到与属性“的ATTRIB”，这也持有值“1”的所有div元素。 如果这仍然是混乱的参考下面的例子，以澄清。 从理论上讲这两个选择应执行相同的操作

p[id^="primary"] { /* styles */ }
p#primary { /* styles */ }

结论

经过打破了最过于混乱几方面的CSS好像在公园里散步。 语言是非常直观和初学者可以开始在手头的前几个小时设计。 这是什么使Web开发的CSS中如此受欢迎。
对CSS3的好处才刚刚开始生效。 过去几年里不断发展的新趋势，将展示我们的网络是多么的控制，我们真正结束了网页设计。 目前CSS的代表作为前端网页的主要语言风格而感到自豪。 连起码到中级技能实践能产生丰富的设计经验和进一步的认识。

源文链接点击这里