web前端开发基础3.0

前面的《web前端开发基础2.n》文章中介绍的都是常用的HTML标签和属性，从这一篇开始需要进入第二个前端开发的组成部分——CSS。

CSS 知多少？

CSS（Cascading Style Sheets）是层叠样式表的意思，定义了内容的表现形式。如上一篇所说，在第一次“浏览器战争”中，Netscape 和 Internet Explorer 不断将新的 HTML 标签和属性加入 HTML 规范中，使得创建清晰且兼容的 web 变得越来越困难，这时 W3C 站出来在 HTML 4.0 之外创造了样式，所有的主流浏览器都要支持这样式表，CSS 诞生。

CSS 与 CSS 3

CSS 语法由三部分构成：选择器、属性和值。CSS 3 只是在 CSS 的基础上新增了一些样式设置，它也完全向后兼容，也就是说，CSS 中有效的编码在 CSS 3 中同样有效。但也因为这些新增属性，CSS 3 能更好的实现动画。

CSS 基本语法

CSS由三个部分组成：选择器（Selector）、属性（properties）和属性的值（value）。下面这行代码将 p 元素内的文字设置为字体大小为12px，颜色为红色且居中显示的段落：

规范要求：

1. 不同属性之间必须加半角的封号;，最后一个属性也不例外。

2. 若属性值为两个及以上的单词，则需要给值加引号，如：

3. 每行最好只写一个属性，这样可以增加样式的可读性，维护起来也更方便。如：

4. 保持样式的一致性，上一行在什么地方设置了空格，下一行也记得加上；如果字体首字母大写了那就保持这种格式。

5. 属性值和它的单位之间不要加空格，这纯粹是一种画蛇添足的做法，这样的代码在像Mozilla/Firefox 之类的浏览器中无法正常工作。

CSS 高级语法

1. CSS 可以多个元素公用一个属性：

2. 继承属性——子元素从父元素继承属性。如下代码，其结果就是 之间所有内容，包括段落、列表、表格等文字都用“PingFang SC”字体呈现：

3. 打破继承——就算定义了 body 中的元素全部为“PingFang SC”字体，你也可以再使用一次样式对其中的某些元素重新定义字体：

CSS 三种引入方式

将 CSS 样式表引入 HTML 元素的三种方法：

内联式 CSS：将样式写在标签里。也就是我们之前在 HTML 中将 style 属性放在标签中的方式，如下图所示（这行代码将 p 元素内文字定义为蓝色）。因为不需要跳转到其他位置定义，所以比较快捷，但不便于维护，适合于不遵循统一样式的个别元素。

内部式CSS：在 html 文件的标签中间插入成对的标签，定义的是该元素统一的样式。

外链式 CSS：新建一个 css文件，将样式代码写在该文件中。这是一种最理想的引入方式，只要在一个文件修改就能改变网页内元素的样式。在 html 文件中用外部链接的方式引入该 css 文件，方法是在 标签中插入一个

单标签。

总而言之，三种引入方法中，外链式 CSS作用范围最广泛，内联式 CSS 作用范围最小，实际操作中应该酌情使用。小范围 CSS定义的属性可以改变大范围 CSS 中定义的属性，也就是说，在外链 CSS 定义的样式可以被内部式和内联式中的样式修改，内部式 CSS 中的样式可以被内联式 CSS 中的样式修改。

结语

CSS 和 HTML 的结合可以说对于设计而言非常重要，无论开发还是设计师都应该对此有清楚的了解。下一篇介绍 CSS 选择器的类型。