我们常见的Web前端三巨头：HTML、CSS、JS（JavaScript）。

具体请移到【我的专栏】当中的前端——>前端之HTML+CSS、前端之javascript；

而在这里我将图文并茂的介绍前端最基本的HTML5+CSS3中相关功能的运用，既是对我自己学习的一个回顾也希望在我学习的过程中遇到的一些知识能够对你们有些帮助。

  1. 1. CSS定义
  2. 2. CSS特点
  3. 3. CSS语言基础
  4. 4. CSS参考教程链接
  5. 5. CSS3的升级

1. CSS定义

        CSS层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS3是CSS技术的升级版本，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

2. CSS特点：

  • 丰富的样式定义：CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；
  • 易于使用和修改：CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。
  • 多页面应用：CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。
  • 层叠：对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。
  • 页面压缩：在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程度的缩减了页面的体积，减少下载的时间。

3.CSS语言基础

  • 属性

        属性的名字是一个合法的标识符，它们是CSS语法中的关键字。一种属性规定了格式修饰的一个方面。要掌握一个属性的用法，有六个方面需要了解。具体叙述如下：

①该属性的合法属性值。显然段落缩进属性text-indent只能赋给一个表示长度的值，而表示背景图案的background．image属性则应该取一个表示图片位置链接的值或者是关键字none表示不用背景图案。

②该属性的默认值。当在样式表单中没有规定该属性，而且该属性不能从它的父级元素那儿继承的时候，则浏览器将认为该属性取它的默认值。

③该属性所适用的元素。有的属性只适用于某些个别的元素，比如white-space属性就只适用于块级元素。white-space属性可以取normal、pre和nowrap三个值。当取normal的时候，浏览器将忽略掉连续的空白字符，而只显示一个空白字符。当取pre的时候，则保留连续的空白字符。而取nowrap的时候，连续的空白字符被忽略，而且不自动换行。

④该属性的值是否被下一级继承。

⑤如果该属性能取百分值，那么该百分值将如何解释。也就是百分值所相对的标准是什么。如margin属性可以取百分值，它是相对于margin所存元素的容器的宽度。

⑥该属性所属的媒介类型组。

  • 属性值

①整数和实数

        这和普通意义上的整数和实数没有多大区别。在CSS中只能使用浮点小数，而不能像其他编程语言那样使用科学记数法表示实数，即1.2E3在CSS中将是不合法的。下面是几个正确的例子，整数：128、-313，实数：12.20、1415、-12.03。

②长度量

        一个长度量由整数或实数加上相应的长度单位组成。长度量常用来对元素定位。而定位分为绝对定位和相对定位，因而长度单位也分为相对长度单位和绝对长度单位。

        相对长度单位有：em——当前字体的高度，也就是font.size属性的值；ex——当前字体中小写字母x的高度；Dx——一个像素的长度，其实际的长度由显示器的设置决定。另一一点值得注意的是，子级元素不继承父级元素的相对长度值，只继承它们的实际计算值。

③百分数量

        百分数量就是数字加上百分号。显然，百分数量总是相对的，所以和相对长度量一样，百分数量不被子级元素继承。

  • 选择器

①类型选择器

        CSS中的一种选择器是元素类型的名称。例如，以下简单规则的选择器是H1，因此规则作用于文档中所有的H1元素：

1

H1 {color:red}

②简单属性选择器

Class属性：Class属性允许向一组在Class属性上具有相同值的元素应用声明。

Id属性：Id属性的操作类似于Class属性，但Id属性的值在整篇文档中必须是唯一的。这使得Id属性可用于设置单个元素的样式规则。包含Id属性的选择器称为Id选择器。Id选择器的标志符是散列符号（#）。标志符用来提醒浏览器接下来出现的是Id值。

Style属性：尽管在选择器中可以使用Class和Id属性值，Style属性实际上可以替代整个选择器机制。Style属性的值实际上是一个或多个Css声明。

组合选择器类型：可以将类型选择器、ID选择器和类选择器组合成不同的选择器类型来构成更复杂的选择器。通过组合选择器，可以更加精确地处理希望赋予某种表示的元素。例如，要组合类型选择器和类选择器，一个元素必须满足两个要求：它必须是正确的类型和正确的类以便使样式规则可以作用于它。

外部信息：伪类和伪元素。在CSS1中，使用伪类可以根据一些情况改变文档中链接的样式，如根据链接是否被访问，何时被访问以及用户和文档的交互方式来应用改变。借助于伪元素，可以更改元素的第一个字母和第一行的样式，或者添加源文档中没有出现过的元素。伪类和伪元素都不存在于HTML；也就是说，它们在HTML代码中是不可见的。这两种机制都得到了精心设计以便能够在CSS以后的版本中做进一步地扩充；也就是说实现更多的效果。 

4. CSS参考教程链接

CSS3 教程_w3cschool

CSS3 教程 | 菜鸟教程 (runoob) 

CSS手册 (caibaojian) 

5. CSS3的升级

        CSS3的新特征有很多，例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等。

        兼容问题浏览器的前缀：Chrome（谷歌浏览器）：-webkit-、Safari（苹果浏览器）：-webkit-、Firefox（火狐浏览器）：-moz-、lE（IE浏览器）：-ms-、Opera（欧朋浏览器）：-O-

        本章主要介绍了CSS的基本介绍：CSS定义、CSS特点、CSS语言基础、CSS参考教程链接、CSS3的升级。从多角度对CSS有个全面的了解,  好了，赶快动手实战吧，具体实战有什么问题的小伙伴可留言或者私信，看到一定帮您解决，我们别的文章再见。 

更多推荐

【前端之CSS的基本介绍】