三种CSS样式实现（内联样式、内联样式表、外联样式表）
内联样式、内联样式表、外联样式表
·
一、内联样式
1、基本语法规则
（1）随便写一个标签，比如p或者div等等
（2）在标签开头属性中添加样式
（3）样式的规则为“键值对”格式，冒号前为基本键，冒号后跟值，不同键值对用分号间隔
（在下面的例子中，对颜色和大小进行了设置，还有其它键值对可供设置，暂不列出）
<p style="color: red; font-size: 60px;">这是一个测试</p>2、例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css内联样式</title>
</head>
<body>
<p style="color: red; font-size: 60px;">这是一个测试</p>
</body>
</html>二、内联样式表（举例常用，简便）
1、基本语法规则
（1）在head标签中加入style标签，统一设置
（2）基本格式为“标签+大括号”，可在其中对多个标签设置
（在下例中，仅仅给出部分截图，style在head标签中，这里仅仅对p标签进行设置）
<style>
p{
color: red;
font-size: 60px;
}
</style>2、例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css内联样式表</title>
<style>
p{
color: red;
font-size: 60px;
}
</style>
</head>
<body>
<p>这是一个测试</p>
<p>这是第二个测试</p>
<p style="color:yellow;font-size:60px;">这是第三个测试</p>
</body>
</html>（注意，在style标签中，对所有p标签进行了统一设置，但仍可以使用内联样式进行单个设置，这里涉及到选择器优先级，在后面进行介绍）
三、外联样式表（最规范用法，适合做项目）
1、格式规范
（1）新建“文件名.css”文件
（2）基本格式为“标签名+大括号”，和内联样式表格式相同，不过是单独在新建css文件中
（3）在html中与该css文件建立连接，使用link标签，注明css文件链接位置，该link标签在head标签中
（第三条尤其容易被忽略，在下例中，使用的是相对地址链接）
p{
color: red;
font-size: 60px;
}<link rel="stylesheet" href="outline_table.css">2、例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css外联样式表</title>
<link rel="stylesheet" href="outline_table.css">
</head>
<body>
<p>这是一个测试</p>
<p>这是第二个测试</p>
<p style="color: yellow; font-size:40px">这是第三个测试</p>
</body>
</html>（在外联样式表的规范之下，仍可以使用内联样式对单个进行约束，这里涉及到选择器优先级，在后面进行介绍）
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
4
0- 0
已为社区贡献2条内容
所有评论(0)