网页中引入css方式

网页中引入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>

以上是四种在页面中引用样式表的方法。

猜你喜欢

转载自blog.csdn.net/weixin_44157622/article/details/85096506