1、CSS定义和三种引入方式

CSS定义和三种引入方式

在css出现前，html既要负责结构，也要负责样子。

早期的时候就是由标签的属性来决定页面的样子。

为了解决用过多标签属性而产生的麻烦，W3C推出了CSS。

将原本需要多个属性来定义的样式，全部转化为用一个style属性来定义，原本html中的属性和属性值全部以xxx ：xxx的形式作为style属性的属性值存在，每一项之间用分号隔开。这就解决了浏览器显示的html文件改动过多的麻烦。

这就是第一种CSS引入方式——元素内嵌

使用元素内嵌样式表，虽然使多个属性得到汇总，但是对于开发人员来说，它依旧是和原本html的标签连在一起，标签中依旧是复杂的，这让开发人员还是很难维护。因此，出现了另一种样式的书写方法。将样式从原本的标签中独立出来，作为单独的一部分写在原文档的其他位置，再通过某种东西让样式与标签之间建立关系，以此达到改变页面样子的目的。

这就是第二种CSS引入方式——文档内嵌

让样式与标签之间建立关系的东西——选择器

后来，随着代码越来越多，越来越复杂，将样式以文档内嵌的方式和html写在同一个文档里，会导致这个文档越来越大，让代码越来越不容易辨别，不同html文档之间相同的样式要重复书写，使得情况又变得麻烦。因此，为了提高样式代码的可复用性，又出现了新的样式书写方式。将原本和html写在同一文档里的样式代码，再次独立出来，写在一个单独的新文档中，使得同样的样式可以应用在不同的html页面中。

这就是第三种CSS引入方式——外部引用

html引用外部样式的方法——在head中使用< link > 标签

示例：

元素内嵌

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素内嵌样式表</title>
</head>
<body>
    <div style="color: red;background: yellow;width: 100px;height: 100px;">苹果1</div>
    <br>
    <div style="color: red;background: yellow;width: 100px;height: 100px;">苹果2</div>
    <br>
    <div style="color: red;background: yellow;width: 100px;height: 100px;">苹果3</div>
    <br>
    <div style="color: red;background: yellow;width: 100px;height: 100px;">苹果4</div>
    <br>
    <div style="color: red;background: yellow;width: 100px;height: 100px;">苹果5</div>
</body>
</html>

效果：

文档内嵌

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档内嵌样式表</title>
    <style>
        div {
            color: red;
            width: 100px;
            height: 100px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div>苹果1</div>
    <br>
    <div>苹果2</div>
    <br>
    <div>苹果3</div>
    <br>
    <div>苹果4</div>
    <br>
    <div>苹果5</div>
</body>
</html>

效果：

外部引用

代码：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部引用样式表</title>
    <!--rel属性表示与链接对象之间的关系（简单点说就是：你链接的东西是什么）-->
    <link rel="stylesheet" href="apple.css">
</head>
<body>
    <div>苹果1</div>
    <br>
    <div>苹果2</div>
    <br>
    <div>苹果3</div>
    <br>
    <div>苹果4</div>
    <br>
    <div>苹果5</div>
</body>
</html>

css

div {
    color: red;
    width: 100px;
    height: 100px;
    background: yellow;
}

效果：

posted @ 2021-03-03 16:39 丨Mr丨C 阅读(524) 评论(0) 收藏举报

刷新页面返回顶部

1、CSS定义和三种引入方式

CSS定义和三种引入方式

公告