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

1.4.4 使用CSS样式(1)

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

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

1.4.4 使用CSS样式(1)
 
本小节我们会就CSS具体的某些样式,比如背景、文本、字体、链接等等来详细讲解其用法,会有翔实的代码与运行效果图来帮助我们理解这些样式。本小节介绍的都是CSS的基础样式,由于篇幅限制,还有许多CSS的高级应用我们并没有讲述,有兴趣的读者可以自己查找资料学习。
 
1.CSS背景应用
 
CSS允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。CSS在这方面的能力远远在HTML之上。本节我们在介绍应用各种背景案例时,也会将CSS背景的属性介绍给大家,读者在学习的同时也应注意一些这方面内容。
 
图1-18所示为CSS背景属性应用。本案例中的背景图片放置在中间,而且当滚动条被拖动时背景图片不会改变位置。本部分内容中,除了书中讲述的部分外,读者还需注意代码内容,段落标签与注释中的很多内容说明了该属性的注意事项,现在我们来看一下案例的开发过程。
 

代码位置:见随书中源代码/第1章目录下的HTML5/Sample1_15.html。
 
 
  1. 1 <!DOCTYPE html> 
  2. <html><head><title>Sample1_15</title> 
  3. <style type="text/css"> 
  4. 4 body {background-image:url(pic/background1.png); 
  5. 5 background-repeat: no-repeat; 
  6. 6 background-attachment:fixed; 
  7. 7 background-position:center;} 
  8. 8 <!--背景图片的重复方式我们设置的为不重复方式。X 为在水平方向上重复, 
  9. 9 不加-X 或者Y 时为水平方向与垂直方向上都重复。no-repeat 为不重复,只显示一张图片。 
  10. 10 将attachment 属性设置为fixed 才能保证position 属性在Firfox 与Opera 中正常工作。 
  11. 11 设置位置时,除了规定的几个值之外,我们还可以自定义%与像素值,用两个百分数 
  12. 12 代替center 即可。--> 
  13. 13 h1 {background-color: #00ff00} 
  14. 14 h2 {background-color: transparent} 
  15. 15 p.no1{background-color: rgb(250,0,255)} 
  16. 16 p.no2 {background-color: gray; padding: 20px;} 
  17. 17 span.highlight{ 
  18. 18 background-color:blue} 
  19. 19 <!--background-color 后面跟一个颜色值为设置背景颜色,因为本例设置了背 
  20. 20 景图片,所以就没有设置背景颜色。若想设置主体的背景颜色,直接将 
  21. 21 background-image 改为color 即可。若想在具体的某些元素中应用背景,那么直接在 
  22. 22 Othstep (float edgeo,float edgel.genType x)里设置背景颜色 
  23. 23 的方式,背景图片的设置与其类似,便不再演示。--> 
  24. 24 </style></head> 
  25. 25 <body> 
  26. 26 <h1>这是标题 1</h1><h2>这是标题 2</h2> 
  27. 27 <p class="no1">这是段落</p> 
  28. 28 <p class="no2">这个段落设置了内边距。</p> 
  29. 29 <p><span class="highlight">这是文本。</span> 这是文本。 这是文本。 这是文本。 
  30. 30 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 
  31. 31 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 
  32. 32 <span class="highlight">这是文本。</span></p> 
  33. 33 <p>我们这么写代码是为了演示现在这样设置背景图片时,图像不会随页面的其余部分滚动。</p> 
  34. 34 <p>我们除了可以在style 部分逐条设置属性之外,还可以这样:其与上面那样设置效果一样,</br> 
  35. 35 但是不容易分辨。background: #ff0000 url(pic/background1.png) no-repeat fixed center 
  36. </p> 
  37. 36 <p>这里我们来介绍一下CSS 背景中的属性:</p> 
  38. 37 <p>background 为简写属性,作用是将背景属性设置在一个声明中。</p> 
  39. 38 <p>background-attachment 用于设置背景图片是否固定或随页面其余部分移动,</br> 
  40. 39 除了上面我们写的fixed 之外,还有scroll,为默认值,表示图像会随着页面移动。 
  41. 40 inherit 规定应该从父元素继承本属性的设置。</p> 
  42. 41 <p>background-color 用于设置背景颜色,</p> 
  43. 42 <p>background-image 用于设置背景图片,</p> 
  44. 43 <p>background-position 用于设置图片的起始位置,</p> 
  45. 44 <p>设置起始位置的值时,不论用固定的几个值还是自定义的%或者像素,</p> 
  46. 45 <p>都为两个值,如果我们只规定了一个值,那么第二个值默认会为50%或者。center</p> 
  47. 46 <p>top、bottom、center 会与left、right、center 搭配。</p> 
  48. 47 <p>background-repeat 用于设置背景图片的重复方式。</p> 
  49. 48 <p>其值有no-repeat(不重复),repeat-x 为水平方向重复。</p> 
  50. 49 <p>repeat-y 为垂直方向重复,repeat 为默认值,表示水平方向与垂直方向都重复。</p> 
  51. 50 <p>inherit 为继承父元素本属性的值。</p> 
  52. 51 <p>图像不会随页面的其余部分滚动。</p> 
  53. 52 …//此处省略一些同类代码,读者可以自行查阅中的源代码。 
  54. 53 </body></html> 
第4~12行为设置背景图片的各个属性的样式表。在一般开发中如果我们不设置重复方式时,默认重复方式为纵向与横向重复。如果不设置background-attachment属性,那么在一些浏览器中position无法工作。
 
第13~24行为给页面中的文本标签设置的样式表。一般情况下背景图片与背景颜色是可以互相顶替的,由于现在的页面越来越精美,所以图片的应用越来越多,但是背景颜色也是不可或缺的一部分,在日后的开发中读者应该根据需求选择。
 
第35~40行为前面设置的样式表在相应的一些文本标签的应用示例。此部分中我们设置了class值,读者可以根据相应的class值来对应自己的样式表,学习样式表的开发。CSS部分代码主要在上面的部分,<body>中的标签应用我们在之前已经讲过。
 
第41~53行主要讲述了设置位置的方法。一般在HTML开发中涉及到位置的应用时都会有用像素设置或者用百分数设置,两种方式都可以,用百分数设置可以使位置的改变更加形象。
 
CSS背景应用基础属性的讲解到这里已经结束。虽然案例十分简单,但是页面的背景是我们可以看到的一大部分,结合本节所学用一些巧妙的技巧我们可以开发出很多精美的页面。读者学到这些基本内容后应该勤加练习,才能掌握开发精美界面的技巧。
 
2.CSS文本应用
 
我们在日常浏览网页时不难发现,页面中的大部分内容就是各种文本,所以文本的排版应用在HTML开发中占有很重要的地位。比起在每段文本标签中都加入文本的样式,用统一的样式表来设置这些文本会更加简便。
 
图1-19为CSS文本案例应用效果图,CSS 文本属性可定义文本的外观。通过文本属性,可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进,等等。本案例中这些属性全部被应用了,现在我们来看一下开发过程。
 

 
 
喜欢的朋友可以添加我们的微信账号:

51CTO读书频道二维码


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

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

读 书 +更多

数据库系统工程师考试全程指导

为了满足广大考生的需要,我们组织了参与过多年资格考试命题或辅导的教师,以新的考试大纲为依据,编写了《数据库系统工程师考试全程指导》...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