📄 fd78.htm
字号:
<html>
<head>
<title>CSS 循序渐进一、画个瓢</title>
<meta content="text/html; charset=gb2312" http-equiv=Content-Type>
</head>
<p align="center"><script src="../../1.js"></script></a>
<body bgcolor="#ffffff" leftmargin="5" topmargin="1" marginheight="5" marginwidth="5">
<div align=center>
<table border=0 cellpadding=0 cellspacing=0 width=680 align="center">
<tbody>
</tr>
</tbody>
</table>
<table border=1 bordercolordark=#ffffff bordercolorlight=#ffffff cellpadding=0
cellspacing=0 width=680 align="center">
<tbody>
<tr>
<td bgcolor=#F9D23C height=14>
<div align=center class=H1><font color="#FFFFFF">CSS 循序渐进一、画个瓢</font></div>
</td>
</tr>
<tr valign=top>
<td class=H1 height=36>
<p class=H1> </p>
<p align=center><font class=a><b>一、画个瓢</b> </font></p>
<p align=right> 作 者 : ML工作室 Louie </font></p>
<p> 事到如今，吃“网页制作”这碗饭或者经常上网的朋友都应该对“样式表”这个名字非常熟悉了 .css(Cascading
Style Sheets) 可以说是 HTML 中对于基本元素的一种标准规范和功能扩充。您的页面中如果适当加入了定制的 CSS 以后，就会显得特别的整齐，顺眼，倘若再加入适当的效果，那绝对会让到访的朋友大吃一惊的。
</font></p>
<p> DHTML 发布以后， CSS 更是显得功能强大。往往加入一段小小的代码就可以得到足以让众多 Photoshop
美工师吐血的效果。现在完全可以说：不用样式表的网站不是好网站。 </font></p>
<p> 那么样式表到底是怎样一种代码呢？它又如何与我们的 HTML 文件联系起来呢？别着急，笔者会一步一步地向大家介绍的。
</font></p>
<p> 俗话说：天下网站一大抄。大部分的 HTML 代码都是点一下“察看源文件”就能看得一清二楚的。所以才造就了现在很多不懂
HTML 的网站大师。 CSS 也是如此，我们大可以从人家绚丽的网站中截取一段代码，依葫芦画瓢的搁在自己的页面里。比如您加入本页面的这段
: </font></p>
<pre> < style>
p { font-family: " 宋体 "; font-size: 12pt; color: #3333CC;
text-decoration: none; word-spacing: 10px; }
< /style>
</font></pre>
<p> 将其添加在 HTML 文件的 < HEAD>< /HEAD> 说明段中。这样一来，这个文件中凡是段落
< P> 容器中的文字，统统被规定成了本页的这种形式 : 字体为宋体，大小为 12pt, 颜色为淡蓝色，无文字修饰，字间距为
10px 。大家看看，能不能看懂一点点呢 ? 其实 CSS 的语法非常简单，无非是 : </font></p>
<p> 容器或伪名 { 属性 : 值 } </font></p>
<p> 如此而已。而 Style 也可以用三种方法与 HTML 对象联系起来。 </font></p>
<p> 1. 可以连接外部文件，比如用下面的格式，在 href= 的后面添加一个文件名 ,( 也可以是一个
URL 地址，那样就能引用英特网上任何一个可链接的文件，爽吧？ ) 就可以引用外部的一个文件规定本页的 CSS 。 </font></p>
<p> < link rel="stylesheet" href="xx"> </font></p>
<p> 2. 将 CSS 写在 < HEAD>< /HEAD> 之间的 <
STYLE>< /STYLE> 容器里。 </font></p>
<p> 整个文件看起来是这个样子 : </font></p>
<pre> < 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>
</font></pre>
<p> 您用上面的代码做成一个 HTML 文件，自然就可以看到<a
href="javascript:if(confirm('../../../pic/style01.gif_20_20\n\nThis_20file_20was_20not_20retrieved_20by_20Teleport_20Pro,_20because_20it_20is_20addressed_20on_20a_20domain_20or_20path_20outside_20the_20boundaries_20set_20for_20its_20Starting_20Address._20_20\n\nDo_20you_20want_20to_20open_20it_20from_20the_20server@'))window.location='../../../pic/style01.gif'"
target=_blank tppabs="../../../pic/style01.gif">如图 1 的效果</a>。 </font></p>
<p> 3. 可以在任何的容器中加入属性 STYLE 。 比如在页面的某一段加入： </font></p>
<pre> < P style={font-size:12pt}>
欢迎来到 chinabyte.
< /P>
</font></pre>
<p> 或者利用 Span 容器可以将任何的对象囊括进去 : </font></p>
<pre> < SPAN style={font-family: 宋体 ;font-size:9pt}>
您好，这里是 Chinabyte< br>
< /SPAN>
</font></pre>
<p> 同样可以使容器内的对象属性为所规定的值。 </font></p>
<p> 在以下的教程中，笔者自会为大家介绍 Style 的各项功能及其用法。 </font></p>
<p class=H1> </span></p>
<p> <br>
<font
color=#ffa000> <b>
</td>
</tr>
</tbody>
</table>
</div>
<p align="center"><script src="../../2.js"></script></a>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -