首页 > 代码库 > 网页开发学习笔记四: HTML样式表

网页开发学习笔记四: HTML样式表

2024-09-06 03:16:36   214人阅读

  • 内嵌样式
    • 只作用于当前文件, 没有真正实现结构表现分离
    <head>
        <style type="text/css">
    
            样式表写法

        </style>
    </head>

 

  • 外链样式
    • 作用范围是当前站点, 范围广, 真正实现结构表现分离
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>

    <!-- 外链样式 -->
    <link rel="stylesheet" type="text/css" href="1.css">

</head>
<body>

    <div class="box">
        <p>AAAAA</p>
    </div>

</body>
</html>

 

  • 行内样式
    • 作用范围仅限于当前标签, 范围小, 结构表现混在一起
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>

</head>
<body>

    <div class="box">
        <p>AAAAA</p>
    </div>

    <!-- 行内样式(很少) -->
    <h1 style="font-size:30px; color:red">BBBBB</h1>


</body>
</html>

 

网页开发学习笔记四: HTML样式表


联系
我们