网页中引入css方式
要想在浏览器上显示出样式表效果,就要让浏览器识别并调用。当浏览器读取样式表时,要依照文本格式来读。以下是四种在页面中引用样式表的方法:定义内部样式表、定义行内样式表、链入外部样式表和导入外部样式表。
1.内部样式表
单个页面需要应用样式时,最好使用内部样式表。可以用标签在文档头部…区内定义内部样式表,type属性是必须的,定义style元素的内容类型,其唯一的值是“text/css”。内部样式可以在整个页面中调用。
(1)内部样式表的格式
<style type="text/css">
<!--
选择符1{属性:属性值; 属性:属性值…} /*注释内容*/
选择符2{属性:属性值; 属性:属性值…}
…
</style>
(2)组合选择符的格式
<style type="text/css">
<!--选择符1,选择符2,…,选择符n{属性:属性值;属性:属性值…}
-->
</style>
2.行内样式表
行内样式表就是在元素标签内使用style属性,style属性值可以包含任何CSS样式声明。用这个方法,可以很简单地堆某个标签单独定义样式表。这种样式表只对所定义的标签起作用,并不对整个页面起作用。
行内样式表的格式为:
<标签 style="属性:属性值;属性:属性值…">
3.链入外部样式表
多个页面需要应用相同的样式时,应该使用外部样式表。外部样式表将声明的样式放在样式文件中,当页面需要使用样式时,通过<link>标签链接外部样式表文件。使用外部样式表,可以通过改变一个文件就能改变整个站点的外观。
(1)用<link>标签链接样式表文件
<link>标签必须放到页面的<head>…</head>标签内部。其格式为:
<head>
…
<link rel="stylesheet" href="外部样式表文件名.CSS" type="text/css">
…
</head>
(2)样式表文件的格式
选择符1{属性:属性值;属性:属性值…}
选择符2{属性:属性值;属性:属性值…}
…
选择符n{属性:属性值;属性:属性值…}
4.导入外部样式表
导入外部样式表就是当浏览器读取HTML文件时,复制一份样式表到这个HTML文件中,即在内部样式表的
<style type="text/css">
<!--
@import url("外部样式表的文件名1.css");
@import url("外部样式表的文件名2.css");
其他样式表的声明
-->
<style>
以上是四种在页面中引用样式表的方法。