2006年03月08日

CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。

1.基本语法规范

分析一个典型CSS的语句:

p {COLOR:#FF0000;BACKGROUND:#FFFFFF}

  • 其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
  • 样式声明写在一对大括号"{}"中;
  • COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
  • "#FF0000"和"#FFFFFF"是属性的值(value)。

2.颜色值

颜色值可以用RGB值写,例如:color : rgb(255,0,0),也可以用十六进制写,就象上面例子color:#FF0000。如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。

3.定义字体

web标准推荐如下字体定义方法:

body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }

  • 字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
  • Lucida Grande字体适合Mac OS X;
  • Verdana字体适合所有的Windows系统;
  • Lucida适合UNIX用户
  • "宋体"适合中文简体用户;
  • 如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;

4.群选择器

当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,: p, td, li { font-size : 12px ; }

5.派生选择器

可以使用派生选择器给一个元素里的子元素定义样式,例如这样:

li strong { font-style : italic; font-weight : normal;}

就是给li下面的子元素strong定义一个斜体不加粗的样式。

6.id选择器

用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层

<div id="menubar"></div>

然后在样式表里这样定义:

#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}

其中"menubar"是你自己定义的id名称。注意在前面加"#"号。

id选择器也同样支持派生,例如:

#menubar p { text-align : right; margin-top : 10px; }

这个方法主要用来定义层和那些比较复杂,有多个派生的元素。

6.类别选择器

在CSS里用一个点开头表示类别选择器定义,例如:

.14px {color : #f60 ;font-size:14px ;}

在页面中,用class="类别名"的方法调用:

<span class="14px">14px大小的字体</span>

这个方法比较简单灵活,可以随时根据页面需要新建和删除。

7.定义链接的样式

CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:

a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}

以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。

2006年03月07日

1.所有的标记都必须要有一个相应的结束标记

以前在HTML中,你可以打开许多标签,例如<p>和<li>而不一定写对应的</p>和</li>来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构,所有标签必须关闭。如果是单独不成对的标签,在标签最后加一个"/"来关闭它。例如:

<br /><img height="80" alt="网页设计师" src="../images/logo_w3cn_200×80.gif" width="200" />

2.所有标签的元素和属性的名字都必须使用小写

与HTML不一样,XHTML对大小写是敏感的,<title>和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。例如:<BODY>必须写成<body> 。大小写夹杂也是不被认可的,通常dreamweaver自动生成的属性名字"onMouseOver"也必须修改成"onmouseover"。

3.所有的XML标记都必须合理嵌套

同样因为XHTML要求有严谨的结构,因此所有的嵌套都必须按顺序,以前我们这样写的代码:

<p><b></p>/b>

必须修改为:

<p><b></b>/p>

就是说,一层一层的嵌套必须是严格对称。

4.所有的属性必须用引号""括起来

在HTML中,你可以不需要给属性值加引号,但是在XHTML中,它们必须被加引号。例如:

<height=80>

必须修改为:

<height="80">

特殊情况,你需要在属性值里使用双引号,你可以用",单引号可以使用&apos;,例如:

<alt="say&apos;hello&apos;">

5.把所有<和&特殊符号用编码表示

  • 任何小于号(<),不是标签的一部分,都必须被编码为& l t ;
  • 任何大于号(>),不是标签的一部分,都必须被编码为& g t ;
  • 任何与号(&),不是实体的一部分的,都必须被编码为& a m p;

注:以上字符之间无空格。

6.给所有属性赋一个值

XHTML规定所有属性都必须有一个值,没有值的就重复本身。例如:

<td nowrap> <input type="checkbox" name="shirt" value="medium" checked>

必须修改为:

<td nowrap="nowrap"> <input type="checkbox" name="shirt" value="medium" checked="checked">

7.不要在注释内容中使“–”

“–”只能发生在XHTML注释的开头和结束,也就是说,在内容中它们不再有效。例如下面的代码是无效的:

<!–这里是注释———–这里是注释–>

用等号或者空格替换内部的虚线。

<!–这里是注释============这里是注释–>

以上这些规范有的看上去比较奇怪,但这一切都是为了使我们的代码有一个统一、唯一的标准,便于以后的数据再利用。

DOCTYPE是document type(文档类型)的简写,用来说明你用的XHTML或者HTML是什么版本。

其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义,里面包含了文档的规则,浏览器就根据你定义的DTD来解释你页面的标识,并展现出来。

要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分;除非你的XHTML确定了一个正确的DOCTYPE,否则你的标识和CSS都不会生效。

XHTML 1.0 提供了三种DTD声明可供选择:

  • 过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下:

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

  • 严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如<br>。完整代码如下:

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

  • 框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD。完整代码如下:

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

第一天

开始制作符合标准的站点,第一件事情就是声明符合自己需要的DOCTYPE。

查看本站首页原代码,可以看到第一行就是:

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

打开一些符合标准的站点,例如著名web设计软件开发商Macromedia,设计大师Zeldman的个人网站,会发现同样的代码。而另一些符合标准的站点(例如k10k.net)的代码则如下:

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

