校内网涂鸦CSS教程入门篇

关键词：入门教程定义属性标记可以样式我们字体一个

此攻略的目的是为了授人以渔，是为那些没有CSS基础，但又想学习这方面知识的同学而写，如果您只是想知道什么样的代码能实现你所想要的效果，那您不必在此浪费时间，到其它帖里去找就是了。如果您是高手或对此知之甚详，也不必在此浪费时间，当然，欢迎大家指出其中的错误和不足。

此教程参考了网上一些文章，结合校内网的实际而写，仅为入门级教程，如果想更深入的学习，请自行查找相关资源。

　　　　
一、什么是css

1、什么是CSS
CSS即Cascading Style Sheet(层叠样式表单)的缩写，我们又常称之为风格样式单Style Sheet，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。简单来说，就是网页内容由HTML来定义，而网页内容表现出来的样式，如字体，颜色，图片位置等由css来定义。

为什么称样式单为层叠的呢？在你还没有对它有一个较全面的了解前，可打一个不很准确的比喻：如我们评价一个人，需要听取大家的意见再汇总，有人说，这个人诚实，有的说干事踏实，有的说很有责任心.....，这样通过这些意见的“层叠”，就可大体地知道这个人的品质；即使是同样的标志，也可以通过层叠使它们显示出不同的特性来，随着学习的深入，你会发现层叠的具体含义及一些妙用的。

　　　　　　　　　　
2、css能做些什么
css能做到的会超出很多人的想象，下面给出两个实例
动态光源效果
Glow滤镜
这属于css+js的高级应用了，下面我们从基础开始讲起。

　　　　　　　　　　
3、如何将样式表加入网页
你可以用以下三种方式将样式表加入您的网页。而越接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。

a、链入外部样式表文件 (Linking to a Style Sheet)
你可以先建立外部样式表文件（.css），然后使用HTML的link对象。示例如下：
<link rel=stylesheet href="http://www.xiaonei.com/css/main.css" type="text/css">

b、定义内部样式块对象 (Embedding a Style Block)
你可以在你的HTML文档的<HTML>和<BODY>标记之间插入一个<STYLE>...</STYLE>块对象。示例如下：
<style type=text/css>

</style>

c、内联定义 (Inline Styles)
内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下：
<p style="margin-left: 0.5in; margin-right:0.5in">这一行被增加了左右的外补丁<p>

前两种方式是我们经常用到的，尤其是第二种方式用得最多，而第三种方式用得相对较少，一般只有在修改涂鸦板内对象属性或自定义的对象属性时才会使用。

　　　　
二、css入门基础

1、CSS的基本语法
在建立样式表之前，我们必须要具有一些 HTML 的基础知识。我们知道， HTML 语言由标志和属性构成， CSS 也是如此。

　　样式表基本语法：

　　 HTML 标志 { 标志属性：属性值；标志属性：属性值；标志属性：属性值；…… }

　　放置样式表有内联和外联等三种不同的方法。现在首先讨论在涂鸦板内直接引用样式表的方法。

　　这个方法必须把样式表信息包括在 < style> 和 < /style> 标记中。

　　例如我们要设置页面中所有 H3 标题字显示为红色，其代码如下：

< STYLE TYPE="text/css">
< !--
H3 { color: red }
-->
< /STYLE>

　　注意， < STYLE> 标记中包括了 TYPE ＝ "text/css" ，这是让浏览器知道你是使用 CSS 样式规则。加入 < !-- 和 --> 这一对注释标记是防止有些老式的浏览器不认识样式表规则，可以把该部分代码忽略不计。

　　在使用样式表过程中，经常会有几个标志用到同一个属性，比如我们规定 HTML 页面中凡是粗体字、斜体字、3 号标题字显示为红色，按照上面介绍的方法应书写为：

　　 B { color: red}

　　 I { color: red}

　　 H3 { color: red}

　　显然这样书写十分麻烦，引进分组的概念会使其变得简洁明了，我们可以写成：

　　 B,I,H3 {color: red}

　　用逗号分隔各个 HTML 标志，把三行代码合并成一行。

　　此外，同一个 HTML 标志，可能定义到多种属性，例如，我们规定把从 H1 到 H6 各级标题定义为红色黑体字，带下划线，则应写为：

