您的位置：首页 > Web前端 > CSS

html网页css的三种引入方式

2017-03-01 15:08 603 查看

1，行间样式表：给单独的标签添加样式

语法：<div style="width:100px">内容</div>

缺点：代码只能应用在一个标签中无法重复利用

代码演示：

<div style="width:300px;hight:300px;background:ponk;">内容</div>

2,内部样式表

语法：在<head>标签中新建<style>标签中放入css样式

例如：<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>

<style>
div{
width: 200px;
height: 300px;
background: pink;

}
</style>
</head>
<body>
<div>
123456
</div>
</body>

</html>

缺点：仅仅适用于当前网页，如果遇到多个网页就会很麻烦

3，外部样式表

定义：所谓的外部样式表就是将css文件另存在一个以css结尾文件中，在应用到css的html网页中在<head>标签中使用<link>单标签将css的地址引用即可

例如：<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>我的css网页</title>
<link rel="stylesheet" href="css.css" />
</head>
<body>
<div>
123456789
</div>
</body>

</html>

css文件：div{
width: 100px;
height: 100px;
background: blue;

}

结果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css 标签前端 html

相关文章推荐

新的分享

章节导航