校内网代码站 >> 校内网代码教程 >> 关于控制CSS标签的具体教程

关于控制CSS标签的具体教程

[ 校内网代码站 来源: 作者:不详 2008-8-5 14:46:01 ]

校内网的美化 实际就是CSS标签的控制

下面我们具体说下

比如隐藏个人信息,你得先找到定位到它的标识

如果会找选择符后,才能开始对它进行设置。

选择符有三种形式

HTML selector 标签选择符

Class selector 类选择符

ID selector ID选择符

HTML selector就是HTML的标签,如:BODY,DIV,TD,P,H1,H3等等。

Class selector简单说就是<p class="abc"> 这个 class 后的 abc 就是类选择符

ID selector 跟 class selector 的功能很相似。而区别对不同的结构区域的定义,往往用ID选择符。比如<p id="abc"> 这个 id 后的 abc 就是ID选择符

先看下面的代码,上面三个等会我还会详细说到

演示代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>关于校内网选择符查找教程</title>

<link href="css/xiaomei.css" _fcksavedurl=""css/xiaomei.css"" rel="stylesheet" type="text/css">

</head>

<body>

<div id="container">

<div id="header"></div>

<div id="menu">

<ul class="nostyle">

<li><a href="http://www.99xnw.cn/xiaoneiwang/xiaoneiwangjiaocheng/20080114/""" title="博友网">首页</a></li>

<li><a href="" title="博友网">栏目1</a></li>

<li><a href="http://www.99xnw.cn/xiaoneiwang/xiaoneiwangjiaocheng/20080114/""" title="博友网">栏目2</a></li>

<li><a href="" title="博友网">栏目3</a></li>

</ul>

</div>

<div id="content">

<div class="nostyle">内容一</div>

</div>

<div id="footer">

<p>底部信息</p>

</div>

</div>

</body>

</html>

上面只是个例子,所以比较简单,方便做演示。

从上面的代码中我们可以找到分属性那三类的选择符

HTML selector 标签选择符的有:

body div ul li p

Class selector 类选择符的有:

nostyle

ID selector ID选择符的有:

container hearder menu content footer

这三类你都找对了没?

大家在回忆下新手必读:最新CSS美化教程中为什么加整体背景要用body

你再对照上面,是因为所有显示的内容都是由body开始的。

对于HTML标签选择符,我们直接用

对于class标签选择符,前面要加.

对于id标签选择符,前面要加#

所以加个整体背景是

body{background:#颜色代码 url(图片地址);}

给内容部分设置宽度是

#container{width:880px;}

给内容一那部分加个文字颜色设置是

#content .nostyle{color:#000000}

这里说明一下如果是类选择符,我们一般前面要加个id选择符。

你从上面的演示代码应该能看出class="nostyle"用到多次,你设置这个就对所有有用到这个类的部分都进行设置了,而我们只要对内容一进行设置,所以前面要加个#content

上面的代码比较简单,如果是校内网中那么多代码要如何查找呢?

这时我们要用到查找功能.

先打开校内网页面然后点菜单栏上的查看 -> 查看源文件

在弹出的文本编辑器中按编辑 -> 查看

现在看校内网页,比如你要修改导航部分"首页""随便看看"。。。"聊天"的颜色

你会怎么在查?

你要在文本编辑器中的查找内容中输入“首页”,然后点查找下一个,文本编辑器自动帮你跳到第一次出现“首页”的位置,但是这个地方不是我们要修改的,我们再点查找下一个,直到找到如下代码

XML/HTML代码

<div id="navigation">

<h3>主导航:</h3>

<ul>

<li><a href="http://home.xiaonei.com/Home.do">首页</a></li>

<li><a href="http://browse.xiaonei.com/b.do">随便看看</a></li>

<li><a href="http://www.99xnw.cn/xiaoneiwang/xiaoneiwangjiaocheng/20080114/"http://browse.xiaonei.com/s.do">搜索</a></li> "

<li><a href="http://group.xiaonei.com/RandomTribe.do">群组</a></li>

<li><a href="http://www.99xnw.cn/xiaoneiwang/xiaoneiwangjiaocheng/20080114/"http://club.xiaonei.com">论坛</a></li> "

<li><a href="http://www.99xnw.cn/xiaoneiwang/xiaoneiwangjiaocheng/20080114/"http://group.xiaonei.com/university.do?id=1002"><span" class="drop-down">学校</span>

<!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li><a href="http://www.99xnw.cn/xiaoneiwang/xiaoneiwangjiaocheng/20080114/"http://group.xiaonei.com/university.do?id=1002">校园首页</a></li> "

<li><a href="http://photo.xiaonei.com/freshalbum.do">相册</a></li>

<li><a href="http://www.99xnw.cn/xiaoneiwang/xiaoneiwangjiaocheng/20080114/"http://blog.xiaonei.com/freshblog.do">日志</a></li> "

<li><a class="sub-last" href="http://event.xiaonei.com/GetEventList.do?univ=1002">活动</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

<li><a href="http://www.99xnw.cn/xiaoneiwang/xiaoneiwangjiaocheng/20080114/"http://xiaonei.com/im.do">聊天</a></li> "

</ul>

</div>

小提示:查找内容中输入的内容是按"改什么输什么"原则。比如最近大家要隐藏公司信息 那你就查找公司信息

看上面的代码你能找到修改这些文字的选择符呢?

聪明的你这时应该马上就找到"navigation"

然后修改颜色代码如下

#navigation{color:#ff0000;}

如果这样写你已经对了一半了

我们在新手必读:最新CSS美化教程 提到文字美化分有链接和没有链接

因为导航那部分肯定是链接,所以代码要改成以下

#navigation a:link{color:#ff0000;}

如果你代码为以下也有同样的效果

#navigation ul a:link{color:#ff0000;}

#navigation ul li a:link{color:#ff0000;}

这里只是复习下,让大家知道 ul 和 li 是HTML选择符,但是我不推荐这样用

所以我们用第一个

#navigation a:link{color:#ff0000;}

先举这个例子,不懂大家有没有看懂?

找其他部分的选择符也是同样的原理的

责任编辑: 晨冬雪