html 三种插入css样式的方式

三种插入css样式的方式一、外链式引入css样式二、内嵌式使用css样式三、行内式引入css样式一、外链式引入css样式在head标签中使用<link rel="stylesheet" type="text/css" href="css/main.css">引入代码如下所示：<!DOCTYPE html><html lang="en"><head>&

郭庆汝

4790人浏览 · 2021-07-07 13:53:45

郭庆汝 · 2021-07-07 13:53:45 发布

三种插入css样式的方式

一、外链式引入css样式
二、内嵌式使用css样式
三、行内式引入css样式

一、外链式引入css样式

在这里插入图片描述

在head标签中使用<link rel="stylesheet" type="text/css" href="css/main.css">引入
代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外链式引入css样式</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
    <div>
        这是一个div标签
    </div>
</body>
</html>

显示如下所示
在这里插入图片描述

二、内嵌式使用css样式

使用style标签引入：
在这里插入图片描述
代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内嵌式使用css样式</title>
    <style type="text/css">
        div{
            font-size: 20px;
            color: #2b542c;
            background-color: #d43f3a;
        }

    </style>
</head>
<body>
    <div>页面标题</div>
</body>
</html>

显示如下所示：
在这里插入图片描述

三、行内式引入css样式

使用style属性引入：
在这里插入图片描述
代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内式引入css样式</title>
</head>
<body>
    <a href="https:www.baidu.com" title="跳转到百度" target="_blank" style="font-size: 20px;color: #007aff;background-color: #b3b3b3">国资软件</a>
</body>
</html>