视觉艺术Java Web程序设计

CSS---样式的引用方式

2020-12-07  本文已影响0人  Wovw

CSS不能单独使用,必须和HTML网页配合使用。要想使用CSS修饰网页,就需要在HTML文档中引入CSS。

1.内嵌式

将CSS代码集中写在HTML文档的<head>头部标记中,并用<style>标记定义。

(1)基本语法格式:

<style type="text/css">

    选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

</style>

在上述语法中,<style>标记一般位于<head>标记中的<title>标记之后,把CSS代码放在头部便于提前被加载和解析。

同时,必须设置type的属性值为“text/css”,这样浏览器才知道<style>标记包含的是CSS代码。

(2)案例:

实现

(2)链入式

链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过<link />标记将外部样式表文件链接到HTML文件中。

(1)基本语法格式:

<head>

    <link href="CSS文件的路径url" type="text/css" rel="stylesheet">

</head>

在上面语法中,<link />标记必须要放在<head>头部标记中,并且必须指定<link />标记的3个属性:

●href:定义所链接外部样式表文件的地址,相对路径/绝对路径。

●type:定义所链接文档的类型,这里需要指定为“text/css”,表示链接的外部文件为CSS。

●rel:定义当前文档与被链接文档之间的关系,这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。

(2)具体步骤:

a.创建样式表,书写CSS样式

创建一个style.css文件,将上述内嵌式<style></style>标记之间的内容复制到style.css中保存。

b.创建HTML文档

将内嵌式中的代码复制,并将<style>标记更改为链入式的形式,如下:

在上述代码中,使用<link />标记链入了style.css文件,代替了内嵌式的<style>标记。

从图中可以看到,使用两种方式的显示效果相同。在实际开发中,链入式是使用频率最高、最实用的引入方式,它将HTML代码和CSS代码分离为两个或多个文件,实现了结构和表现的完全分离,同一个CSS文件可以被不同的HTML页面链接使用,同时一个HTML页面也可以通过多个<link />标记链接多个CSS样式表,大大提高了网页开发的工作效率。

3.行内式

直接在html标记里使用css样式。

语法:<div style="background-color:red">div的行内式效果</div>

演示

注意:style标记中的注释应为:/*...*/

4.导入式

与链入式相似:导入style.css

语法:

<style type="text/css">

    @import url(style.css);

</style>

上一篇下一篇

猜你喜欢

热点阅读