|
|
|
|
移动端

1.4.4 使用CSS样式(2)

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

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

技术沙龙 | 6月30日与多位专家探讨技术高速发展下如何应对运维新挑战!


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 的值为上面演示的三个,斜体(italic)是一种简单的字体风格, 
  31. 31 对每个字母的结构有一些小改动,来反映变化的外观。与此不同,倾斜(oblique) 
  32. 32 文本则是正常竖直文本的一个倾斜版本。在浏览器中我们看到的两者没有差别。--> 
  33. 33 <p>这里演示的是font-variant 属性,该属性可以设定小型大写字母。</p> 
  34. 34 <p class="varnormal">This is a paragraph</p> 
  35. 35 <p class="varsmall">This is a paragraph</p> 
  36. 36 <p>现在我们来看一下字体加粗属性font-weight:</p> 
  37. 37 <p class="wenormal">This is a paragraph</p> 
  38. 38 <p class="wethick">This is a paragraph</p> 
  39. 39 <p class="wethicker">This is a paragraph</p> 
  40. 40 <!--数字100 ~ 900 为字体指定了 9 级加粗度,100 对应最细的字体变形,900 对应 
  41. 41 最粗的字体变形。数字 400 等价于 normal,而 700 等价于 bold。--> 
  42. 42 <p>现在我们来演示一下如何设置字体大小:</p> 
  43. 43 <h1 class="px">这是标题1,这里用像素设置字体大小</h1> 
  44. 44 <h2 class="px">这是标题2,这里用像素设置字体大小</h2> 
  45. 45 <p class="px">这是一个段落,这里用像素设置字体大小</p> 
  46. 46 <!--有能力管理文本的大小在 Web 设计领域很重要。但是,不应当通过调整文 
  47. 47 本大小使段落看上去像标题,或者使标题看上去像段落。请始终使用正确的 HTML 
  48. 48 标题,比如使用 <h1> ~ <h6> 来标记标题,使用 <p> 来标记段落。如果没有规 
  49. 49 定字体大小,普通文本(比如段落)的默认大小是 16 像素--> 
  50. 50 <p>现在我们来看一下用em 来设置字体大小:</p> 
  51. 51 <h1 class="em">这是标题1,这里用em 设置字体大小</h1> 
  52. 52 <h2 class="em">这是标题2,这里用em 设置字体大小</h2> 
  53. 53 <p class="em">这是一个段落,这里用em 设置字体大小</p> 
  54. 54 <!--16px=1em,px 表示像素的意思。除了IE 之外,其余浏览器均可支持用像素 
  55. 55 调整字体大小,但是为了在IE 上也能调整并且根据W3C 的推荐,最好使用em 尺寸单位。--> 
  56. 56 </body></html> 
 
 
喜欢的朋友可以添加我们的微信账号:

51CTO读书频道二维码


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

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

读 书 +更多

Groovy入门经典

本书详细介绍脚本语言Groovy,首先介绍Groovy语言的基本特性,包括讨论Groovy方法、程序闭包、列表、映射以及对类和继承的支持,然后介绍如...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