|
|
51CTO旗下网站
|
|
移动端

1.4.4 使用CSS样式(2)

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

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

1.4.4 使用CSS样式(2)
 
代码位置:见随书中源代码/第1章目录下的HTML5/Sample1_16.html。
 
  1. 1 <!DOCTYPE html> 
  2. <html><head><title>Sample1_16</title> 
  3. <style type="text/css"> 
  4. 4 body {color:red} 
  5. 5 h1 {color:#00ff00} 
  6. 6 p.ex {color:rgb(0,0,255)} 
  7. 7 h2 {letter-spacing: -0.5em} 
  8. 8 h4 {letter-spacing: 20px} 
  9. 9 p.small {line-height: 90%} 
  10. 10 p.big {line-height: 200%} 
  11. 11 p.small1{line-height: 0.5} 
  12. 12 p.big1{line-height: 2} 
  13. 13 h3 {text-align: center} 
  14. 14 h5 {text-align: left} 
  15. 15 h6 {text-align: right} 
  16. 16 p.a{text-decoration: overline} 
  17. 17 p.b{text-decoration: line-through} 
  18. 18 p.c{text-decoration: underline} 
  19. 19 p.d{text-decoration: blink} 
  20. 20 p.e{text-indent: 1cm} 
  21. 21 p.s{word-spacing: 90px;} 
  22. 22 p.t{word-spacing: -0.5em;} 
  23. 23 </style></head> 
  24. 24 <body> 
  25. 25 <h1>这是标题1</h1> 
  26. 26 <p>这是一段普通的段落。请注意,该段落的文本是红色的。在 <body> 
  27. 27 选择器中定义了本页面中的默认文本颜色。</p> 
  28. 28 <p class="ex">该段落定义了class 的值为ex。所以该段落中的文本是蓝色的。</p> 
  29. 29 <p>下面我们演示的为设置字符之间的间距与设置行间距:</p> 
  30. 30 <h2>这里为标题2</h2><h4>这里为标题4</h4> 
  31. 31 <p>这是拥有标准行高的段落。</br> 
  32. 32 在大多数浏览器中默认行高大约是 110% 到 120%。</br></p> 
  33. 33 <p class="small">这个段落拥有更小的行高。</br>这个段落拥有更小的行高。</p> 
  34. 34 <p class="big">这个段落拥有更大的行高。</br>这个段落拥有更大的行高。</p> 
  35. 35 <p>现在的行高是通过像素规定的,这是拥有标准行高的段落。</br>默认行高大约是 1。</p> 
  36. 36 <p class="small1">这个段落拥有更小的行高。</br>这个段落拥有更小的行高。</p> 
  37. 37 <p class="big1">这个段落拥有更大的行高。</br>这个段落拥有更大的行高。</p> 
  38. 38 <p>接下来我们来演示如何对齐文本:</p> 
  39. 39 <h3>这是标题 3</h3><h5>这是标题 5</h5><h6>这是标题 6</h6> 
  40. 40 <p class="a">这里的文本修饰是overline</p> 
  41. 41 <p class="b">这里的文本修饰是line-through</p> 
  42. 42 <p class="c">这里的文本修饰是underline</p> 
  43. 43 <p class="d">这里的文本修饰是blink</p> 
  44. 44 <p class="e">现在我们来看缩进文本,这里就是缩进文本示例。</p> 
  45. 45 <p class="e">现在我们来看缩进文本,这里就是缩进文本示例。</p> 
  46. 46 <p class="e">现在我们来看缩进文本,这里就是缩进文本示例。</p> 
  47. 47 <p class="e">现在我们来看缩进文本,这里就是缩进文本示例。</p> 
  48. 48 <p class="e">现在我们来看缩进文本,这里就是缩进文本示例。</p> 
  49. 49 <p class="e">现在我们来看缩进文本,这里就是缩进文本示例。</p> 
  50. 50 <p class="s">This is some text.</p><p class="t">This is some text.</p> 
  51. 51 </body></html> 
 
第4~23行为本例文本标签的样式表设置,样式表中各个属性的作用和用法在其相应的文本标签的内容与注释中都有介绍,本部分使用样式表的方式依然是沿用了上个案例中通过设置class属性来设置样式的方式。
 
第25~35行为对上面的样式表进行应用。由于<body>中设置的文本颜色为红色,所以本案例主体中的文本颜色都为红色,除非有特殊设置,即有的样式表用声明class值的方法改变了自己的样式。
 
第36~51行为行高属性、文本修饰、缩进文本属性的应用,设置行高时有两种方式,已经在案例中给出。对于文本修饰,读者对照着段落标签声明的class值去学习即可。最后我们还示例了增加字与字之间的间距,应用时注意为字与字之间添加空格。
 
页面中的文本是HTML开发中多变的一部分,我们在开发时需要为每部分文本设置不同的文本样式,所以本部分介绍的属性读者应该熟练地掌握,并且勤加练习。在练习的时候,读者可以自行更改不同的值以达到学以致用的目的。
 
3.CSS字体应用
 
上一小节我们介绍了如何设置页面中的文本的样式表,本节我们来细化这个问题。设置好文本的样式后,我们来设置一下组成文本的字体的样式,CSS 字体属性定义文本的字体系列、大小、加粗、风格(如斜体)和变形(如小型大写字母)。
 

图1-20为CSS字体案例应用效果图。在平时工作中我们会经常接触Word文档,在文档里面我们会经常设置字体的大小、类型、颜色、加粗、倾斜等,这就是我们现在所讲述的问题——如何开发CSS字体,现在我们来看一下开发代码。
 
代码位置:见随书中源代码/第1章目录下的HTML5/Sample1_17.html。
 
  1. 1 <!DOCTYPE html><html><head><title>Sample1_17</title> 
  2. <style type="text/css"> 
  3. 3 p.serif{font-family:"Times New Roman",Georgia,Serif} 
  4. 4 p.sansserif{font-family:Arial,Verdana,Sans-serif} 
  5. 5 p.normal {font-style:normal} 
  6. 6 p.italic {font-style:italic} 
  7. 7 p.oblique {font-style:oblique} 
  8. 8 p.varnormal {font-variant: normal} 
  9. 9 p.varsmall {font-variant: small-caps} 
  10. 10 p.wenormal {font-weight: normal} 
  11. 11 p.wethick {font-weight: bold} 
  12. 12 p.wethicker {font-weight: 900} 
  13. 13 h1.px {font-size:60px;} 
  14. 14 h2.px {font-size:40px;} 
  15. 15 p.px {font-size:14px;} 
  16. 16 h1.em {font-size:3.75em;}h2.em {font-size:2.5em;} 
  17. 17 p.em {font-size:0.875em;}</style></head> 
  18. 18 <body> 
  19. 19 <p>现在我们演示的为指定字体系列:</p> 
  20. 20 <p class="serif">This is a paragraph, shown in the Times New Roman font.</p> 
  21. 21 <p class="sansserif">This is a paragraph, shown in the Arial font.</p> 
  22. 22 <!--我们建议在所有 font-family 规则中都提供一个通用字体系列。这样就提供了一条 
  23. 23 后路,在用户代理无法提供与规则匹配的特定字体时,就可以选择一个候选字体。需要 
  24. 24 注意的是,只有当字体名中有一个或多个空格(比如 Times New Roman),或者如果字体名包括 
  25. 25 # 或 $ 之类的符号,才需要在 font-family 声明中加引号。--> 
  26. 26 <p>现在我们来看一下font-syle 属性,该属性最常用于规定斜体文本。</p> 
  27. 27 <p class="normal">本段示例的为font-style 属性中的normal 值。</p> 
  28. 28 <p class="italic">本段示例的为font-style 属性中的italic 值。</p> 
  29. 29 <p class="oblique">本段示例的为font-style 属性中的oblique 值。</p> 
  30. 30 <!--font-style 的值为上面演示的三个,斜体(