Html+css基础教程
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
H t m l+c s s基础教程
(适合新手)
在这里我把h t m l和c s s放在一起了，适合新手和在学习的人当成笔记用。
希望对大家有所帮助。
HTML是网页主要的组成部分，基本上一个网页都是由HTML语言组成的，所以要学习网站怎样建设，必须从网页的基本语言学起。
一、HTML的组成结构
HTML分为单标识语句和双标识语句。
<标识>内容如：<br>
<标识>内容</标识> 如：<a href=””>搜狐</a>
标识中存在标识属性用来定义各标识属性的值。
<font size=5> 中心内容</font>
二、HTML全局结构
1、头部。
（标题栏）只要你学过英语，你应该知道头怎么用英文写吧！yes，HEAD就是了；所以，头部的HTML写法就是<head>头部的内容</head>，简单不，大家注意一下，这两个非常相似，只是后一个比前一个多了“/”符号。
类似这样的以后会经常用到。
2、眼睛。
（标题内容）就好像人的眼睛一样，它是心灵的窗口，而一个网页的眼睛应该就是它的页面的标题了，标题怎么说呢？title,yes！大家知道眼睛是长在头上的，所以啦:<title>标题</title>这些应放在<head>和</head>之间。
也就是
<head><title>标题</title></head>
3、身体。
（主体）身体是网页最主要的部分了，因为前面讲的都不是页面所显现出来的，而大家所看到的页面页就是他的身体部分了（当然它的TITLE可以在浏览器的最左上角可以看到），身体----BODY，他的写法也就是：<body>页面内容</body>
最后，别忘了把这些部分组成一体----网页，所以咱们就用<html></html>把他们给包起来。
咱们来大体看看网页的结构：
<html>
<head>
<title>
标题
</title>
</head>
<body>
页面内容
</body>
</html>
在进入主体内容标识讲解之前我想给大家介绍下<body>标识中的常用属性，如：
1、<body leftMargin=0 topMargin=0 marginwidth="0" marginheight="0">内容</body>
leftMargin、topMargin表示：设置页面离外框的左边距和上边距的距离为像素值，默认为1。
marginwidth、 marginheight表示：设置页面文字同页面边缘的间距为像素值，默认为1。
注marginwidth、 marginheight还可以用于表格、框架等中。
2、背景颜色
<body bgcolor="red">我们发现多了个bgcolor其实就是backgroundcolor（背景颜色）的意思，bgcolor="red"设置网页的背景颜色为红色，现在颜色一般都是#ff0000样式的。
3、背景图片
<body backgroud＝"back-ground.gif">中“backgroud”就是设置背景图片的啦，back-ground.gif是背景图片的名字，为什么有的朋友也是如此写的，而网页却没有背景图片呢？其实back-ground.gif是该图片相对于这个页面的位置，比如你做的这个页面放在c:\我的网站\，而背景图片的位置放在c:\我的网站
\images\，那么就得这样写了：<body backgroud＝"images\back-ground.gif">，注意两者的区别！
4、背景音乐
背景音乐和上边介绍的两个有很大的不同，它的代码是放在页面的头部<head></head>里，为什么在这里讲呢？就是因为它也是显示网页的时候我们首先接受到的信息。
看看它的代码吧：
<bgsound src="background_sound.mid" loop="-1">
bgsound 不用说了吧背景声音，background_sound.mid是音乐的文件名，当然也得写它的相对路径哦（关于相对路径，可能有的网友，一下子不能搞明白，我们将会在其他板块介绍的）！loop，循环，那么loop="-1"是什么意思呢？loop是bgsound 的一个属性，当然src也是了，后边跟得就是属性值了，那么loop="-1"就是无限循环的意思，只要是页面打开，音乐不会停止的，loop="1"说明循环一次，等于0就是不循环了，呵呵，简单不！
三、字体及其属性、文字排版标识的使用
1、标题字体<h#> 文字 </h#> # =1，2，3，4，5，6
比如：<h1>今天天气真好！</h1>
注意：这些一般的用在标题上，所以起名叫标题字体；<h#> ...</h#> 这些标记显示黑体字；这些标记自动插入一个空行，不必用 <p> 标记再加空行，因此在一行中无法使用不同大小的字体。
2、字体的大小，用于一般文字。
<font size=#> 文字</font> #=1, 2, 3, 4, 5, 6, 7 or +#, -#
<basefont size=#> #=1, 2, 3, 4, 5, 6, 7
例子：<font size=7>今天天气真好！</font>
3、文字排版、逻辑字体(Logical Style) 标记
换行：<br>，不换行：<nobr>，分段：<p>内容</p>，原始文字样式（原样显示）<pre>内容</pre>，下划线：<u>文字</u>，删除线：<strike>文字</strike>，闪烁：<blink>文字</blink>，增强：<strong>文字</strong>，强调：<em>文字</em>，粗体：<b>文字</b>，斜体：<i>文字</i>大型字体：<big>，小型字体：<small>，文字上标：<sup>，文字下标：<SUB>还有老多，一般的这些了解一下就可以。
4、字体颜色
指定颜色 <font color=#> 文字 </font> # ="#rrggbb" 16 进制数码，或者是下列预定义色彩：Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
对于16 进制编码的颜色，我们可以这样理解rrggbb六个字符：前两个表示红色，中间的两个表示绿色，后两个表示蓝色；那么，红色（red）ff0000，同样绿色（green）00ff00，蓝色0000ff；其它的颜色就是这几个字符（0-9，a-f）的组合。
比如：<font color=red> 文字 </font> 红色文字
<font color=#ff0000> 文字 </font> 红色文字
大家看看<font color=#rrggbb> 文字 </font>是什么颜色的文字
注：在现行新版本浏览器已经慢慢不使用<font>这样的标识了，已基本被CSS样式表取代。
CSS样式表已作为一门课程，所以有兴趣的同学请自行参考电子书《层叠样式表》CSS教程。
四、链接
1、链接基本概念：一般而言，所谓链接就是，在网页中有些字会有特别的颜色，而且字的底下会有条线，当光标移到那些字上时，会变成手指形状，按下去，则会连到别的文章或网站，就像这样（以上这段是给超级新手看的...）。
2、『相对路径』、『绝对路径』
要了解链接，首先必须先了解一下『相对路径』和『绝对路径』，『相对路径』：相对当前目录的路径，『绝对路径』：从根目录下的全路径（一般不推荐使用）。
现在假设一个情形：我们在自己的计算机里设计网页，所有网页相关的档案我们通通放在 c:\www 里面，现在假设
c:\www 里面目前有 index.htm 、 text1.htm 、 p1.gif 、 p2.gif 这四个档案。
ok！
现在我们想在 index.htm 里面设一个链接，能够按一下就连到 text1.htm，那我们该怎么做呢？基本上，有两中方式可以做到，在 index.htm 里面加上下面任一叙述：
<a href="/c|/www/text1.htm">这就是『绝对路径』
<a href="text1.htm">这就是『相对路径』
瞧出什么端倪了没有？嗯嗯....没错，『绝对路径』要给计算机一个非常详尽的位置，让计算机寻着这路径去找到档案。
而『相对路径』就简单多啦！如果没有特别指定，他就会直接在 index.htm 的所在目录（当前目录）下找，也就是在 c:\www 底下去找text1.htm。
如果说，今天我们将 c:\www 里所有的档案都上传到网络上的网页服务器（总不能做好了只给自己看吧！），且该服务器是别人的计算机，而非你自己架设的主机，那么问题就来了！你猜，哪一种链接会出问题？呵呵...答案是『绝对路径』，您猜对了吗？
为什么说『绝对路径』会出问题呢？因为，当您将档案上传到网络上时，您的整个网页目录架构一定会变，到时候，计算机可能找不到。
所以说，没事的话，尽量用『相对路径』来作链接吧！好写又不容易出错。
另外一个情形是：为了整理方便，有些网友喜欢将图档通通放到同一个目录下，如：c:\www\gif\ 底下放进了p1.gif 、p2.gif两个图，而index.htm 、 text1.htm 依旧在 c:\www 底下。
现在我们想在 index.htm 下设个链接到 p1.gif 这图档（链接不限于只能连html文件，图文件、文字文件均可），那我们又该如何来使用『相对路径』呢？他们又不在『同一个目录』下...？
<a href="/c|/www/gif/p1.gif">这是『绝对路径』的写法
<a href="gif/p1.gif">这是『相对路径』的写法
如何？不难吧！（只是字有点多，看到脑子发胀）
总结一下：很乱吗？嗯...看看这表，或许会清楚些。
相对路径表示方式代表链接位置
<a href="text1.htm">text1.htm在目前的目录中（就例子而言，就是在c:\www中）
<a href="docs/text1.htm">text1.htm在名为docs的次目录中（就本例而言，就是在c:\www\docs中）
<a href="../text1.htm">text1.htm在目前目录的上一层目录中（就本例而言，就是在c:\底下了）
说到链接，最基本来看有『内部链接』及『外部链接』，所谓『内部链接』就是自己网站间网页的链接，『外部链接』就是链接到外面去
3、【网页内部的链接】
1. 使用方法：
（1）. 先在欲链接处作记号：<a name="here1">这里是你想链接的点</a>
（2）. 设定链接：<a href="#here1">链接</a>
2. 标志解说：有时候，当某页的内容很多时，我们可以利用网页的内部链接，来使使用者快速的找到资料。
其原理不过是：在欲链接处做个记号（网页的任何地方都可以喔！），然后，链接时就寻这记号，就可以快速找到资料。
很简单吧！
3. 使用范例：
4、【网页外部的链接】
1. 标志解说：链接到外面去，可以扩充您网站的实用性及充实性，也正因这功能，才造就了www五彩缤纷的世界。
由于网络上的服务五花八门，所以不同的服务有不同的链接方法，工友将之整理在下表。
2. 使用范例：
【链接标志的参数】
1. 使用方法：在链接后面加入target=_参数
2. 标志解说：链接的参数并不多，常见的大概就属 target 这参数了，target 的意思是『目标』，也就是网页链接的指向目标，这参数在框窗（frame）里尤为重要！
3. 使用范例：
o target=框窗名称：这在『框架标志』中也有提到，而且也只有在框架（框窗 or frame）中才用得到。
正常而言，框窗有各自的名称，因此，我们可以利用此标志，来指定链接的内容显示到哪一个框窗中。
o target=_blank：将链接的画面内容，开在新的浏览窗口中。
o target=_parent：将链接的画面内容，当成文件的上一个画面。
o target=_self：将链接的画面内容，显示在目前的窗口中。
o target=_top：这个参数可以解决新链接的画面内容，被旧框窗包围的困扰，使用这参数，会将整个画面重新显示成链接的画面内容。
五、图像的使用，也就是images
在html语法中用img来表示，其基本的语法是：
<img src=#> #=图象的 URL，关于url就是指的是图像在网上的地址。
<img alt=#> #=在浏览器尚未完全读入图象时，在图象位置显示的文字；也是图像显示以后，当鼠标放在图片上时所显示的文字。
例子：<img src="/forum/images/cid4u-2.jpg" >
图象在页面中的对齐/布局：
语法：<img align=#> #=left, center, right，使用图像的align属性，其实这一属性布置在这里用到，以后我们在学习表格的时候也会遇到align，它的值left, center, right就是他的中文意思，left居左，center居中，right居右。
例子：<img src="/forum/images/cid4u-2.jpg" align=left> 网人交流论坛欢迎您的光临！
图象和文字的对齐：
语法：<img align=#> #=top, middle, bottom，这里的align和上边的实现的效果不一样，大家从它的值可以看出，它所显示出来的是文字在图片的靠上边、中间、底端。
大家可以对比这看看各自的效果，很容易记住哦！
图像的边框：<img border=#> #=value数字，指的是这个图像的边的宽度！
示例：<img src="/forum/images/cid4u-2.jpg" border=1>
六、表格
表格，一般的用于对网页的内容进行排版，用过word的朋友应该非常明白的。
通常表格还用于网页内容的定位。
表格的基本语法：<table>...</table> - 定义表格
<tr> ...</tr>- 定义表行
<th> ...</th>- 定义表头
<td> ...</td>- 定义表元
表格的边框：border是表格的边框属性，=“1”即边框的宽为一象素，为0表示无边框
跨多行、多列的表元(Table Span)
跨多列的表元 <td colspan=#>
跨多行的表元 <td rowspan=#>
<table border width=# height=#>表格尺寸设置：#为象素值或者百分比。
如width=325,height=80%
<table border cellspacing=#>表元间隙设置：为0是为没有间隙。
<table border cellpadding=#>表元内部空白设置：为0是为没有间隙。
表格内文字的对齐/布局
<table align=#>
<tr align=#> #=left, center, right
<td align=#>
<table valign=#>
<tr valign=#> #=top, middle, bottom, baseline
<td valign=#>
七、框架（Frame）*
框架（Frame）也就是所谓的分割窗口、分割画面、框窗效果
【开始分割】
1. 别急、别急，分割窗口可是一门学问，要分割也是要一步一步来的。
看看刚刚那例子，想象画面是一个蛋糕，你要怎么割，才能割成那样呢？
2. 各位会发现，奇怪，在上面的语法中，怎么都没见到<BODY></BODY>熟悉的身影？呵呵...没错，它已经被待会儿要加进去的<FRAMESET></FRAMESET>卷标给取代了！也就是说，如果我们要分割画面，就要先用
<FRAMESET>卷标告诉计算机说：『喂！我要开始分割了！』此时，<BODY>是派不上用场的，所以躲到一旁凉快去了！
3. 现在开始动手割割看啰！我们先将画面分成左右两边（左边就是框窗 1 了，右边就暂定为 2 等一下还要分割呢！），如下图：
4. 在<FRAMESET>中，我们要告诉计算机到底是要左右分（COLS）？还是上下分（ROWS）。
一开始我们是左右分，所以我们写成<FRAMESET COLS="120,*" >。
COLS="120,*" 就是说，左边那一栏强制定为120点，右边则随窗口大小而变。
除了直接写点数外，我们亦可用百分比来表示，例如COLS="20%,80%"也是可以的。
5. 然后，再将右边的框窗再割成上下两个画面（也就是框窗 2 和 3 了）。
如下图：
6. 看见了没？原本的<FRAME SRC="b.htm" NAME="2">（在第 3 点的语法中）被另一组<FRAMESET
ROWS="100,*" >所取代了！所以要注意喔！第二组<FRAMESET ROWS="100,*" >是被第一组<FRAMESET COLS="120,*" >所包围起来的喔！（乱七八糟了对不对？）
7. 呵呵...不知不觉就大功告成了，其实只要将最后完成的那些语法存成 index.htm，然后再准备三个档
a.htm 、
b.htm 、
c.htm那么就完工啰！当然，这是一个最简单的分割法，我们会再将一些进阶的卷标在底下一一说明。
【其它卷标参数说明】
<FRAMESET COLS="120,*" frameborder=0 framespacing=5>
1. COLS="120,*"
就是垂直切割画面啦！你可以一次切成左右两个画面，当然也可以切成三个，很简单只要写成
COLS="30,*,50" （数字随便您自己调整啦！），依此类推，四个以上当然就是四组数字啦！
2. ROWS="120,*"
就是横向切割画面，也就是将画面上下分开，切法同上。
3. frameborder=0
设定框架的边框，其值只有 0 和 1 ， 0 就是不要边框， 1 就是要显示边框。
边框是无法调整粗细的。
4. framespacing=5
表示框架与框架间的保留空白的距离，以免看起来太挤。
<FRAME SRC="a.htm" NAME="1" frameborder=0 scrolling="no" noresize marginhight=2 marginwidth=2>
1. SRC="a.htm"
设定此框架中要显示的网页名称，每个框架一定要对应一个网页，否则就会产生错误，这里就是要您填入对应网页的名称。
（如果该网页在不同目录，记得路径要写清楚）
2. NAME="1"
设定这个框架的名称，这样才能指定框架来作连结，所以一定要设定喔！当然名称随你高兴取名。
3. frameborder=0
设定框架的边框，其值只有 0 和 1 ， 0 就是不要边框， 1 就是要显示边框。
边框是无法调整粗细的。
4. scrolling="no"
设定是否要显示滚动条，YES是要显示滚动条，NO是无论如何都不要显示，AUTO是视情况显示。
5. noresize
设定不让使用者可以改变这个框框的大小，如果没有设定这个参数，使用者可以很容易的拉动框架，改变其大小。
6. marginhight=2
表示框架高度部份边缘所保留的空间。
7. marginwidth=2
表示框架宽度部份边缘所保留的空间。
【相关用法】
◆ <noframe>
1. 使用方法：<noframe>请换有支持Frame功能的浏览器</noframe>
2. 卷标解说：有些浏览器较为老旧，无法显示Frame的功能，因此，就要使用此卷标，让这些网友知道，该换换浏览器了。
或者，你也可以在这卷标中，摆上没有Frame语法的网页卷标，那么，没有支持Frame功能的浏览器，便会自动显示没有Frame语法的网页。
◆ Iframe标记的使用
提起Iframe，可能你早已将之扔到“被遗忘的角落”了，不过，说起其兄弟Frame就不会陌生了。
Frame标记即帧标记，我们所说的多帧结构就是在一个浏览器窗口中显示多个HTML文件。
现在，我们遇到一种很现实的情况：如有一个教程，是一节一节地上，每页末尾做一个“上一节“、“下一节“的链接，除了每节教程内容不同之外，页面其它部分内容都是相同的，如果一页一页地做笨页面，这似乎太让人厌烦了，这时突发奇想，如果有一种方法让页面其它地方不变，只将教程做成一页一页的内容页，不含其它内容，在点击上下翻页链接时，只改变教程内容部分，其它保持不变，这样，一是省时，另则以后如教程有个三长两短的变动，也很方便，不致于牵一发而动全军了;更重要的是将那些广告Banner、栏目列表、导航等几乎每页的都有的东西只下载一次后就不再下载了。
Iframe标记，又叫浮动帧标记，你可以用它将一个HTML文档嵌入在一个HTML中显示。
它不同于Frame标记最大的特征即这个标记所引用的HTML文件不是与另外的HTML文件相互独立显示，而是可以直接嵌入在一个HTML文件中，与这个HTML文件内容相互融合，成为一个整体，另外，还可以多次在一个页面内显示同一内容，而不必重复写内容，一个形象的比喻即“画中画“电视。
现在我们谈一下Iframe标记的使用。
Iframe标记的使用格式是:
<Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe>
src：文件的路径，既可是HTML文件，也可以是文本、ASP等；
width、height："画中画"区域的宽与高；
scrolling:当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动条；如为Yes，则显示;
FrameBorder：区域边框的宽度，为了让“画中画“与邻近的内容相融合，常设置为0。
比如:
<Iframe src="/homepage" width="250" height="200" scrolling="no" frameborder="0"></iframe>
◆ target=框窗名称
1. 使用方法：<A HREF="d1-1.htm" target=3>显示内容</A>
2. 卷标解说：常常有一个情况是，我想在框窗 1 的地方按下连结，但是希望他的内容出现在框窗 3 中（请参照上面那个图），那应该如何写呢？就像上面加个target=框窗名称就行啦！
◆ target=_top
1. 使用方法：<A HREF="" target=_top>网人俱乐部</A>
2. 卷标解说：有时候，在框窗里会连结到别的站，却发现，新连结的这个站，竟然被框窗包住了，不但难看，而且可能会吃上官司说！所以，这时候你必需加入target=_top这个参数，那么，这个新连到的网站，就会重新占据整个屏幕啦！
Css基础教程
CSS教程(一)认识CSS
Dreamweaver4是现今最好的网站编辑工具之一，用它来给制作网页的CSS样式表会更简单、更方便。
本教程教你如何利用Dreamweaver4在页面中加入CSS，你不用死记硬背的记代码标记，也不用去看很厚的CSS手册，你就可以轻松自如的在网页中运用CSS。
不过首先你要对CSS有一定的了解。
因此，本教程的前面4章为CSS理论知识，主要是对CSS的全面介绍，希望读者看后对CSS的语法、结构、应用有一个全面的了解；后面4章为DW实战，主要是教你如何利用Dreamweaver4灵活运用CSS在网页中。
阅读此文前，你需要对HTML有一定的了解，并会使用Dreamweaver。
一、认识CSS
CSS就是Cascading Style Sheets，中文翻译为“层叠样式表”，简称样式表，它是一种制作网页的新技术。
网页设计最初是用HTML标记来定义页面文档及格式，例如标题<h1>、段落<p>、表格<table>、链接<a>等，但这些标记不能满足更多的文档样式需求，为了解决这个问题，在1997年W3C(The World Wide Web Consortium)颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1, 自CSS1的版本
之后，又在1998年5月发布了CSS2版本，样式表得到了更多的充实。
W3C 把DHTML(Dynamic HTML)分为三个部分来实现：脚本语言(包括JavaScript、Vbscript等)、支持动态效果的浏览器(包括Internet Explorer、Netscape Navigator 等)和CSS样式表。
你可以用CSS精确的控制页面里每一个元素的字体样式、背景、排列方式、区域尺寸、四周加入边框等。
使用CSS能够简化网页的格式代码，加快下载显示的速度，外部链接样式可以同时定义多个页面，大大减少了重复劳动的工作量。
注意：CSS需要IE4(Internet Explorer 4.0)和NC4(Netscape 4.0)以上的浏览器支持，有些效果需要更高版本的浏览器支持。
CSS教程(二)语法
1.基本语法
CSS的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）。
基本格式如下：
selector {property: value}
（选择符{属性：值}）
选择符是可以是多种形式，一般是你要定义样式的HTML标记，例如BODY、P、TABLE……，你可以通过此方法定义它的属性和值，属性和值要用冒号隔开：
body {color: black}
选择符body是指页面主体部分，color是控制文字颜色的属性，black是颜色的值，此例的效果是使页面中的文字为黑色。
如果属性的值是多个单词组成，必须在值上加引号，比如字体的名称经常是几个单词的组合：
p {font-family: "sans serif"}
（定义段落字体为sans serif）
如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开：
p {text-align: center; color: red}
（段落居中排列；并且段落中的文字为红色）
为了使你定义的样式表方便阅读，你可以采用分行的书写格式：
p
{
text-align: center;
color: black;
font-family: arial
}
（段落排列居中，段落中文字为黑色，字体是arial）
2.选择符组
你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义：
h1, h2, h3, h4, h5, h6 { color: green }
（这个组里包括所有的标题元素，每个标题元素的文字都为绿色）
p, table{ font-size: 9pt }
（段落和表格里的文字尺寸为9号字）
效果完全等效于：
p { font-size: 9pt }
table { font-size: 9pt }
3.类选择符
用类选择符你能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。
假如你想要两个不同的段落，一个段落向右对齐，一个段落居中，你可以先定义两个类：
p.right {text-align: right}
p.center {text-align: center}
然后用不在不同的段落里，只要在HTML标记里加入你定义的class参数：<p class="right">
这个段落向右对齐的
</p>
<p class="center">
这个段落是居中排列的
</p>
注意：类的名称可以是任意英文单词或以英文开头与数字的组合，一般以其功能和效果简要命名。
类选择符还有一种用法，在选择符中省略HTML标记名，这样可以把几个不同的元素定义成相同的样式：
.center {text-align: center}
（定义.center的类选择符为文字居中排列）
这样的类可以被应用到任何元素上。
下面我们使h1元素（标题1）和p元素（段落）都归为“center”类，这使两个元素的样式都跟随“.center”这个类选择符：
<h1 class="center">
这个标题是居中排列的
</h1>
<p class="center">
这个段落也是居中排列的
</p>
注意：这种省略HTML标记的类选择符是我们经后最常用的CSS方法，使用这种方法，我们可以很方便的在任意元素上套用预先定义好的类样式。
4.ID选择符
在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式。
ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。
将上例中类用ID替代：
<p id="intro">
这个段落向右对齐
</p>
定义ID选择符要在ID名称前加上一个“#”号。
和类选择符相同，定义ID 选择符的属性也有两种方法。
下面这个例子，ID属性将匹配所有id="intro"的元素：
#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}
（字体尺寸为默认尺寸的110%；粗体；蓝色；背景颜色透明）
下面这个例子，ID属性只匹配id="intro"的段落元素：
p#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}
注意：ID选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。
5.包含选择符
可以单独对某种元素包含关系定义的样式表，元素1里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义，例如：table a
{
font-size: 12px
}
在表格内的链接改变了样式，文字大小为12象素，而表格外的链接的文字仍为默认大小。