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

HTML中CSS的3种基本使用方式

2017-08-11 09:56 459 查看

① 行间样式表

行间样式表：
是将CSS代码写在HTML的标签里。
比如我将一段文本字体设置为红色，并将其居中显示，实现如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>行间样式表示例</title>
</head>
<body>
<p align="center" style="color: red;">行间样式表</p>
</body>
</html>

结果如下

② 内部样式表

内部样式表：
与行间样式表类似，都是将CSS代码写在HTML文档中；
不同的是内部样式表不是写在标签中，而且有一定的格式。
比如我将一段文本的颜色设置成黄色居中，背景设置为宽100px,高40px,颜色为红色
实现如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>内部样式表示例</title>
<style type="text/css">
div{
width: 100px;
<
4000
span class="hljs-rule">height: 40px;
color: yellow;
background-color: red;
text-align: center;
}
</style>
</head>
<body>
<div>内部样式表</div>
</body>
</html>

结果如下

③ 外部样式表

外部样式表：
与内部样式表的相同之处在于都有一定的格式；
不同的是他的CSS代码是写在HTML文档外的.css文件中，而且使用时需要引用
以下是实现②中需求的文件代码：

test.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>外部样式表示例</title>
<link rel="stylesheet" href="css/test_css.css" />
</head>
<body>
<div>外部样式表</div>
</body>
</html>

test_css.css

div {
width: 100px;
height: 40px;
color: yellow;
background-color: red;
text-align: center;
}

结果如下

在上面的html文档中，有一行代码
<link rel="stylesheet" href="css/test_css.css" />
这是引用外部样式表的固定格式。
href是.css文件的路径，在这里.css文件是放在css文件下的。

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

标签：

相关文章推荐

新的分享

章节导航