行内样式、内部样式、外部样式

半杯橙汁

已于 2024-07-24 12:49:30 修改

阅读量132

点赞数

分类专栏： HTML+CSS+DIV布局文章标签： css html css3

于 2023-11-16 21:19:22 首次发布

本文链接：https://blog.csdn.net/weixin_59155272/article/details/134451027

版权

HTML+CSS+DIV布局专栏收录该内容

5 篇文章 0 订阅

订阅专栏

行内样式：

该元素的所在本行中使用style标记来写样式

内部样式：

在head标签中使用style标记来写样式

外部样式：

在head标签中使用link标记引用外部样式

注意优先级：

行内样式＞内部样式＞外部样式

代码举例如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文字水平居中与垂直居中</title>
        <link rel="stylesheet" href="style.css"> <!--外部样式：在head标签中使用link标记引用外部样式-->
        <style>
            /*内部样式：在head标签中使用style标记来写样式*/
            .box1{
                width: 1000px;
                height: 300px;
                background-color: blue;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <!--行内样式：该元素的所在本行中使用style标记来写样式-->
            <div class="box2" style="color: pink; font-size: 91px;text-align: center;"><p>hello world</p></div>
        </div>
    </body>
</html>

该网页效果图：