关于控制CSS标签的具体教程
校内网的美化 实际就是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;}
先举这个例子,不懂大家有没有看懂?
找其他部分的选择符也是同样的原理的












