#spacePage #content{background:transparent url(http://5q.com/hhj530);border:0pt;}
此教程参考了网上一些文章，结合校内网的实际而写，仅为入门级教程，如果想更深入的学习，请自行查找相关资源。
一、什么是css
1、什么是CSS
CSS即Cascading Style Sheet(层叠样式表单)的缩写，我们又常称之为风格样式单Style Sheet，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。简单来说，就是网页内容由HTML来定义，而网页内容表现出来的样式，如字体，颜色，图片位置等由css来定义。
为什么称样式单为层叠的呢？在你还没有对它有一个较全面的了解前，可打一个不很准确的比喻：如我们评价一个人，需要听取大家的意见再汇总，有人说，这个人诚实，有的说干事踏实，有的说很有责任心.....，这样通过这些意见的“层叠”，就可大体地知道这个人的品质；即使是同样的标志，也可以通过层叠使它们显示出不同的特性来，随着学习的深入，你会发现层叠的具体含义及一些妙用的。
2、css能做些什么
css能做到的会超出很多人的想象，下面给出两个实例
动态光源效果
Glow滤镜
这属于css+js的高级应用了，下面我们从基础开始讲起。
3、如何将样式表加入网页
你可以用以下三种方式将样式表加入您的网页。而越接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。
a、链入外部样式表文件 (Linking to a Style Sheet)
你可以先建立外部样式表文件（.css），然后使用HTML的link对象。示例如下：
<link rel=stylesheet href="http://www.xiaonei.com/css/main.css" type="text/css">
b、定义内部样式块对象 (Embedding a Style Block)
你可以在你的HTML文档的<HTML>和<BODY>标记之间插入一个<STYLE>...</STYLE>块对象。示例如下：
<style type=text/css>
<!--
A:link{COLOR: #999999;FONT-SIZE:9pt;FONT-FAMILY: 隶书}
A:visited{COLOR:#999999;FONT-SIZE:9pt;FONT-FAMILY: 隶书}
A:active{COLOR: #999999;FONT-SIZE:9pt;FONT-FAMILY: 隶书}
A:hover{COLOR: #999999}
body{COLOR:#999999;FONT-SIZE:9pt; FONT-WEIGHT: bolder;FONT-FAMILY:隶书}
-->
</style>
c、内联定义 (Inline Styles)
内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下：
<p style="margin-left: 0.5in; margin-right:0.5in">这一行被增加了左右的外补丁<p>
前两种方式是我们经常用到的，尤其是第二种方式用得最多，而第三种方式用得相对较少，一般只有在修改涂鸦板内对象属性或自定义的对象属性时才会使用。
二、css入门基础
1、CSS的基本语法
在建立样式表之前，我们必须要具有一些 HTML 的基础知识。我们知道， HTML 语言由标志和属性构成， CSS 也是如此。
样式表基本语法：
HTML 标志 { 标志属性：属性值；标志属性：属性值；标志属性：属性值；…… }
放置样式表有内联和外联等三种不同的方法。现在首先讨论在涂鸦板内直接引用样式表的方法。
这个方法必须把样式表信息包括在 < style> 和 < /style> 标记中。
例如我们要设置页面中所有 H3 标题字显示为红色，其代码如下：
< STYLE TYPE="text/css">
< !--
H3 { color: red }
-->
< /STYLE>
注意， < STYLE> 标记中包括了 TYPE ＝ "text/css" ，这是让浏览器知道你是使用 CSS 样式规则。加入 < !-- 和 --> 这一对注释标记是防止有些老式的浏览器不认识样式表规则，可以把该部分代码忽略不计。
在使用样式表过程中，经常会有几个标志用到同一个属性，比如我们规定 HTML 页面中凡是粗体字、斜体字、3 号标题字显示为红色，按照上面介绍的方法应书写为：
B { color: red}
I { color: red}
H3 { color: red}
显然这样书写十分麻烦，引进分组的概念会使其变得简洁明了，我们可以写成：
B,I,H3 {color: red}
用逗号分隔各个 HTML 标志，把三行代码合并成一行。
此外，同一个 HTML 标志，可能定义到多种属性，例如，我们规定把从 H1 到 H6 各级标题定义为红色黑体字，带下划线，则应写为：
H1,H2,H3,H4,H5,H6 {
color: red;
text-decoration: underline;
font-family: " 黑体 "
}
注意各个标志属性之间用分号隔开。
2、如何建立样式表
样式表的建立要符合CSS规则，它们一般被定义成以下形式的句法：
HTML标志{标志属性:属性值；标志属性:属性值；标志属性:属性值；标志属性:属性值；...}
下面我们分别讲述：
a、HTML标志：在上一节我们已简要地介绍了一下， 有点需要注意的是，这些标志不带尖括号，如P,Div、Table等而不是<P>、<Div>以及<Table>。
b、标志属性：属性值，这是一一对应的，每个属性与属性值对之间用分号隔开。有一点要说明的是，在CSS的属性设置与脚本语言中对属性设置有一点不同，即属性名称的写法，在CSS中，凡属性名为两个或两个以上的单词构成时，单词之间以"-"隔开，比如，背景颜色属性background-color, 而在脚本中，对象属性则连写成backgroundColor，第二个单词首字母大写，如有三个单词则第三个单词首字母也要大写，注意，在Javascript中，是严格区分大小写的。
下面看一个具体的例子，比如我们对一个H3标题建立一个样式表：
H3{background-color:#0000ff;font-size:12pt;color:#ffff00}
上面我们分别设置了背景色，字体大小，以及字体颜色等。
为了看起来直观一些，上边的例子还可以写成:
H3{background-color:#0000ff；
font-size:12pt；
color:#ffff00}
有一点值得注意的是，有些属性可以表示多个属性的值，如字体设置，有字体字样：font-family、字体大小：font-size、字体风格:font-style，这些可用一个font属性来表示,
如:H3{font-size:15pt；
font-family:’宋体’；
font-style:italic }
可直接用 H3{font:15pt 宋体 italic}来表示。
3、样式类的创建与引用
结合校内网的实际，可以分为两种情况，一种是修改已有内容的属性，另一种是修改自己创建内容的属性。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
相关知识点：CSS中Class与ID的区别
一个Class是用来根据用户定义的标准对一个或多个元素进行定义的。打个比较恰当的比方就是剧本：一个Class可以定义剧本中每个人物的故事线，你可以通过CSS，Javascript等来使用这个类。因此你可以在一个页面上使用class="Frodo" ，class="Gandalf"， class="Aragorn"来区分不同的故事线。还有一点非常重要的是你可以在一个文档中使用任意次数的Class。
至于 ID，通常用于定义页面上一个仅出现一次的标记。在对页面排版进行结构化布局时（比如说通常一个页面都是由一个页眉，一个报头< masthead>，一个内容区域和一个页脚等组成），一般使用ID比较理想，因为一个ID在一个文档中只能被使用一次。而这些元素在同一页面中很少会出现大于一次的情况。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
a、已有内容
修改已有内容的属性，我们首先要获得该内容的HTML标识，例如我要修改顶部导航栏里文字的属性，先看一下源文件里关于header的定义：
<div id="header">
<h1 id="logo"><a href ="http://xiaonei.com/SysHome.do" title="校内网"><img
src ="/UpFile/2007/6/8/20076825153191.gif" alt="校内网(Logo)" /></a></h1>
<p id="tagline"><a href ="http://xiaonei.com/SysHome.do">大学生互动空间</a></p>
<div id="utility">你好，<a href ="http://xiaonei.com/BasicInfo.do">李响</a><span class="pipe">|</span><a href ="http://xiaonei.com/info/Help.do">帮助</a><span class="pipe">|</span><a href ="http://xiaonei.com/Logout.do">退出</a></div>
<div id="jumpnav">
<h3>跳到：</h3>
<ul>
<li><a href ="#navigation">导航</a></li>
<li><a href ="#content">内容</a></li>
<li><a href ="#footer">底部</a></li>
</ul>
</div>
<div id="navigation">
<h3>主导航：</h3>
<ul>
<li><a href ="http://home.xiaonei.com/Home.do">我的首页</a></li>
<li><a href ="http://browse.xiaonei.com/SocialNet.do">随便看看</a></li>
<li><a href ="http://school.xiaonei.com/university.do?id=5001">学校</a></li>
<li><a href ="http://blog.xiaonei.com/freshblog.do">日志</a></li>
<li><a href ="http://photo.xiaonei.com/freshalbum.do">相册</a></li>
<li><a href ="http://group.xiaonei.com/RandomTribe.do">群