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;!import
color: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标准解决方案，还可以，不过读起来还不是很爽，建议多练，多看，共同努力

1 楼 ylsuccess 2009-09-11  

兄弟 有没有 推荐的CSS书看下？
最近对CSS有点兴趣 想了解 了解