在HTML中引入CSS的方法_h5导入本地css样式-CSDN博客

本文链接：https://blog.csdn.net/bbb695480667/article/details/38085251

在HTML中引入CSS用以下四中方式，先分别作简要介绍，并给出一个小的实例代码，要实现的样式均是：给ul中的li加黑色边框；

一：行内式

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>行内式</title>   
    <!--行内式的一般格式为:<标签 style="这中间各属性用分号隔开"></标签>-->
</head>
<body>
    <ul>
        <li style="border:1px solid red;">111</li>
    </ul>
</body>
</html>

二：内嵌式

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>内嵌式</title>   
<!--    内嵌式的一般格式为:
        <style type="text/css">
            这里面用选择器控制样式                                        
        </style>-->
    <style type="text/css">
        li {
            border:1px solid red;
        }
    </style>
</head>
<body>
    <ul>
        <li>111</li>
    </ul>
</body>
</html>

三：导入式：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>导入式</title>   
    <style type="text/css">
        @import"myStyle.css";/*添加一个样式表，将样式控制语句写在里面，然后再这里导入*/
    </style>
</head>
<body>
    <ul>
        <li>111</li>
    </ul>
</body>
</html>

四：链接式：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>链接式</title>   
    <!--链接式的一般代码格式：
    <link href="外部样式的名字" rel="stylesheet" type="text/css" />-->
    <link href="myStyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <ul>
        <li>111</li>
    </ul>
</body>
</html>