　　 H1,H2,H3,H4,H5,H6 {

　　 color: red;

　　 text-decoration: underline;

　　 font-family: " 黑体 "

　　 }

　　注意各个标志属性之间用分号隔开。

　　　　　　　　　　
2、如何建立样式表 (www.popcup.cn)
样式表的建立要符合CSS规则，它们一般被定义成以下形式的句法：

　　HTML标志{标志属性:属性值；标志属性:属性值；标志属性:属性值；标志属性:属性值；...}

　　下面我们分别讲述：
　　a、HTML标志：在上一节我们已简要地介绍了一下，有点需要注意的是，这些标志不带尖括号，如P,Div、Table等而不是<P>、<Div>以及<Table>。
　　b、标志属性：属性值，这是一一对应的，每个属性与属性值对之间用分号隔开。有一点要说明的是，在CSS的属性设置与脚本语言中对属性设置有一点不同，即属性名称的写法，在CSS中，凡属性名为两个或两个以上的单词构成时，单词之间以"-"隔开，比如，背景颜色属性background-color, 而在脚本中，对象属性则连写成backgroundColor，第二个单词首字母大写，如有三个单词则第三个单词首字母也要大写，注意，在Javascript中，是严格区分大小写的。
　　下面看一个具体的例子，比如我们对一个H3标题建立一个样式表：
　　 H3{background-color:#0000ff;font-size:12pt;color:#ffff00}

上面我们分别设置了背景色，字体大小，以及字体颜色等。
　　为了看起来直观一些，上边的例子还可以写成:
　　H3{background-color:#0000ff；
　　　font-size:12pt；
　　　color:#ffff00}

　　有一点值得注意的是，有些属性可以表示多个属性的值，如字体设置，有字体字样：font-family、字体大小：font-size、字体风格:font-style，这些可用一个font属性来表示,
　　如:H3{font-size:15pt；
　　　　 font-family:'宋体'；
　　　　　font-style:italic }
可直接用 H3{font:15pt 宋体 italic}来表示。

　　　　　　　　　　
3、样式类的创建与引用
结合校内网的实际，可以分为两种情况，一种是修改已有内容的属性，另一种是修改自己创建内容的属性。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
相关知识点：CSS中Class与ID的区别
一个Class是用来根据用户定义的标准对一个或多个元素进行定义的。打个比较恰当的比方就是剧本：一个Class可以定义剧本中每个人物的故事线，你可以通过CSS，Javascript等来使用这个类。因此你可以在一个页面上使用class="Frodo" ，class="Gandalf"， class="Aragorn"来区分不同的故事线。还有一点非常重要的是你可以在一个文档中使用任意次数的Class。
　　
至于 ID，通常用于定义页面上一个仅出现一次的标记。在对页面排版进行结构化布局时（比如说通常一个页面都是由一个页眉，一个报头< masthead>，一个内容区域和一个页脚等组成），一般使用ID比较理想，因为一个ID在一个文档中只能被使用一次。而这些元素在同一页面中很少会出现大于一次的情况。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

a、已有内容
修改已有内容的属性，我们首先要获得该内容的HTML标识，例如我要修改顶部导航栏里文字的属性，先看一下源文件里关于header的定义：
<div id="header">
<h1 id="logo"><a href ="http://xiaonei.com/SysHome.do" title="校内网"><img
src ="http://static.xiaonei.com/img/logo.gif" alt="校内网(Logo)" /></a></h1>
<p id="tagline"><a href ="http://xiaonei.com/SysHome.do">大学生互动空间</a></p>
<div id="utility">你好，<a href ="http://xiaonei.com/BasicInfo.do">李响</a><span class="pipe">|</span><a href ="http://xiaonei.com/info/Help.do">帮助</a><span class="pipe">|</span><a href ="http://xiaonei.com/Logout.do">退出</a></div>
<div id="jumpnav">
<h3>跳到：</h3>
<ul>
<li><a href ="#navigation">导航</a></li>
<li><a href ="#content">内容</a></li>
<li><a href ="#footer">底部</a></li>
</ul>
</div>
<div id="navigation">
<h3>主导航：</h3>
<ul>
<li><a href ="http://home.xiaonei.com/Home.do">我的首页</a></li>
<li><a href ="http://browse.xiaonei.com/SocialNet.do">随便看看</a></li>
<li><a href ="http://school.xiaonei.com/university.do?id=5001">学校</a></li>
<li><a href ="http://blog.xiaonei.com/freshblog.do">日志</a></li>
<li><a href ="http://photo.xiaonei.com/freshalbum.do">相册</a></li>
<li><a href ="http://group.xiaonei.com/RandomTribe.do">群</a></li>
<li><a href ="http://event.xiaonei.com/GetEventList.do?univ=5001">活动</a></li>
<li><a href ="http://xiaonei.com/Search.do">搜索</a></li>
<li><a href ="http://xiaonei.com/Invite.do">邀请</a></li>
</ul>
</div>
</div>

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
相关知识点：什么是DIV
这个又是一个涵盖比较大的概念，可以在网上搜索一下DIV CSS，简单点说就是DIV是HTML中的一种标签名称，作用是定义一块区域，而

CSS可以用来修饰它。如果把DIV比作一块桌布的话，CSS是剪刀，可以裁减DIV，CSS还可以是画笔，来给这块没有内容的DIV加上图案或修边，网页上说的DIV+CSS是运用这两者来搭建网页的布局，并用CSS加以修饰。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

这里面有很多标识符，初学者看了可能会头大，其实一开始我们并不用知道这些标识符都是很么意义，有什么作用，先找到我们要修改的内容，然后再顺藤摸瓜，往上找就行了，在有了一定基础之后，再去研究这些标识符的意义和作用吧。

这里以修改“我的首页”等文字属性为例。在源文件里找到“我的首页”这几个字，我们看到<a href ="http://home.xiaonei.com/Home.do">我的首页</a>的是这样的一行代码，<a></a>表示这是一个链接，接着往上找，<li><ul>这些我们暂时可以不予理会，只看这个链接是包含在哪个id或class内的，这时我们找到了<div id="navigation">，如果再住上找，我们就找到了<div id="header">，这个时候就不必再往上找了，因为这已经是一个功能比较独立的区域　了，接下来就是对这些文字属性的修改，我们先看下main.css里关于header部分的定义

/* Header */
#header { position:relative; width:760px; height:57px; overflow:hidden; font-family:Tahoma, Helvetica, sans-serif;}
#header #logo { position:absolute; left:0; top:0; width:132px; height:57px;}
#header #tagline { position:absolute; left:132px; top:0; width:628px; height:33px; background:#3b5998 url(http://static.xiaonei.com/img/hl.gif) 0 0 no-repeat; color:#fff; font-size:14px; text-indent:15px; line-height:33px;}
#header #tagline a { color:#fff; text-decoration:none;}
#accessiblenavigation { display:none;}
#utility { position:absolute; right:0; top:0; width:270px; height:33px; padding:0 15px; background:#3b5998 url(http://static.xiaonei.com/img/hr.gif) 100% 0 no-repeat; color:#d8dfea; text-align:right; line-height:33px;}
#utility .pipe { visibility:hidden;}
#utility a { color:#d8dfea; text-decoration:none;}
#utility a:hover { color:#fff;}
#navigation { position:absolute; left:132px; top:33px; width:628px; height:23px; border-bottom:1px solid #3b5998; background:#6d84b4; font-family:Arial, Helvetica, sans-serif; font-size:13px;}
#navigation h3 { display:none;}
#navigation p { padding-left:15px; color:#fff; line-height:24px;}
#navigation ul { list-style-type:none; padding-left:5px;}
#navigation li { display:inline;}
#navigation a { float:left; height:22px; margin-right:3px; padding:1px 11px 0 9px; color:#fff; text-decoration:none; line-height:22px;}
#navigation a:hover { height:20px; padding:3px 10px 0; line-height:20px;}
/*.widthHeader #navigation { background:#6d84b4 url http://static.xiaonei.com/img/new.gif) 72% 50% no-repeat;}*/
.widthHeader #navigation { background:#6d84b4}

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
相关知识点：关于main.css和home.css
这两个是校内网个人页面预定义的两个css样式表，用的是链入外部样式表文件的方式
这两个文件内容是不同的，大体上说，main.css是从总体上定义页面的样式，而home.css是一些细节部分的样式

下载地址：
http://static.xiaonei.com/css/main.css
http://static.xiaonei.com/css/home.css
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

这是服务器端预定义的样式，我们要做的就是在涂鸦板内通过css代码来自定义它的样式，我们从上往下找，看一下main.css里关于a的定义，我们找到这样一行代码
#navigation a { float:left; height:22px; margin-right:3px; padding:1px 11px 0 9px; color:#fff; text-decoration:none; line-height:22px;}
这里是预定义的内容，我们可以套用这个模式，修改我们想要修改的内容，比如我们要修改这些字的颜色，大小，字体，那么就可以用下面的代码修改
#navigation a { color:文字颜色; font-size:文字大小; font-family:字体; }

main.css和home.css里已经预定义的内容，我们可以参照着来修改，没有定义的，找到相应的html标识符，参考其它对象的定义修改即可。

b、自定义内容

自定义内容多指一些放在涂鸦板内的文字，图片等，当然，我们也可以通过绝对定位使其定位到页面任意位置。

这里面的对象属性修改起来比较灵活，因为在这里我们不仅可以用css来定义，也可以使用html来定义，比如下面的代码
<font color=#009999 ; face="隶书" ; size=3.5>我是文字</font>
这就是用html语法来定义的文字属性，而下面的代码
<div style="position:absolute;Top:1000px;left:266px;width:100px;">我是文字</div>
就是用css来定义的，也可以两种结合着用
<div style="position:absolute;Top:1000px;left:266px;width:100px;"><font color=#009999 ; face="隶书" ; size=3.5>我是文字</font></div>
如果想用html来定义对象，而用css来修改其属性，就上面例子而言，可以这样做
<div id="myfont">我是文字</div>
<style type=text/css></style>

当然，在大多数情况我不用上面这种形式，怎么方便，怎么写代码比较精简就怎么写即可。

　　　　
三、相关知识及技巧

1、如何写外部样式表文件
内部样式代码如下
<style type=text/css>

</style>
如果想把它写到外部样式文件内，然后用第一种方式链入，去掉代码前后的标识符，保留中间的功能代码即可
A:link{COLOR: #999999;FONT-SIZE:9pt;FONT-FAMILY: 隶书}
A:visited{COLOR:#999999;FONT-SIZE:9pt;FONT-FAMILY: 隶书}
A:active{COLOR: #999999;FONT-SIZE:9pt;FONT-FAMILY: 隶书}
A:hover{COLOR: #999999}
body{COLOR:#999999;FONT-SIZE:9pt; FONT-WEIGHT: bolder;FONT-FAMILY:隶书}

　　　　　　　　　　
2、读代码
看完这篇攻略，也许你还不会去写代码，因为那需要经验的积累的，但是我希望你至少能做到会读，很多经验都是由别人那里借鉴来的，下面说一下读代码的方法吧。

随便找个代码
<style type=text/css></style>
通过以上的讲解，我们知道 < STYLE> 标记中包括了 TYPE ＝ "text/css" ，这是让浏览器知道你是使用 CSS 样式规则。加入 < !-- 和 --> 这一对注释标记是防止有些老式的浏览器不认识样式表规则，可以把该部分代码忽略不计。所以这些都是标记，我们可以不理会，而#userAlbum{display:none;}是功能代码，我们先看一下#userAlbum，“#”告诉我们，这个html标识符在源文件里是一个id，那么我们可以在源文件里搜索一下，可以找到<div class="box" id="userAlbum">，看一下它后面的内容，我们知道这是相册部分，而display:none;实现的功能就是把相册部分隐藏。

接下来我们就可以举一反三，尝试着去写了，既然相册的隐藏代码是这个，那么与处于同一级的日志部分我们就可以参照着写出来了，在源文件里搜索一下“××的日志”，可以找到它上面的一行代码<div class="box" id="userBlog">，那么隐藏日志的代码就可以这么写
<style type=text/css></style>

　　　　　　　　　　
3、关于标记
html和css是弱标记性语言（可能说法不是很准确，以前在书上看过这方面的术语，记不清了），简单说就是它是大小写不敏感的，结束标识符也不是强制要求的，举个例子
<style type=text/css></style>
这行代码，代用下面几种方式写都是可用的
<STYLE type=text/css></STYLE>
<STYLE type=text/css></style>
<style type=text/css>
但是不推荐最后一种写法，这样平时应用是可用的，但是与其它代码一起使用时就可能会出问题，所以最好是带上结束标识符。

　　　　　　　　　　
4、常用CSS缩写语法总结

使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则如下：

颜色
16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：
#000000可以缩写为#000;#336699可以缩写为#369;

盒尺寸
通常有下面四种书写方法:

property:value1; 表示所有边都是一个值value1；
property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3
property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left
方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：
margin:1em 0 2em 0.5em;

边框(border)
边框的属性如下：

border-width:1px;
border-style:solid;
border-color:#000;
可以缩写为一句：border:1px solid #000;

语法是border:width style color;

背景(Backgrounds)
背景的属性如下：

background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0;

语法是background:color image repeat attachment position;

你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：

color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%
字体(fonts)
字体的属性如下：

font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;
可以缩写为一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。

　　　　
四、应用举例

1、拒绝单调，让网页超链接拥有多姿多彩的下划线

　　首先，自定义HTML链接下划线的第一步是创建一个图形，在水平方向重复放置这个图形即形成下划线效果。如果要显示出下划线背后的网页背景，可以使用透明的.gif图形。

　　其次，如果下划线图形的高度较大，则必须适当增加文本的高度，使得一行文本的底部与下一行文本的顶部之间有较大的空间，例如p { line-height: 1.5; }。

　　第三，为显示出自定义的下划线，必须隐藏默认的下划线，即a { text-decoration: none; }。

　　第四，为链接元素设置下划线图形，构造出自定义的下划线。假设下划线图形是underline.gif，则设置下划线图形的CSS代码为a { background-image: url(underline.gif); }。

　　第五，我们要让下划线图形在水平方向反复出现，但不能在垂直方向重复出现，否则它将被隐藏到文本的背后。要求下划线只在水平方向重复出现的代码为：a { background-repeat: repeat-x; }。

　　第六，为保证图形出现在链接文字的下方（不管字体的大小），用background-position属性将图形放在链接元素的底部。对于箭头之类的下划线图形，可能还要考虑图形在水平方向的对齐方向。假设要将下划线图形放在右下角，CSS代码为：a { background-position: 100% 100%; }。

　　第七，为了在链接文本的下方给自定义图形留出空间，必须加入适当的空白。下划线图形相对于链接文字的具体位置与文字的大小有关，但一般而言，可以先让底部空白等于下划线图形的高度，必要时再作调整。例如：a { padding-bottom: 4px; }。

　　第八，由于下划线图形放在链接元素的底部，必须保证链接不折行（如允许链接跨越多个行，则只有下面一行的链接文本下面会有自定义的下划线）。用CSS的white-space属性可以防止链接文字折行，即a { white-space: nowrap; }。

　　综上所述，为链接元素定义CSS样式属性的完整例子如：

　　a {
　　　text-decoration: none;
　　　background: url(underline.gif) repeat-x 100% 100%;
　　　padding-bottom: 4px;
　　　white-space: nowrap;
　　}

　　如果要让自定义下划线只在鼠标停留时出现，只要把原来直接设置在链接元素上的CSS background属性改到:hover ，例如：

　　a {
　　　text-decoration: none;
　　　padding-bottom: 4px;
　　　white-space: nowrap;
　　}

　　a:hover {
　　　background: url(underline.gif) repeat-x 100% 100%;
　　}

实例如下：
下划线

　　　　　　　　　　
2、css导航栏
在写导航栏——flash的时候，就有了写导航栏——css篇的想法了，不过由于时间的关系，一直没有写，其实只运用css也可以实现很酷的效果的，而且速度要比flash快，实例如下
Glow滤镜
个人页面左侧导航栏的css修饰代码如下，可以放到涂鸦板里看下效果
<style type=text/css></style>

　　　　
五、附录

html标记总览
文件标记
<HTML> 文件声明让浏览器知道这是 HTML 文件
<HEAD> 开头提供文件整体资讯
<TITLE> 标题定义文件标题，将显示于浏览顶端
<BODY> 本文设计文件格式及内文所在

排版标记
 说明标记为文件加上说明，但不被显示
<P> 段落标记为字、画、表格等之间留一空白行
<BR> 换行标记令字、画、表格等显示于下一行
<HR> 水平线插入一条水平线
<CENTER> 居中令字、画、表格等显示于中间反对
<PRE> 预设格式令文件按照原始码的排列方式显示
<DIV> 区隔标记设定字、画、表格等的摆放位置
<NOBR> 不折行令文字不因太长而绕行
<WBR> 建议折行预设折行部位

字体标记
<STRONG> 加重语气产生字体加粗 Bold 的效果
<B> 粗体标记产生字体加粗的效果
<EM> 强调标记字体出现斜体效果
<I>斜体标记字体出现斜体效果
<TT> 打字字体 Courier字体，字母宽度相同
<U> 加上底线加上底线反对
<H1> 一级标题标记变粗变大加宽，程度与级数反比
<H2> 二级标题标记将字体变粗变大加宽
<H3> 三级标题标记将字体变粗变大加宽
<H4> 四级标题标记将字体变粗变大加宽
<H5> 五级标题标记将字体变粗变大加宽
<H6> 六级标题标记将字体变粗变大加宽
<FONT> 字形标记设定字形、大小、颜色反对
<BASEFONT>基准字形标记设定所有字形、大小、颜色反对
<BIG> 字体加大令字体稍为加大
<SMALL> 字体缩细令字体稍为缩细
<STRIKE> 画线删除为字体加一删除线反对
<CODE> 程式码字体稍为加宽如<TT>
<KBD>键盘字字体稍为加宽，单一空白
<SAMP> 范例字体稍为加宽如<TT>
<VAR> 变数斜体效果
<CITE> 传记引述斜体效果
<BLOCKQUOTE> 引述文字区块缩排字体
<DFN> 述语定义斜体效果
<ADDRESS>地址标记斜体效果
<SUB> 下标字指数
<SUP>下标字下标字

清单标记
<OL> 顺序清单清单项目将以数字、字母顺序排列
<UL>无序清单清单项目将以圆点排列
<LI>清单项目每一标记标示一项清单项目
<MENU>选单清单清单项目将以圆点排列，如<UL> 反对
<DIR> 目录清单清单项目将以圆点排列，如<UL> 反对
<DL>定义清单清单分两层出现
<DT> 定义条目标示该项定义的标题
<DD> 定义内容标示定义内容

表格标记
<TABLE> 表格标记设定该表格的各项参数
<CAPTION> 表格标题做成一打通列以填入表格标题
<TR> 表格列设定该表格的列
<TD> 表格栏设定该表格的栏
<TH> 表格标头相等于<TD>，但其内之字体会变粗

表单标记
<FORM> 表单标记决定单一表单的运作模式
<TEXTAREA> 文字区块提供文字方盒以输入较大量文字
<INPUT> 输入标记决定输入形式
<SELECT> 选择标记建立 pop-up 卷动清单
<OPTION> 选项每一标记标示一个选项

图形标记
<IMG> 图形标记用以插入图形及设定图形属性

连结标记
<A> 连结标记加入连结
<BASE> 基准标记可将相对 URL 转绝对及指定连结目标

框架标记
<FRAMESET> 框架设定设定框架
<FRAME> 框窗设定设定框窗
<IFRAME> 页内框架于网页中间插入框架 IE
<NOFRAMES> 不支援框架设定当浏览器不支援框架时的提示

影像地图
<MAP> 影像地图名称设定影像地图名称
<AREA> 连结区域设定各连结区域

多媒体
<BGSOUND> 背景声音于背景播放声音或音乐 IE
<EMBED> 多媒体加入声音、音乐或影像

其他标记
<MARQUEE> 走动文字令文字左右走动 IE
<BLINK> 闪烁文字闪烁文字 NC
<ISINDEX> 页内寻找器可输入关键字寻找于该一页反对
<META> 开头定义让浏览器知道这是 HTML 文件
<LINK> 关系定义定义该文件与其他 URL 的关系

StyleSheet
<STYLE> 样式表控制网页版面
<span> 自订标记独立使用或与样式表同用

您有网站或博客、百度、校内空间吗？使用Google AdSense，让它为你带来一笔意外的收入

玩转校内，使用FireFox，抵御流氓插件、抗病毒，冲浪更快更爽更安全

发表时间：2007-12-21 | 评论 (0) | 复制本页地址 | 打印

校内网涂鸦CSS教程入门篇

相关文章

发表评论/ 全部评论

推荐文章