CSS 循序渐进一、画个瓢

一、画个瓢

作者 : ML工作室 Louie

　　事到如今，吃“网页制作”这碗饭或者经常上网的朋友都应该对“样式表”这个名字非常熟悉了 .css(Cascading Style Sheets) 可以说是 HTML 中对于基本元素的一种标准规范和功能扩充。您的页面中如果适当加入了定制的 CSS 以后，就会显得特别的整齐，顺眼，倘若再加入适当的效果，那绝对会让到访的朋友大吃一惊的。

　　 DHTML 发布以后， CSS 更是显得功能强大。往往加入一段小小的代码就可以得到足以让众多 Photoshop 美工师吐血的效果。现在完全可以说：不用样式表的网站不是好网站。

　　那么样式表到底是怎样一种代码呢？它又如何与我们的 HTML 文件联系起来呢？别着急，笔者会一步一步地向大家介绍的。

　　俗话说：天下网站一大抄。大部分的 HTML 代码都是点一下“察看源文件”就能看得一清二楚的。所以才造就了现在很多不懂 HTML 的网站大师。 CSS 也是如此，我们大可以从人家绚丽的网站中截取一段代码，依葫芦画瓢的搁在自己的页面里。比如您加入本页面的这段 :

 < style>
p { font-family: " 宋体 "; font-size: 12pt; color: #3333CC; 
text-decoration: none; word-spacing: 10px; } 
< /style>

　　将其添加在 HTML 文件的 < HEAD>< /HEAD> 说明段中。这样一来，这个文件中凡是段落 < P> 容器中的文字，统统被规定成了本页的这种形式 : 字体为宋体，大小为 12pt, 颜色为淡蓝色，无文字修饰，字间距为 10px 。大家看看，能不能看懂一点点呢 ? 其实 CSS 的语法非常简单，无非是 :

　　容器或伪名 { 属性 : 值 }

　　如此而已。而 Style 也可以用三种方法与 HTML 对象联系起来。

　　 1. 可以连接外部文件，比如用下面的格式，在 href= 的后面添加一个文件名 ,( 也可以是一个 URL 地址，那样就能引用英特网上任何一个可链接的文件，爽吧？ ) 就可以引用外部的一个文件规定本页的 CSS 。

　　 < link rel="stylesheet" href="xx">

　　 2. 将 CSS 写在 < HEAD>< /HEAD> 之间的 < STYLE>< /STYLE> 容器里。

　　整个文件看起来是这个样子 :

 < html>
< head>
< title>CSS 教程 < /title>
< meta http-equiv="Content-Type" content="text/html; charset=gb2312">
< style type="text/css">
< !--
.title-1 {  font-family: " 华康简综艺 ", " 宋体 ",
 " 隶书 "; font-size: 24pt; color: #FFCCCC;; text-decoration: none}
body{background-color:black}
p{font-family:" 宋体 ";font-size:12pt; color: #9999FF;
 text-decoration: underline}
table {  font-family: " 宋体 "; font-size: 10pt; color:
 #FFFFCC; background-color: #330066; border-color: 
#CCCCFF #003399 #330033 #FFCCCC; border-style: solid; 
border-top-width: thick; border-right-width: thick; 
border-bottom-width: thick; border-left-width: thick}
-->
< /style>
< /head>

< body>
< span class="title-1">< /span> 
< p align="center" class="title-1"> 欢迎来到 ChinaByte< /p>
< p align="center">CSS 课程设置 < /p>
< table width="80%" border="1" cellspacing="1" cellpadding="1" align="center">
  < tr valign="middle" align="center"> 
    < td width="32%"> 
      < div align="center"> 课程序号 < /div>
    < /td>
    < td width="45%"> 
      < div align="center"> 课程名 < /div>
    < /td>
    < td width="23%"> 
      < div align="center"> 课时 < /div>
    < /td>
  < /tr>
  < tr valign="middle" align="center"> 
    < td width="32%"> 
      < div align="center">0001< /div>
    < /td>
    < td width="45%"> 
      < div align="center"> 画个瓢 ( 入门 )< /div>
    < /td>
    < td width="23%"> 
      < div align="center">3< /div>
    < /td>
  < /tr>
  < tr valign="middle" align="center"> 
    < td width="32%"> 
      < div align="center">0002< /div>
    < /td>
    < td width="45%"> 
      < div align="center"> 字的艺术 ( 排版，字型搭配 )< /div>
    < /td>
    < td width="23%"> 
      < div align="center">5< /div>
    < /td>
  < /tr>
  < tr valign="middle" align="center"> 
    < td width="32%"> 
      < div align="center">0003< /div>
    < /td>
    < td width="45%"> 
      < div align="center"> 表的效果 ( 做 Table,Form)< /div>
    < /td>
    < td width="23%"> 
      < div align="center">5< /div>
    < /td>
  < /tr>
  < tr valign="middle" align="center"> 
    < td width="32%"> 
      < div align="center">0004< /div>
    < /td>
    < td width="45%"> 
      < div align="center"> 扩展功能 ( 滤镜，鼠标等特殊效果介绍 )< /div>
    < /td>
    < td width="23%"> 
      < div align="center">4< /div>
    < /td>
  < /tr>
  < tr valign="middle" align="center">
    < td width="32%">0005< /td>
    < td width="45%"> 不劳而获 ( 介绍用工具做 CSS)< /td>
    < td width="23%">4< /td>
  < /tr>
< /table>
< /body>
< /html>

　　您用上面的代码做成一个 HTML 文件，自然就可以看到如图 1 的效果。

　　 3. 可以在任何的容器中加入属性 STYLE 。比如在页面的某一段加入：

 < P style={font-size:12pt}>
欢迎来到 chinabyte.
< /P>

　　或者利用 Span 容器可以将任何的对象囊括进去 :

 < SPAN style={font-family: 宋体 ;font-size:9pt}>
您好，这里是 Chinabyte< br>
< /SPAN>

　　同样可以使容器内的对象属性为所规定的值。

　　在以下的教程中，笔者自会为大家介绍 Style 的各项功能及其用法。