那么这些代码有什么含义?一定要放置吗?

什么是DOCTYPE

上面这些代码我们称做DOCTYPE声明。DOCTYPE是document type(文档类型)的简写,用来说明你用的XHTML或者HTML是什么版本。

其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义,里面包含了文档的规则,浏览器就根据你定义的DTD来解释你页面的标识,并展现出来。

要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分;除非你的XHTML确定了一个正确的DOCTYPE,否则你的标识和CSS都不会生效。

XHTML 1.0 提供了三种DTD声明可供选择:

  • 过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下:

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

  • 严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如<br>。完整代码如下:

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

  • 框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD。完整代码如下:

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

我们选择什么样的DOCTYPE

理想情况当然是严格的DTD,但对于我们大多数刚接触web标准的设计师来说,过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站,使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性,也比较容易通过W3C的代码校验。

注:上面说的"表现层的标识、属性"是指那些纯粹用来控制表现的tag,例如用于排版的表格、背景颜色标识等。在XHTML中标识是用来表示结构的,而不是用来实现表现形式,我们过渡的目的是最终实现数据和表现相分离。

打个比方:人体模特换衣服。模特就好比数据,衣服则是表现形式,模特和衣服是分离的,这样你就可以随意换衣服。而原来HTML4中,数据和表现是混杂在一起的,要一次性换个表现形式非常困难。呵呵,有点抽象了,这个概念需要我们在应用过程中逐步领会。

补充

DOCTYPE声明必须放在每一个XHTML文档最顶部,在所有代码和标识之上。

更多细节可以访问W3C的网站

  今天真是气死我了!

  单位网站最近想做一下GOOGLE的推广,正好有个网络公司打过电话来推销,说有GOOGLE的关键词推广。由于我们单位比较小所以第一次想少投入点如果效果好的话再续费,咨询了几家公司都说有开户费600元,和那个公司谈好了第一次交1500元,那家公司说他们主要做关键词包年的,由于我之前有一定的了解所以我自己要后台,自己控制关键词,他们说也可以。

  交钱的时候说第二天就可以给开通,结果过了将近一个星期我崔了好几次,最后威胁说要退费。在过了6天后终于给了后台,当时觉得这个地址有点怪“http://adwords.google.sd.cn"就打电话过去问,他们说GOOGLE后台每个地方的不一样。我登录后看能加关键词也就没在意,可是我提交了关键词后,也通关审核了可在GOOGLE上还是找不到我的广告。再仔细看了一下他这个网站后台,发现在“与我们联系”中发现电话号码不对,因为在GOOGLE上从来没见过电话号码,还写了两个QQ号,这是最不可能的了,GOOGLE会在网站上留QQ号嘛?

  最后打电话咨询了一下GOOGLE的正规代理,他们说现在有伪代理。我才认定我是被代理商给骗了!当时气的我啊!!原来他们给我的是个假后台!也不知道GOOGLE管不管这事!

  现在正在联系退款的事!希望能有人出来管管,现在的公司啊!!!

2006年03月05日

  最近想跟同事给一家空间商做代理,不知道能不能赚钱?

  现在的空间商太多了,很多都不正规,现在找的这家很不错“世纪东方”,我的另一个网站在用他的空间速度不错。

  他的代理只要500元就可以,不知道做代理的可行性大不?

2006年01月18日

  搞BLOG好久了,但是Trackback这词一直不知道什么意思。今天不知道为什么突然想知道,感觉有点想赶潮流的感觉。在GOOGLE上搜了一下,搜到了DONEWS上的BLOG里写的文章。看来现在有关IT的文章搜索的时候基本都到了DONEWS上了。

  看了下面这个文章

Trackback: http://tb.donews.net/TrackBack.aspx?PostId=197144

2006年01月15日

        前一阵G宝盘改版后我发现这样一个功能。可以在你的BLOG上显示你收藏的软件下载、文章下载、音乐下载等等。对大家来说真的很有用啊。

  首先去G宝盘申请一个帐号,登录后在“常用工具”里面找到“Gblock”复制里面的代码,然后在你的公告栏里粘贴这段代码就可以了。我BLOG右面有效果演示。

2006年01月14日

把帐号换成你自己的就可以了

