HTML中CSS的3种基本使⽤⽅式① ⾏间样式表
⾏间样式表：
是将CSS代码写在HTML的标签⾥。
⽐如我将⼀段⽂本字体设置为红⾊，并将其居中显⽰，实现如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>⾏间样式表⽰例</title>
</head>
<body>
<p align="center">⾏间样式表</p>
</body>
</html>
结果如下
② 内部样式表
内部样式表：
与⾏间样式表类似，都是将CSS代码写在HTML⽂档中；
不同的是内部样式表不是写在标签中，⽽且有⼀定的格式。
⽐如我将⼀段⽂本的颜⾊设置成黄⾊居中，背景设置为宽100px,⾼40px，颜⾊为红⾊
实现如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>内部样式表⽰例</title>
<style type="text/css">
div{
width: 100px;
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⽂件下的。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。