CSS教程系列四——ID和类

尽管所有的Html标记都可以用作选择符，但是现实中我们仍需要实现更加精细，更加复杂的目的。例如：有三个段落，我们希望每个段落有不同的颜色。以前我们用类型选择符定义段落颜色，代码会这样写：p {color:red;} 但是这条规则只能让所有的段落字体变成红色。这时我们就用到了ID和类。

1.ID和类的规则及使用方法

（1）定义ID

#名称 ｛属性：值;｝

（2）定义类

.名称 {属性:值;}

它们跟以前的选择符格式上差不多，ID前面加一个#号，类名前面加一个点（半角）。

2.ID和类的命名

在命名上，ID和类是随意的，你几乎可以将它们命名为任何的名字。比如上面的三个段落，我们把第一段的类名命名为：first，代码就要这样写，

.first {color:red;}

但为了规范我们最好使用有意义容易理解的名字，让名称尽可能与表现方式无关。书写上一般采用驼峰式大小写，即多个单词的情况下，首单词无大写字母，其后单词首字母大写，如topNav,leftSidebar。

3.ID和类的使用

我们在CSS中定义了类或ID，那么我们怎么把它应用到Html中呢？

<P class="first">第一个段落</P>

若当初我们定义的是ID，#first {color:red;}。那么现在我们应该这样写：

<P id="first">第一个段落</P>

这样应用了之后，只有第一个段落的颜色为红色，其它段落便不受First类影响。

4.ID和类的区别

看了上面的几个例子之后，你可能会觉得ID和类除了书写上的区别之外，功能上好像没有区别。的确，它们在功能上也没有区别，它们的区别就是ID在页面上必须是唯一的。而类可以被任意使用。例如我们定义一个ID，一个类。

#first {color:red;}

.second {color:green;}

first因为前面有个#号所以属于ID，Second则属于类。则：

<P id="first">段落一</P>
<P class="second">段落二</P>
<P class="second">段落三</P>

上面的代码中“Second”这个类被使用了两次，说明类可以被多次使用，但ID在页面中只能被使用一次。

我们一般用ID来标识持久的结构性元素。使用更多的是类。

5.防止类的滥用

类是非常灵活和强大的，正因如此，它也极易被过度的使用。在实际中我们应尽可能少的使用类。大多数时候我们所创建的文档中只需要添加几个类。

买了两个域名

coloor.net和给丫头注册的ifay.cn
好像现在没什么用处，嘿嘿。总会有用的。
cn无法注册Google Apps，注册过net后立即试了一下Google Apps，好可惜，最重要的一个功能因Ghs.google.com在中国被封而无法使用。遗憾，好遗憾。

CSS教程系列三——CSS语法和应用

大虾请略过，本人菜鸟。

这一节我们终于真正的开始接触CSS本身了，会不会等得有点久呢？呵呵，开始吧。

一、基本语法

掌握一件事物最快的方法就是直接去使用，看看下面一段代码，这段代码来自Blogger模板。它是介于<b:skin><![CDATA[ 和 ]]></b:skin>之间的部分。这部分包含了XML的变量定义（Variable definitions）和CSS。类似下面的代码就是CSS。

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
text-align: center;
}

仔细观察上面的代码，我们可以分析出CSS的规则，实际上CSS只包含了三部分，大括号外的，冒号前面的，最后就是冒号后面的。这三部分是什么？起什么作用呢？

我们用一条更简单的规则来说明：

H1 { color: green;}

这里有三个概念，分别是大括号外的“选择符（Selector）”、冒号前的“属性（Property）”以及冒号后面的“属性的值”或者说是“属性的参数”。

上面一条代码具有什么作用呢？它告诉浏览器将所有<H1></H1>包围的文字以绿色显示。

1.选择符（有的地方称作选择器）。上面代码中的H1。顾名思义，它的作用就是起筛选的作用。就像上一条代码，它只对所有<H1></H1>包围的文字起作用。所有的Html标记都可以充当选择符，所以你可以将CSS的任何信息应用到任何元素。如果有不同的选择符，但他们的属性及值是完全一样的，为了方便，我们可以将它们合并起来写，例如：

H1, P, Span
{ font-family: arial;}

上面的代码就会把所有的H1,P,Span包围起来的文字的字体设置为Arial。

2.属性。上面代码中的color。每件东西都有属性。比如人类，性别，肤色，体重等等都是人类的属性。一段文字，一个段落也有自己的属性，比如字体类型，大小，颜色之类。不同的对象属性也有所不同。在CSS中要掌握很多属性，可以搜索“CSS 2 中文手册”，下载一份。在以后的使用中也会介绍一些常用的属性。

3.属性的值。上面代码中的green。这更容易理解了吧，比如性别男，肤色是黄色。字体类型为黑体……

4.最后不要漏了那个小分号，每一句后面都要加上分号。

5./*注释性文字*/ 夹在/*和*/之间的是注释,不执行.

