前端引入样式的三种方法

99封情书 提交于 2020-02-19 07:24:35

1、行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	<div>
        <p style="color: red">我是一个段落</p>
    </div>
</body>
</html>

2、内联样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 写我们的CSS代码 */
        /* 标签选择器 */
        .firstp{
            color: red;
        }
    </style>
</head>
<body>
	<div>
        <p class="firstp">我是一个段落</p>
    </div>
</body>
</html>

3、链接式

将css写在一个单独的文件中,然后在页面进行引入即可
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/test.css" rel="stylesheet" >
</head>
<body>
<p id="p1">TestButton</p>
</body>
</html>
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!