|
|
|
|
移动端

1.4.4 使用CSS样式(3)

《H5和WebGL 3D开发实战详解》第1章HTML 5开发基础—进入WebGL 世界的第一道坎,本书是介绍WebGL技术的一本书,但是在进入WebGL世界之前我们需要迈过HTML门槛,因为这是通向WebGL的必经通道。如果连最基本的HTML开发也做不了,那么开发WebGL就是一件遥不可及的事情。本节为大家介绍使用CSS样式。

作者:吴亚峰/于复兴/索依娜来源:人民邮电出版社|2017-10-31 18:34

【新品产上线啦】51CTO播客,随时随地,碎片化学习

1.4.4 使用CSS样式(3)
 
第2~18行为样式表的声明。在CSS中,有两种不同类型的字体系列名称:通用字体系列——拥有相似外观的字体系统组合和特定字体系列——具体的字体系列。除了各种特定的字体系列外,CSS定义了5种通用字体系列:Serif、Sans-serif、Monospace、Cursive、Fantasy字体。
 
第19~32行演示了如何指定字体与规定斜体文本。如果用户代理上没有安装指定字体,就只能使用用户代理的默认字体来显示本元素。除此之外我们可以选择一个候选字体,本案例就是这么操作的。斜体文本的区别我们在注释中已经介绍清楚,这里便不再介绍了。
 
第33~56行为字体的加粗与设置文本的字体大小示例。HTML中的文本粗度有9级,分别是100~900,100为最细粗度,900为最粗粗度,400等价于font-weight值中的normal,700等价于bold。设置文本字体大小时,W3C推荐使用em尺寸单位,因为有些浏览器不支持像素大小。
 
CSS字体样式表的本质就是通过font-family、size、stretch、style、variant、weight这些属性来设置文本的系列、尺寸、拉伸、字体风格、小型大写字体或者正常字体显示文本、字体粗细。通过对字体属性的一系列设置,并与文本样式表配合,进而实现制作精美界面的目的。
 
4.CSS链接与表格应用
 
本小节为CSS部分的最后一小节,本部分我们将要讲述CSS链接与表格的属性应用。由于篇幅限制,这里省略了列表属性的应用,尽管不是描述性的文本的任何内容都可以被认为是列表,但是CSS中列表样式不太丰富而且应用比较简单,所以便没有对其进行介绍。
 

图1-21为CSS链接和表格案例应用效果图。介绍链接属性之前我们来介绍一下链接的4种状态:link、visited、hover、active,分别代表未访问的链接、用户已经访问过的链接、鼠标直接位于链接上方、正在被单击的链接现在我们来看一下开发过程。
 
