CSS3系列 01 基础知识
CSS介绍 基本介绍
CSS全称为 Style Sheet，译为层叠样式表。
它能够为HTML进行样式美化以及页面布局。
如果将单纯的HTML所构成的页面当做一副素描画，那么CSS的作用就是为这幅素描画进行上色处理。
当然CSS也能对HTML文档进行布局，让其不再使用默认的文档流排列方式，而是利用CSS让元素进行自由的组合、排列。
值得一提的是在早期没有出现CSS时，对HTML布局我们大多会使用table标签来进行，但是CSS诞生后就不会那么做了，使用CSS布局更加的方便。
关于CSS的学习可分为三大块：
版本更迭 CSS1
1994年，哈肯·维姆·莱和伯特·波斯合作设计CSS。他们在1994年首次在芝加哥的一次会议上第一次展示了CSS的建议。
1996年[11]12月发表的CSS1的要求有：[13]
CSS2-2.1
1998年[11]5月W3C发表了CSS2[14]，其中包括新的内容如：
CSS2.1修改了CSS2中的一些错误，删除了其中基本不被支持的内容和增加了一些已有的浏览器的扩展内容。[15]
CSS3
CSS3标准已部分公布，但仍未全部制订完毕，还会有其它新内容继续加入。W3C网站上有专页展示CSS3发展的进展[16]。
CSS3的标志。
CSS3分成了不同类别，称为“”。而每一个“”都有于CSS2中额外增加的功能，以及向后兼容。CSS3早于1999年已经开始制订。[17]直到2011年6月7日，CSS 3 Color 终于发布为W3C 。[18]
CSS3里增加了不少功能，如：“-”、“text-”、“”以及“”。CSS3亦支持动画（）及立体（-3d）。
部分属性（例如旋转类属性（如：），动画类属性，立体类属性），由于现时不同浏览器支持程度不同，需要加上不同的浏览器前缀来区分。
CSS4
W3C于2011年9月29日开始了设计CSS4[19][20]。直至现时只有极少数的功能被部分网页浏览器支持，如使用在HTML而非SVG上的-[21]。
CSS4增加了一些更方便的选择器，并简化了一些现有选择器的用法。
如何使用CSS 行内式
直接在HTML标签元素中添加style属性并书写CSS代码的方式即为行内式。
行内式并不推荐使用，它对后期维护造成了一些很大的困惑，且代码复用性也较低：
Document
HELLO WORLD
渲染结果：
嵌入式
在head标签中内嵌style标签，并在style标签中书写CSS代码的方式被称为嵌入式。
嵌入式在调试代码时使用很方便，但是后期项目上线应该将CSS代码和HTML做好分离：
Document
HELLO WORLD
渲染结果：
链接式
在head标签中内嵌子标签link，利用link标签来链接一个已经书写好的CSS样式文件的方式被称为链接式。
链接式是实际生产中最常用的导入CSS样式的方式。
HTML文档：
Document
HELLO WORLD
CSS文件：
span:nth-child(1){background-color: red;color: white;padding: 5px;font-style: italic;
}
渲染结果：
导入式
在head标签中内嵌子标签style，style标签中利用CSS所提供的语法@ url(“path”)来导入一个已经书写好的CSS样式文件的方式被称为导入式。
导入式的方式在整合CSS代码时比较常见，如下所示。
HTML文档：
Document
HELLO WORLDHELLO CSS
整合的CSS文件，.css：
@import url("./style1.css");
@import url("./style2.css");
单独的CSS文件，.css：
span:nth-child(1){background-color: red;color: white;padding: 5px;font-style: italic;
}
单独的CSS文件，.css：
div:nth-of-type(1){background-color: blue;color: white;padding: 5px;font-style: italic;margin-top: 5px;
}
渲染结果：
样式重置
所有的HTML都有一些自带的样式，比如body文档有边距并不是直接铺满整个屏幕的，ol、ul等默认样式都是黑色实心圆、a标签有下划线等。
在实际的项目开发中，我们应当将这些默认样式全部取消掉，因此有人专门做了一个CSS文件，名为CSS Rest即为CSS样式重置，在编写CSS代码之前，我们应当先导入这个文件：
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126License: none (public domain)
*/html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;
}
body {line-height: 1;
}
ol, ul {list-style: none;
}
blockquote, q {quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;
}
table {border-collapse: collapse;border-spacing: 0;
}
注释语法
CSS中若要添加注释，格式如下：
/* Comment */
它可以支持多行注释。
