|
|
|
|
移动端

1.4.3 如何插入样式表

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

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

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

 1.4.3 如何插入样式表

 
当读到一个样式表时,浏览器会根据它来格式化HTML文档。插入样式表的方法有3种:外部样式表、内部样式表、内联样式。
 
当样式需要应用于很多页面时,外部样式表为首选。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在(文档的)头部。下面一句代码就是如何引入外部样式表示例。
 
  1. 1     <head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head> 
 
浏览器会从文件mystyle.css中读到样式声明,并根据它来格式文档。外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的html标签。样式表应该以“.css”扩展名进行保存。下面是一个样式表文件的例子。
 
  1. 1     hr {color: sienna;} 
  2. 2     p {margin-left: 20px;} 
  3. 3     body {background-image: url("images/back40.gif");} 
 
上述内容为一个简单的外部样式表文件,该文件以“.css”为扩展名。在写这部分文件时需要注意,不要在属性值与单位之间留有空格。例如使用“margin-left: 20 px”而不是“margin-left: 20px”,它仅在IE 6中有效,但是在Mozilla/Firefox或Netscape中却无法正常工作。
 
有时候单独的某个界面需要特殊的样式,这时候使用外部样式表便不再方便,我们会用其他的方法代替外部样式表,那就是内部样式表。内部样式表中使用<style>标签在文档头部定义内部样式表,其用法与其余标签并无多大差别,我们来看一下下面的这个例子。
 
  1. 1     <html><head> 
  2. 2     <style type="text/css"> 
  3. 3     h1 {color: red} 
  4. 4     p {color: blue} 
  5. 5     </style></head> 
  6. 6     <body><h1>header 1</h1> 
  7. 7     <p>A paragraph.</p> 
  8. 8     </body></html>  
说明
 
本段代码单纯示例了<style>标签的用法。在style中,可以规定在浏览器中如何呈现HTML文档。type属性是必需的,用于定义style元素的内容。唯一可能的值是“text/css”。<style>元素位于head部分中。
 
除了上述两种插入样式表的方法外,还有一种内联样式。由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势,请慎用这种方法。要使用内联样式,你需要在相关的标签内使用样式style属性。style属性可以包含任何CSS属性。
 
  1. 1     <p style="color: sienna; margin-left: 20px"> 
  2. 2     This is a paragraph</p> 
 
本例展示如何改变段落的颜色和左外边距,在段落标签中使用了style属性。我们来看一下这样使用style属性,比起前两种方法来说,如果将其用于需要的样式比较多的页面时会相当麻烦,这样便失去了样式表的优势所在。
 
喜欢的朋友可以添加我们的微信账号:

51CTO读书频道二维码


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

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

读 书 +更多

The Ruby Way(第二版)中文版

本书采用“如何解决问题”的方式阐述Ruby编程,涵盖了以下内容:Ruby术语和基本原理;数字、字符串等低级数据类型的操作;正则表达式;国际...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