代码位置:见随书中源代码/第1章目录下的HTML5/Sample1_18.html。
 
  1. 1 <!DOCTYPE html> 
  2. <html><head><title>Sample1_18</title> 
  3. <style type="text/css"> 
  4. 4 a:link {color:#FF0000;}<!--未被访问的链接--> 
  5. 5 a:visited {color:#00FF00;}<!--已被访问的链接--> 
  6. 6 a:hover {color:#FF00FF;}<!--鼠标指针移动到链接上--> 
  7. 7 a:active {color:#0000FF;}<!--正在被单击的链接--> 
  8. 8 a.one:link {color:#ff0000;} 
  9. 9 a.one:visited {color:#0000ff;} 
  10. 10 a.one:hover {font-size:150%;} 
  11. 11 a.two:link {color:#ff0000;} 
  12. 12 a.two:visited {color:#0000ff;} 
  13. 13 a.two:hover {font-family:'微软雅黑';} 
  14. 14 #customers{ 
  15. 15 font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
  16. 16 width:100%;border-collapse:collapse;} 
  17. 17 #customers td, #customers th{ 
  18. 18 font-size:1em;border:1px solid #98bf21; 
  19. 19 padding:3px 7px 2px 7px;} 
  20. 20 #customers th { 
  21. 21 font-size:1.1em;text-align:left;padding-top:5px; 
  22. 22 padding-bottom:4px;background-color:#A7C942;color:#ffffff;} 
  23. 23 #customers tr.alt td { 
  24. 24 color:#000000;background-color:#EAF2D3;} 
  25. 25 </style></head> 
  26. 26 <body> 
  27. 27 <p><b><a href="Sample1_1.html" target="_blank"> 
  28. 28 这是一个链接</a></b></p> 
  29. 29 <!--为了使定义生效,a:hover 必须位于 a:link 和 a:visited 之后, 
  30. 30 a:active 必须位于 a:hover 之后。--> 
  31. 31 <p>对于链接,除了设置color 之外,我们还可以设置背景颜色, 
  32. 32 就是在样式表中将color 换为background-color 即可。</p> 
  33. 33 <p>除了改变链接的颜色外,我们还可以改变链接字体、尺寸等, 
  34. 34 这些实现起来并不困难,我们用到的方法全是之前我们所讲过的:</p> 
  35. 35 <p><b><a class="one" href="Sampel1_1.html" target="_blank"> 
  36. 36 这个链接可以改变字体尺寸</a></b></p> 
  37. 37 <p><b><a class="two" href="Sampel1_1.html" target="_blank"> 
  38. 38 这个链接可以改变字体</a></b></p> 
  39. 39 <p>现在我们来介绍一下表格的样式表,我们首先做一个精美的表格。</p> 
  40. 40 <table id="customers"><tr> 
  41. 41 <th>Company</th><th>Contact</th><th>Country</th></tr> 
  42. 42 <tr><td>Apple</td><td>Steven Jobs</td><td>USA</td></tr> 
  43. 43 <tr class="alt"><td>Baidu</td><td>Li YanHong</td><td>China</td></tr> 
  44. 44 <tr><td>Google</td><td>Larry Page</td><td>USA</td></tr> 
  45. 45 <tr class="alt"><td>Lenovo</td><td>Liu Chuanzhi</td><td>China</td></tr> 
  46. 46 <tr><td>Microsoft</td><td>Bill Gates</td><td>USA</td></tr> 
  47. 47 <tr class="alt"><td>Nokia</td><td>Stephen Elop</td><td>Finland</td></tr></table> 
  48. 48 </body></html> 
 
第4~24行声明了样式表。需要注意的是,在设置连接部分时为了使定义生效,a:hover必须位于a:link和a:visited之后,a:active必须位于a:hover之后。读者需要自己体验一下4种链接方式有何区别。
 
第27~38行为设置链接标签属性示例。我们在将鼠标移动到链接部分时会发现链接的字体大小、粗细、字体、颜色都会有不同的变化,这就是不同的链接属性起到的作用。读者对应内容提示自行试验一下便会明白。
 
第39~48行用于制作一个表格。通过声明表格的样式表,我们在主体部分只是构建了一个表格,但是计算机通过样式表做出来的是一个全新的表格。这个表格的样式表属性用法比较全面,而且会被经常使用,所以在此我们便介绍了一下。
 
案例中我们只开发了一个表格,没有应用全部的表格属性,剩余的部分我们在之前讲述表格标签时介绍过,但是应用到CSS时会有点差别。若有读者想了解这方面的知识,那么可以上网查询CSS表格应用属性,里面会有比较详细的介绍。
 
到此为止我们便将CSS层叠样式表介绍完毕,短短十几页的篇幅肯定不能将CSS的全部内容介绍完毕,但是我们尽力将最常用与精髓部分介绍了。在应用时,除了学习的知识之外,读者应该自己多多查阅一些资料,勤加练习多改一些内容,这样会学得更加充实。
 
 
喜欢的朋友可以添加我们的微信账号:

51CTO读书频道二维码


51CTO读书频道活动讨论群:365934973
 
【责任编辑:book TEL:(010)68476606】

回书目   上一节   下一节
点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

PHP程序开发范例宝典

本书全面介绍了应用PHP进行网站开发的各种技术和技巧。全书分为20章,内容包括PHP的运行环境配置、表单及表单元素的应用、CSS与JavaScript...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