CSS基础（一）早就想系统的学习CSS还有一些网页美化和设计的东西，可惜一直是个计划，现在工作不是很忙了，那就
CSS基础（一）
早就想系统的学习CSS还有一些网页美化和设计的东西，可惜一直是个计划，现在工作不是很忙了，那就开始学习一下吧，Let's go。
CSS先说点什么呢？先说一下它的历史，Cascading Style Sheet 层叠样式表，最早的规范是level 1，后来改进到level 2，现在2.1得到了个浏览器厂商的广泛支持，未来是3.0。
在互联网最初的时候，页面的基本格式和结构完全是依赖HTML控制的，比如<font>标签等等，这个在JavaScript中的document对象的部分属性中也有体现。后来随着CSS的出现，这种局面得到了控制。最主要的是简化了HTML的编码混乱。HTML专门负责用来标记页面的内容，而页面的外观则交由CSS控制。
但是任何事情都不是绝对的，HTML仍然有很多用于页面外观表现的元素，在恰当的时候使用它们，要比纯粹使用CSS来得好。
OK，回到正题，从最基本的开始
1.在一个页面中如何使用CSS
两种方式，一种是之间在页面编写CSS，另一种是使用外部的CSS文件，对于第一种要使用style标签，例如：
<style><!--p {color:#000000;}--></style>在第二种中，有两种形式引入外部CSS文件，一种是使用link标签,列如：
<link herf="test.css" rel="stylesheet" type="test/css"/>
另外一个用style标签 + @import，比如：
<style><!--@import url("test.css");--></style>同样的，在CSS文件中也可以使用@import，不过对于@import这种方式，要强调一点老式的浏览器不支持，因此利用这个特点，我们可以完成对多浏览器的支持，比如，我们可以把我们的样式分成两部分，一部分是最基本的，任何浏览器都支持，另外一部分只有现代的浏览器才支持，这样我们就可以这样编写CSS代码：
<link herf="basic.css" rel="stylesheet" type="test/css"/><style><!--@import url("advanced.css");--></style>呵呵，怎么样看懂了吧
PS:都是在head标签之间哦
2.CSS选择器CSS的选择器是CSS的核心功能，通过选择器，可以使我们把样式应用到我们想应用的元素上面。主要的CSS包括这样一些：
类型选择器，比如：
p {color:red;}ID选择器，比如：
#someid {font-weight:bold;}类选择器，比如：
.someclass {color:green;}同时上面的三个选择器是可以随意组合的，比如：
li a {text-decoration:none;}#someId a {text-decoration:none;}.someClass a {text-decoration:none;}而这种组合顺序是依照DOM树的顺序。
伪类选择器，比如：
a:link{color:green;}但是这种选择器并不是所有浏览器都支持的，比如IE6对好多的伪类都不支持。
通用选择器，比如：
* {color:red;}子选择器，比如：
对于
<ul id="nav"><li>Home</li><li>Services<ul><li>Design</li><li>Development</li><li>Consultancy</li></ul></li><li>Contact us</li></ul>
如果我们使用
#nav li {color：red}那么整个li包含的字体颜色都会被制为红色，但是如果我们使用
#nav > li {color:red;}那么只有ul的第一个子元素li的字体颜色会被设置。
相邻选择器，比如：
h1 + p {font-weight:bold;}属性选择器，比如：
对于
<abbr title="some title">Some Text</abbr>
我们可以使用
abbr[title] {border-bottom:1px dotted #999;}我们甚至可以使用abbr[title="some"]或者abbr[title~="some"]，来选择某些元素。
注意子选择器，相邻选择器，还有属性选择器ie6都是不支持的。
3.CSS的优先级法则当两个或更多的规则寻找同一个元素时，那么那个规则其作用呢？CSS通过cascade的过程处理这种冲突，我倒是更愿意把这种方式理解为CSS的优先级，也就是当两个样式冲突时，谁先被优先处理。
首先可以使用!import来提高任何规则的优先性，因为它优先于任何规则，不过ie6不支持，也正是因为ie6不支持，我们可以使用它来完成一些跨浏览器的工作，比如，可以写如下样式：
p {color:red;!importcolor:green;}这样就可以，区分ie和其他浏览器了。
接着，CSS的样式遵循以下规则
a 标签内的样式，a=1
b ID选择器的总数
c 类，伪类，属性选择器的总数
d 类型选择器和伪元素的总数
比如：
<a style="">test</a>
根据以上规则，它的优先级就是1000，因为，a=1，b=0,c=0,d=0
再比如：
#nav,#other {...}它的优先级就是200，因为，a=0,b=2,c=0,d=0
还有一个和优先级很类似的概念，继承，它指的是，子元素继承父元素的某些属性，但是这在不同浏览器中又表现的不一致。
写在后面：DOCTYPE标签，META标签和MIME类型
MIME类型是Multipurpose Internet Mail Extensionsd的简称，这个类型是由web服务器指定的，对于HTTP最主要的是指定了报文的类型，以及传输方式，详情可以参见维基中关于MIME的内容。
而META是HTML中页面本地的标签，其中META标签可以参见w3cshcool中对其的描述
而DOCTYPE是一个很重要的标记，它主要有两方面的功能，一个是有效性的检验，比如如果我们访问的页面是MIME类型正确的XHTML，但是页面的校验不正确，浏览器是不会显示该页面的，另外一个功能是决定浏览器的显示模式，浏览器具有两种模式，一种是标准模式，另外一种是quirks mode，比如，在firefox浏览器中，选择view page info，就可以看到页面的render mode，同时还有一个有趣的现象，比如目前的ie8的确已经对标准的支持做了很大的改进，但是，由于它要支持它一些列的版本，因此如果不指定页面的DOCTYPE的话，它表现的页面其实和ie6没有什么两样。
PS：DOCTYPE Browser Mode Test
2 楼 skeeey 2009-09-21 精通CSS高级Web标准解决方案，还可以，不过读起来还不是很爽，建议多练，多看，共同努力
