lcyangcss 2019-10-25
有很多方法将样式表加入到HTML中,每种方法都有自己的优点和缺点。新的HTML元素和属性已被加入,以允许样式表与HTML文档更简易地组合起来。将样式表加入到HTML中的常用方法有内联样式表、嵌入一张样式表或链接到一张外部的样式表。
1 内嵌样式表
样式可以使用style属性内联,该属性可以应用于任意body元素(包括body本身),除了basefont、param和script标记。这个属性将任意数量的CSS声明当作自己的值,而每个声明用分号隔开,如下所示:
<p style="color: red; font-family: ‘微软雅黑’"> 此段落的样式是红色的“微软雅黑”字体</p>
内联的样式比其他方法更加灵活,但需要和展示的内容混合在一起,这样会失去样式表的一些优点。例如在本例中,如果有多个段落<p>标记都需要输出相同的样式,则在每个<p>标记中都需要使用style属性声明相同的样式,不仅需要的代码量比较多,而且不利于更新。
2 嵌入一张样式表
一张样式表可以使用<style>元素嵌入到HTML文档中使用,<style>元素需要放在HTML文档的head部分,如下所示:
其中,<style>和</style>之间是样式的内容(不要在这个标记中写HTML语句),type属性表示使用的是文本中层叠样式表书写的代码。“{}”前面是样式的选择器,“{}”中是声明的样式属性。嵌入样式表对整个HTML文档都有效,可在一个HTML文档具有独一无二的样式时使用。
3 链接到一张外部的样式表
如果多个文档都使用同一样式表,那么外部样式表会更适用。一张外部的样式表可以通过HTML的link元素链接到HTML文档中。<link />标签放置在文档的head部分,可以通过多个<link />标签链接多个样式文件到同一个HTML文档中,如下所示:
<link rel="StyleSheet" href="style.css" type="text/css" /> <!-- 在HTML中链接一个外部样式文件 -->
可选的type属性用于指定媒体类型,允许浏览器忽略它们不支持的样式表类型。rel属性用于定义链接的文件和HTML文档之间的关系,该属性的值StyleSheet指定一个固定或首选的样式。而href属性则用来指定样式文件的位置,可以是相对的也可以是绝对的URL。外部样式表文件要以扩展名.css命名,并且在样式表文件中不能含有任何像<head>或<style>这样的HTML标记,样式表仅仅由样式规则或声明组成,如下所示:
p { margin: 2em } /* style.css文件中的样式代码 */
在样式文件style.css中,一个单独由本例一条样式语法规则组成的文件,就可以用作外部样式表了。当样式被应用到很多的网页时,一张外部样式表是理想的。开发者使用外部样式表可以改变整个网站的外观,而仅仅通过改变一个文件。同样,大多数浏览器会在缓冲区保存外部样式表,这样如果样式表在缓冲区,就避免了在展示网页时的延迟。
注意、如果同时使用内联样式表和嵌入样式表,并设置了相同属性,则内联样式表的优先级高;而同时使用嵌入样式表和外部样式表并设置相同属性时,则优先级由出现的先后顺序决定。
表格的现在还是较为常用的一种标签,但不是用来布局,常见处理、显示表格式数据。在HTML网页中,要想创建表格,就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
一个客户要求给网站添加一个背景音乐,我用的是html5添加网页背景音乐的代码,在此记录一下以后有用。html5方法二:<videocontrols=""autoplay=""name="media&q