CSS 简介

什么是CSS

CSS 全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式（如：字体大小，左右排列顺序等）。

我们可以通过一个CSS文件或者一段CSS脚本代码，对整个网站的表现样式做统一的管理，并达到“内容与表现完全分离”的目的。由于CSS允许同时控制多重页面的样式和布局，所以我们能够为每个 HTML 元素定义样式，并将之应用于任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。因此使用CSS，极大的提高了Web设计工作效率。

如何使用CSS

CSS作用于html文档，有如下三种方式：

内联样式、内部样式表和外部样式表

内联样式

例子：

<p style="font-size:12px; color:red;" >我是内联样式测试文字</p>

这个就是css内联样式的使用例子，它同样遵守我们前面讲的XHTML语法：属性="值"。属性style表示要应用一个CSS样式，双引号里面的均为CSS内容，这个例子我们定义了两个CSS样式，一个是字体大小fontsize，一个是字体颜色color。

该样式告诉浏览器：“我是内联样式测试文字”这行文字的大小为12px，颜色为红色。

内联样式表

例子：

<head>
  <title>我爱开发网</title>
  <style type="text/css">
    p{font-size:12px; color:red;}
  </style>
</head>

这是内联样式表应用的例子，在<style></style>标签内并给标签指定type="text/css"属性以表示要应用一个CSS样式。在<style>标签内的内容为具体CSS内容，请注意和“内联样式”在写法上的细微区别。

该样式告诉浏览器：所有<p>标签内的文字大小都为12px，颜色为红色。

外部样式表

外部样式表是通过一个css文件来对html文档作用的：

<head>
  <title>我爱开发网</title>
  <link rel="stylesheet" href="style/default.css" type="text/css" />
</head>

外部样式表通过在<head>标签内使用<link>标签应用外部的一个CSS样式文件（default.css），来应用CSS样式表。CSS样式文件以css为文件后缀，文件包含CSS具体内容，其写法同内联样式。

浏览器默认样式

网页元素还会受一种特殊的样式影响，就是浏览器的默认样式。一个例子就是浏览器默认超链接是有下划线的，如果我们要取消超链接的下划线，就需要单独应用取消文字下划线的样式于超链接上。

以上三种方式可以混合使用，但混用可能会使样式表变得混乱。在优先级上：内联样式 > 内联样式表 > 外部样式表 > 浏览器默认样式。

CSS撰写风格

和其他编程语言一样同样，CSS也必须写得易懂和易于维护。我们建议将样式表写为如下风格：

p{
    font-size: 12px; 
    color: red;
}

在该写法中，一个CSS属性占一行，前面以一个Tab键缩进，而属性和值之间是否需要一个空格，可以按照个人喜好来决定。

提示

在我们的教程中，为了节约篇幅以及美观度，对于比较简单的样式，会采用类似下面的写法：

p{ color: #FF0000; }

补充：DIV+CSS教程