CSS（1） CSS简介
一、CSS定义
1.CSS定义
CSS是Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现HTML或 XML 等文件式样的计算机语言。CSS的作用就是为网页设置外观，相当于给HTML文档穿上了华丽的衣服。CSS目前最新版本为CSS3，能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象盒子模型的控制能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。
2.为什么要使用CSS？
这个问题得从HTML和浏览器的发展说起。HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。但是，在浏览器发展过程中，由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。为了解决这个问题，万维网联盟（W3C）在 HTML 4.0 之外创造出样式（Style）。
二、CSS的优点
与传统地使用一些简单的样式标签相比，使用CSS定义HTML文档的外观有许多优势。主要有以下几点：
1.样式表能实现内容与样式的分离，方便团队开发。
2.方便统一定义和修改文档格式、美化外观、 布局和定位。
3.解决了传统的HTML标签的外观样式比较单一的问题（传统HTML页面色彩不生动、样式修改不方便等）。
4.通过以上几点，极大地提高了工作效率。
三、CSS的三种类型
1. 内联样式表（inline style sheets）
内联样式表又叫行内样式表。内联样式表直接将样式写入元素的style属性中，内联样式表适用于样式没有可复用性的场合。 由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
1 <!--内联样式表，用于设置文本框的背景颜色--> 2 <input type="text" readonly="readonly" style="background-color: #FF00FF" /> 3 4 <!--设置段落的前景色和外边距--> 5 <p style="color: sienna; margin-left: 20px"> 6 This is a paragraph 7 </p>
2.内部样式表/内嵌样式表（embedded style sheets）
内部样式表又叫页面嵌入（内嵌样式表），当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:表示页面中所有input都是采用指定的样式。使用内部样式表可以实现样式复用，减小页面体积。
1 <!--内部样式表--> 2 <style type="text/css"> 3 input{border-color:Yellow;color:Red;} 4 </style>
3.外部样式表（linked style sheets）
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，我们可以通过改变一个样式表文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表，用href属性指定引入.css文件的路径。<link> 标签在（文档的）头部：
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
四、CSS样式表的优先级
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表（位于 <head> 标签内部）
- 内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。这就意味着，如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
建议的样式表使用原则：
1.推荐把尽可能多的样式写到单独的css文件中，这样可以复用，美工人员和开发人员很好的分工。
2.只有页面特有的样式才写到<style>中
3.只有元素特有的样式才写到元素的style属性中。
参考：http://www.w3school.com.cn/css/css_intro.asp