<a href="javascript:d=document;t=d.selection?(d.selection.type!=’None’?d.selection.createRange().text:”):(d.getSelection?d.getSelection():”);void(keyit=window.open(‘http://www.365key.com/storeit.aspx?t=‘+escape(d.title)+’&u=’+escape(d.location.href)+’&c=’+escape(t),’keyit’,’scrollbars=no,width=475,height=575,left=75,top=20,status=no,resizable=yes’));keyit.focus();" title="功能强大的网络收藏夹,一秒钟操作就可以轻松实现保存带来的价值、分享带来的快乐">收藏此页到<font color=DarkOrchid>365K<font color="#57c200">e</font>y</font></a>
<br>
<a href="javascript:d=document;t=d.selection?(d.selection.type!=’None’?d.selection.createRange().text:”):(d.getSelection?d.getSelection():”);void(yesky=window.open(‘http://hot.yesky.com/dp.aspx?t=‘+escape(d.title)+’&u=’+escape(d.location.href)+’&c=’+escape(t)+’&st=2′,’yesky’,’scrollbars=no,width=400,height=480,left=75,top=20,status=no,resizable=yes’));yesky.focus();" title="天极网摘:文摘|图摘|闪摘|乐摘 http://hot.yesky.com">收藏到天极网摘</a>
<br>
<a href="javascript:t=document.title;u=location.href;e=document.selection?(document.selection.type!=’None’?document.selection.createRange().text:”):(document.getSelection?document.getSelection():”);void(open(‘http://bookmark.hexun.com/post.aspx?title=‘+escape(t)+’&url=’+escape(u)+’&excerpt=’+escape(e),’HexunBookmark’,’scrollbars=no,width=600,height=450,left=80,top=80,status=no,resizable=yes’));">添加到和讯网摘</a>
<br>
<a
href="javascript:d=document;t=d.selection?(d.selection.type!=’None’?d.selection.createRange
().text:”):(d.getSelection?d.getSelection():”);void(vivi=window.open(‘http://my.poco.cn/fav/storeit.php?t=‘+escape(d.title)+’&u=’+escape(d.location.href)+’&c=’+escape(t),’_blank’,’scrollbars=no,width=475,height=575,left=75,top=20,status=no,resizable=yes’));" title="收藏到POCO 网摘http://share.poco.cn">收藏到POCO 网摘</a>
<br>
<a href="javascript:d=document;if (!sel) {var sel = ”;};char =d.charset;title=d.selection?(d.selection.type!=’None’?d.selection.createRange().text:”):(d.getSelection?d.getSelection():”);void(keyit=window.open(‘http://www.5seek.com/storeit.asp?title=‘+escape(d.title)+’&url=’+escape(d.location.href)+’&char=’+escape(d.char)+’&sel=’+escape(d.sel),’keyit’,’scrollbars=no,width=515,height=555,left=75,top=20,status=yes,resizable=yes’));keyit.focus();" title="5SEEK–我的网摘|网络收藏夹|让网络改变你的生活!">
收藏此页到<font color=#FF9966>我的网摘</font>
</a>
<br>
<a
href="javascript:d=document;t=d.selection?(d.selection.type!=’None’?d.selection.createRange
().text:”):(d.getSelection?d.getSelection():”);void(vivi=window.open(‘http://vivi.sina.com.cn/collect/icollect.php?pid=www.mwnu.com/blog&title=’+escape(d.title)+’&url=’+escape(d.location.href)+’&desc=’+escape(t),’vivi’,’scrollbars=no,width=480,height=480,left=75,top=20,status=no,resizable=yes’));vivi.focus();" title="收藏的网页将被永久地保存到新浪ViVi收藏夹http://vivi.sina.com.cn">收藏到新浪ViVi收藏夹</a>

把feed换成你自己的就可以了

<a href=http://www.gougou.com/sub_rss.jsp?url=http://feeds.feedburner.com/mwnu target=_blank>通过狗狗订阅</a>

<BR>
<a href=http://www.boyue.com/login_other0.asp?info_addr=http://feeds.feedburner.com/mwnu target=_blank>通过博阅订阅</a>

<BR>

<a href=http://rsshow.net/?q=rss/sub&url=http://feeds.feedburner.com/mwnu target=_blank>通过RSSHOW订阅</a>

<BR>

<a href=http://rss.hexun.com/sub.aspx?feedid=2013 target=_blank>通过和讯博揽订阅</a>

<BR>

<a href=http://www.google.com/reader/preview/*/feed/http://feeds.feedburner.com/mwnu target=_blank>通过<font color="#0038B5">G</font><font color="#C61000">o</font><font color="#F7C718">o</font><font color="#0038B5">g</font><font color="#31A629">l</font><font color="#C61000">e</font> Reader订阅</a>
<br>
<a href="http://add.my.yahoo.com/rss?url=http%3a//feeds.feedburner.com/mwnu " target=_blank>添加到my <font color="#7B147B">yahoo</font></a>
<br>
<a href="http://www.gougou.com/21sqefac" title="用狗狗订阅" target=_blank><img src="http://www.gougou.com/count/a/c/21sqefac.png" border="0" /></a>
<br>
<A id=SingleColumn1_Categories_CatList__ctl6_LinkList__ctl3_Link href="http://www.365key.com/ulee/" target=_blank>my 365k<font color="#57c200">e</font>y</A> <A
id=SingleColumn1_Categories_CatList__ctl6_LinkList__ctl3_RssLink title="订阅my 365key" href="http://www.365key.com/rss/ulee/" target=_blank>(rss)</A>
<br>
<a href="http://www.emailrss.cn/?rss=http://feeds.feedburner.com/mwnu "><img src="http://www.emailrss.cn/images/sub_emailrss.gif" border="0" alt="使用RSS邮天下订阅"/></a>
<br>