CSS使用基础入门
CSS特点：实现一个网页内容与样式的分离。这是CSS非常有优势的一个特点，省去了我们很多的麻烦。我们来做一个简单的例子来看一下这个效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- 创建人：陈宗毅 --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS测试</title> </head> <body> <font color=“#0000ff”>栏目一</font> <font color=“#0000ff”>栏目二</font> <font color=“#0000ff”>栏目三</font> </body> </html>
没有CSS之前，我们是这样要是把这个颜色改为别的颜色，那么只能一个个颜色值的改，这个工作量很恐怖的。
之后我们使用CSS来进行优化，我们先来使用CSS选择器：
类选择器：这就是我们在HTML中查找类所设置的一个值。
我们使用span标签+类标志，我们把body里边的内容改成这样：
<body> <span class="menu">栏目一</span> <span class="menu">栏目二</span> <span class="menu">栏目三</span> </body>
然后我们来创建我们的样式文件：
.menu{ /* 栏目样式*/ color:#f00; /* 文字颜色 */ } 就这么一句话我们就搞定了之前的颜色设置，想改颜色只要打开这个样式文件，然后进行更改就行了。避免了很多的麻烦，然后我们再进行样式文件与这个内容的关联，很简单，我们只要拉进来就ok了，拉到这个地方：
<head> <title>CSS测试文件</title> <link href="css/StyleSheet1.css" rel="stylesheet" type="text/css" /> </head>
这就产生了一个关联。样式里边就一个属性，一个冒号，一个属性值构成的。当我们不知道有什么属性值的时候，我们按一下空格，VS就会罗列出所有的属性值，这样我们就能选择我们需要的属性值了。
ID选择器：
id一般来说都是唯一的，我们来看一下操作：
<body> <span id="special" class="menu">栏目一</span> <span class="menu">栏目二</span> <span class="menu">栏目三</span> </body>
然后我们在样式文件中，我们这样：
#special { font-weight :bold ; /* 粗体 */ } 我们得到了两种效果的混合了。看看效果：
然而，当id选择器和类选择器的样式起冲突的时候，就这涉及到了一个优先级的问题了，在这里我就直接把优先级说一下，ID选择器>类选择器。
HTML标签选择器：
设置的是一个更大范围的，只要是这个标签里边的，就会应用这个样式，那么我们这段代码里边，有一个body，我们在样式中的body里边写入一个颜色值：
body { color :#f0f; } 那么我们的HTMLPage里边的body中的：
<body> <span id="special" class="menu">栏目一</span> <span class="menu">栏目二</span> <span class="menu">栏目三</span> 123456 </body>
那么这个123456就会变色。效果：
我们也很容易的看的出来，栏目一 栏目二 栏目三 没有变色，这是为什么呢？很明显，这涉及到了一个优先级的问题了，ID优先级>类选择器>HTML标签选择器。
再说一个内容，就是一个父子关系的，我们在HTMLPage里边这样写:
<body> <span id="special" class="menu">栏目一</span> <span class="menu">栏目二</span> <span class="menu">栏目三</span> <span class="title">这是<span>一</span>条新闻标题</span> 123456 </body>
然后我们在样式文件中这样：
.title span { color:#000; font-size :12px; /* 字体大小 */ } 记得title与span之间的空格，然后这个效果就是：
我们就能看的出来，这个“一”是明显的变了。
还有一个内容，并列的写法：我们在样式中这样写：
.menu, .title { background-color :#ee00ff; } menu和title之间我们用逗号隔开，就能达到目的，我们看看效果：
我们接下来讲最后一个内容，就是class这个类是可以设置为多个的，那么我们看一下是什么个情况，我们在HTMLPage里边写：
<body> <span id="special" class="menu">栏目一</span> <span class="menu niu">栏目二</span> <span class="menu">栏目三</span> <span class="title">这是<span>一</span>条新闻标题</span> 123456 </body>
然后我们在样式里边这么写：
.niu { text-decoration :underline; color :#eeeedd; } .menu{ /* 栏目样式*/ color:#f00; /* 文字颜色 */ } 我们就能看到栏目二
已经与niu一样，加了下划线了，这就出现了一个问题，这个时候的颜色应该是menu的还是niu的呢？我们一看就知道是menu的，这与CSS的样式排列前后顺序有关。与后面的对应起来。
转自：http://blog.csdn.net/yi_zz/article/details/7686301