引入CSS样式到网页的方法
2017-01-09 本文已影响12人
就那两三事
- 行间样式引入
- 内部样式引入
- 外部样式引入
行间样式引入
直接在 html 标签元素内嵌入 css 样式,
下面代码是 div1 的颜色保持不变，而将 div2 的字体颜色改为红色：
<pre>
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>行间样式引入小实例</title>
</head>
<body>
<div>div1</div>
<div style="color:red;">div2</div>
</body>
</html>
</pre>
内部样式引入
在 html 头部 head 部分内 style 声明插入代码(即 CSS 样式)
下面代码是 div1 的颜色保持不变，而将 div2 的字体颜色改为蓝色：
<pre>
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>内部样式引入小实例</title>
<style>
#div2{color:blue;}
</style>
</head>
<body>
<div>div1</div>
<div id="div2">div2</div>
</body>
</html>
</pre>
外部样式引入
<em>引入外部样式表有两种方式，一种是使用<link>标签（推荐），另一种是使用@ import 。
两者的区别： <link> 是 html 标签，只能放入html源代码中使用，@import 可看作 css 样式，作用是引入 css 样式功能。
</em>
下面代码实现是 div1 的颜色保持不变，而将 div2 的字体颜色改为黄色。
<link>标签
- 新建一个 CSS 文件，假设该文件名为“外部样式.css”, 代码如下：
<pre>
.div2{
color:yello;
}
</pre> - 新建 html 文件(注意：这里 CSS 文件与 html 文件同级)
<pre>
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>外部样式引入小实例之<link>标签</title>
<style>
<link rel="stylesheet" href="外部样式.css" />
</style>
</head>
<body>
<div>div1</div>
<div id="div2">div2</div>
</body>
</html>
</pre>
@import url( css 文件路径地址);
- 新建一个 CSS 文件，假设该文件名为“外部样式.css”, 代码如下：
<pre>
.div2{
color:yello;
}
</pre> - 新建 html 文件(注意：这里 CSS 文件与 html 文件同级)
<pre>
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>外部样式引入小实例之@import</title>
<style>
@import url(./外部样式.css);
</style>
</head>
<body>
<div>div1</div>
<div id="div2">div2</div>
</body>
</html>
</pre>
