CSS语法手册(CSS手册)_第1页
CSS语法手册(CSS手册)_第2页
CSS语法手册(CSS手册)_第3页
CSS语法手册(CSS手册)_第4页
CSS语法手册(CSS手册)_第5页
已阅读5页,还剩30页未读 继续免费阅读

付费下载

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

#<small>田涛v/small>或者vsmall><small>〈small>田涛v/small></small></small>如果你在字体标签中设置了size=“...“,那么<big>标签将不起作用。除了以上常用字体标签元素外,HTML还包含很多其它标签,但不我们不多用。二.CSS(层叠样式表)改变字体在过去页面上的字体是一成不变的,静静的呆在那。当DHTML(动态网页)出现后,我们能有更多方式控制字体了。一般来说,动态字体的实现核心是CSS(层叠样式表)加JavaScript。使用了以上两项技术后,字体就能产生许多变化。CSS定义字体的标签元素font-family:设置字体字族。<spanstyle="font-family:黑体,宋体(GB)">ffl涛v/span>font-sytle:设置字体类型。<spanstyle="font-style:normal"〉田涛v/span>font-weight:设置字体的字重。<spanstyle="font-weight:bold">田涛</span>font-size:设置字体大小。<spanstyle="font-size:14pt">田涛</span>font-decoration:修饰文本字体,比如带下划线''underline"。<spanstyle="text-decoration:underline">IB^</span>对于以上的字体设置,我们可以采用一个方便的方法:<spanstyle="font:normalbold14pt黑体”>田涛</span>在style定义的次序是:font-style,font-weightzfont-size,font-family.CSS定义字体和<font>定义字体的冲突对于CSS定义字体和<font>定义字体,我们都要注意以下问题,比如有以下字体设置:<spanstyle="font-family:宋体(KSC);font-size:200pt"><font>m涛v/font>v/span>这时侯字体大小将以font-size:200pt的定义来设置。但如果你在<font>中加入size属性,比如:<spanstyle="font-family:宋体(KSC);font-size:200pt"xfontsize="5">田涛</font></span>这时侯,字体的大小以size的设置为准,font-size:200pt将不起作用。其它的属性也是一样。如果你无需动态字体,就利用HTML4.0的vfont>来定义字体,需要动态字体时,就需要使用CSS和JavaScritp来定义字体及引发事件。3.定义CSS字体属性类—般我们在制作动态字体时,我们会首先利用CSS定义出页面字体的整个属性,然后在页面中引用,而不用对每段文本进行设置,这也是实现动态字体首先一步。<html><head><styletype="text/css">.tt2{font-family:"黑体";font-size:16px;font-style:normal;line-height:17px}</style></head><body><pclass="tt2">田涛</p></body></html>在以上代码中,''田涛"两个字引用了.main_2类定义的字体样式。当然你可以在<style></style>中定义不同的字体样式,以便页面中根据不同字体加以引用。比如:<html><head><styletype="text/css">.ttl{font-family:"宋体“;font-size:15px;font-style:normal;}.tt2{font-family:"黑体";font-size:16px;font-style:normal;}</style></head><body><pclass="ttl">ffl涛v/p><pclass="tt2">田涛</p></body></html>三.让字体动起来要让字体动起来,我们可以利用本身CSS的事件或者让JavaScript引发事件。1.CSS引发事件例一<html><head><styletype="text/css"><!-a:link{color:black;text-decoration:none}a:visited{color:white;text-decoration:none}a:hover{color:blue;text-decoration:underline)—></style></head><body><p><ahref="/">m涛v/a>v/p></body></html>link定义的是链接在页面显示的颜色(黑色)及链接没有下划线,visited定义的是单击链接后的颜色(白色),hover定义的是指向链接时的动态颜色。以上实例表示,当指向链接''田涛“后字体颜色从黑色变成蓝色,并加下划线,单击链接后,链接颜色变成白色。例二<html><head><titlex/title></head><body><ponmouseover="this.style.fontSize=200"onmouseout="this.style.fontSize=100"</p></body></html>以上实例是利用内联改变字体样式,当鼠标指向''田涛"时字体因为定义了this.style.fontSize=200,这两个字放大至200pt,当鼠标移开''田涛"时,因定义了this.style.fontSize=100,这两个字体缩小到lOOpt.2.JavaScript引发事件<html><head><style>Hl.italic{font-style:italic)Hl.bold{font-style:bold;}</style></head><body><scriptlanguage="JavaScript">functionchangeHead(){if(Hl_l.className==,,bold"){Hl_l.className=nitalic"}else{Hl_l.className="bold";))</script><hlid="Hl_l"class="bold"onmouseover="changeHead()"onmouseout="changeHead()">l±li§37373737</hl></body></html>在上面的实例当中,我们首先定义了两个CSS类Hl.italic和Hl.bold,然后利用JavaScript脚本定义函数changeHead()z最后在需要的地方引发事件执行定义好的函数。这里我们引发了两个单击事件onmouseover和onmouseout。在这里我还要说一点,因为你定义了H1两个类Hl.italic和Hl.bold,所以当你在引用时,要首先设置class="boldn,表示字体以bold样式出现。然后,移动鼠标到''田涛''上,

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论