您的当前位置:首页>聚焦 > 正文

如何引入css文件 引入css文件的方法

来源:PHP中文网 时间:2022-05-12 15:07:01

引入css文件的方法:1、使用style属引入CSS样式;2、在style标签中书写CSS代码;3、CSS代码保存在扩展名为【.css】的样式表中。

本教程操作环境:windows7系统、css3版,DELL G3电脑。

引入css文件的方法:

一、行内样式

使用style属引入CSS样式。

示例:

1

2

 

<h1 style="color:red;">style属的应用</h1>

<p style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>

 

实际在写页面时不提倡使用,在测试的时候可以使用。

例如:

1

2

3

4

5

6

7

8

9

10

11

12

 

<!DOCTYPE>

<html>

<head>

<meta charset="utf-8" />

<title>行内样式</title>

</head>

<body>

<!--使用行内样式引入CSS-->

<h1 style="color:red;">Leaping Above The Water</h1>

<p style="color:red;font-size:30px;">我是p标签</p>

</body>

</html>

 

二、内部样式表

在style标签中书写CSS代码。style标签写在head标签中。

示例:

1

2

3

4

5

6

7

 

<head>

<style type="text/css">

h3{

color:red;

}

</style>

</head>

 

例如:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

 

<!DOCTYPE>

<html>

<head>

<meta charset="utf-8" />

<title>内部样式表</title>

<!--使用内部样式表引入CSS-->

<style type="text/css">

div{

background: green;

}

</style>

</head>

<body>

<div>我是DIV</div>

</body>

</html>

 

三、外部样式表

CSS代码保存在扩展名为.css的样式表中

HTML文件引用扩展名为.css的样式表,有两种方式:链接式、导入式。

语法:

1、链接式

1

 

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

 

2、导入式

1

2

3

 

<style type="text/css">

@import url("css文件路径");

</style>

 

例如:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

 

<!DOCTYPE>

<html>

<head>

<meta charset="utf-8" />

<title>外部样式表</title>

<!--链接式:推荐使用-->

<link rel="stylesheet" type="text/css" href="css/style.css" />

<!--导入式-->

<style type="text/css">

@import url("css/style.css");

</style>

</head>

<body>

<ol>

<li>1111</li>

<li>2222</li>

</ol>

</html>

 


标签: 如何引入css文件 引入css文件方法 引入css文件

最新新闻:

新闻放送

关于我们 | 联系我们 | 投稿合作 | 法律声明 | 广告投放
 

版权所有©2017-2020   三秦科技网
 

所载文章、数据仅供参考,使用前务请仔细阅读网站声明。本站不作任何非法律允许范围内服务!
 

豫ICP备20023378号-14
 

联系我们: 98 28 36 7@qq.com
 

Top