2、CSS权威指南--如何把CSS应用到HTML

link标签：作用是把其他文档与当前文档关联起来。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type=“text/css” href="../CSS/style1.css">
    <style type="text/css">
        @import url(../CSS/style2.css);
        p{
            color: aqua;
            font-size: 36px;
        }

    </style>
    <title>Document</title>
</head>
<body>
    <div>123</div>
    <p>我歌且谣</p>
</body>
</html>

 

 

通过link标签链接的样式表不是HTML文档的一部分，但却供文档使用，我们称这样的样式表为外部样式表。

为了正确的加载外部样式表，link标签强烈建议放在head元素中。

@import url () ：@import声明 可以放在HTML文档的style标签中， 也可以放在CSS文件中。不管那种方式，都应该放在其他CSS规则之前：

@import url(../CSS/style2.css);
div{
    width: 100px;
    height: 100px;
    color: burlywood;
    font-size: 36px;
}

一个文档中可以有多个@import语句，他们都会被加载。

外部样式表保存为纯文本文件，扩展名通常是  .css

一个文档可以关联多个样式表，浏览器会合并样式规则后再应用到文档上。

style元素也是一种引入样式表的方式，应该始终设定type值，CSS文档的type=“text/css” ， 这与link是一样的。

style标签之间的样式称为文档样式表（document stylesheet）或嵌入式样式表（embedded  stylesheet）。可以直接包含要应用到文档上的样式， 或包含@import指令，引入外部样式表。

如果只想为单个元素添加少量样式， 不值得动用嵌入式样式表或外部样式表，可以才用HTML元素的style属性，设置行内样式：

 <div style="color:brown">我歌且谣</div>

注意：style属性的值只能是样式规则声明。

 

posted @ 2023-01-08 08:55  我歌且谣  阅读(83)  评论(0)  编辑  收藏  举报