二、CSS的应用

应用CSS一般有三种

1.内嵌样式. 它写在标记里面，只对此标记起作用。格式：

<P style="font-size:20pt; color:red">这个Style定义<p></p>里面的文字是20pt字体，字体颜色是红色。</p>

2.内部样式表。写在所在网页的<head></head>之间，只对所在网页起作用。格式：

<STYLE type="text/css">

......

</STYLE>

3.外部样式表。用Link链接到网页，可重复应用到许多网页。格式：

<link href="css文件地址" rel="stylesheet" type="text/css">

下一节我们将接触类和ID。越来越觉得自己脑子里的东西太凌乱，在短时间内将它们写出来有好多地方前言不搭后语，不条理，请见谅。

CSS教程系列——简单的Html语法

大虾请略过，本人菜鸟。欢迎批评指正。

看到有人留言及在抓虾推荐上一篇文章，深受鼓励，我想自己一定可以把它写完的。欢迎订阅本Blog，以关注最新教程：http://feeds.feedburner.com/eool（推荐）以及http://feed.feedsky.com/ifly

在此系列教程中，我主要是根据自己的学习经历和经验，以最通俗的语言及例子说明一些抽象的概念，相信即使你从来没有接触过Html或CSS都可以学会。另外本教程所介绍的也是最基本的概念及最常用到的知识。

我接触Html也是从Blogger开始的，以前的Blogger模板是纯Html格式的。相信好多朋友连最基本的Html标记都不清楚，在学CSS之前，我将介绍我们最常用到的一些Html标记。算是CSS的基础。

1.Html简介

HTML的英文全称是Hyper Text MarkUp Language，中文叫做“超文本标记语言”。

HTML文件看上去和一般文本类似，但是它比一般文本多了Tag（标记），比如<html>，<b>等，通过这些Tag，可以告诉浏览器如何显示这个文件。我们用记事本就可以编辑Html。

我们平常浏览网页是通过IE,Firefox此类的浏览器，为什么需要浏览器呢？浏览器是一种翻译工具，它会解释看起来复杂、凌乱的Html，让人们得到最直观的表现方式。先介绍一下Html的几个基本概念：（1）标记（Tag），有的地方也称作标签。标记在Html中是用于描述功能的符号。标记是用来实现某种功能的，标记必须用<>括起来.举个例子吧.

<B>一些文字</B>

在上面的一行代码中,<B>和</B>就是标记,那么它们可以实现什么功能呢?这两个标记只有一个差别,就是后面的标记多了一个'/',这个标记的功能就是让两个标记中间的文字加粗显示.我们会注意到在浏览器中标记是不会显示的,显示出来的是它们之间的内容.所以我们可以看出,标记在这儿就起了某种功能的作用,标记指出了处于它们之间的内容在浏览器中的表现方式.

标记一般都有一个“始标记”和一个“尾标记”，像上面例子中<B>就是始标记，带上一个斜线就变成了尾标记。那么为什么需要两个标记呢？只用一个不行吗？其中始标记告诉浏览器从此处开始标记所表示的功能，而尾标记则告诉浏览器到这里该功能结束。相信这是很容易理解的。当然也有一些单标记，比如最常用的单标记<BR>，它用来表示换行。

新版的Blogger用的是XML，它对标记的检查非常严格，一般标记必须含有结束标记，有时候我们修改了代码却无法保存，或许就是漏了结束标记。

（2）属性。HTML元素可以拥有属性。属性可以扩展HTML元素的能力。

比如你可以使用一个bgcolor属性，使得页面的背景色成为红色，就像这样：

<body bgcolor="red">

（3）注释语句。注释语句的格式为：<!--注释文-->

2.Html的基本结构

<html>

  <head>

    <title>Title of page</title>

  </head>

  <body>

    This is my first homepage. <b>This   text    is bold</b>

  </body>

</html> 

浏览器在解释Html的时候会由上而下执行，像流水一样，这就是以后我们会接触Html的一个“流”的概念，尽管简单，却是基础。

上面的Html基本结构的第一个Tag是<html>，这个Tag告诉你的浏览器这是HTML文件的头。文件的最后一个Tag是</html>，表示HTML文件到此结束。

在<head>和</head>之间的内容，是Head信息。Head信息是不显示出来的，你在浏览器里看不到。但是这并不表示这些信息没有用处。Head信息是预加载的一些信息，比如CSS以及JS就可以放在Head里。

在<title>和</title>之间的内容，是这个文件的标题。你可以在浏览器最顶端的标题栏看到这个标题。

在<body>和</body>之间的信息，是正文。

在<b>和</b>之间的文字，用粗体表示。<b>顾名思义，就是bold的意思。

3.本节最重要的内容，介绍常用的标记。大多数将会在使用的时候简单介绍。Html标记是CSS的样式附着的地方，是“钩子”。

h1,h2等

ul li等

div span p等