CSS学习笔记01

最新推荐文章于 2024-05-30 14:49:04 发布

Bee_Darker

最新推荐文章于 2024-05-30 14:49:04 发布

阅读量160

点赞数

分类专栏： HTML/CSS核心基础文章标签： CSS

本文链接：https://blog.csdn.net/Bee_Darker/article/details/95790531

版权

11 篇文章 0 订阅

订阅专栏

CSS层叠样式表（Cascading Style Sheets)

将样式直接编写在style属性中，这种样式称为内联样式。

内联样式只对当前的元素中的内容起作用，内联样式不方便服用。

内联样式属于结构与表现耦合，不方便后期维护，不推荐使用。

例：

<p style="color:red;font-size:40px;">CSS内联样式表</p>

也可以将CSS样式编写到head中的style标签里；

将样式表编写到style标签中，然后通过CSS选择器选中指定元素，然后可以同时为这些元素一起设置样式，这样可以使样式进一步复用。

将样式表编写到style标签中，也可以使表现和结构进一步分离，它也是我们推荐的使用方式。

例：

<head>
    <style type="test/css">
    p{
        color:red;
        font-size:40px;
    }
    </style>
</head>

还可以将样式表编写到外部的CSS文件中，然后通过link标签来将外部的CSS文件引入到当前页面中，这样外部文件中的CSS样式表将会应用到当前页面中。

将CSS样式统一编写到外部的样式表中，完全使结构和表现分离，可以使样式表在不同的页面中使用，最大限度的使样式可以进行复用，将样式统一写在样式表中，然后通过link标签引入，可以利用浏览器的缓存，加快用户的访问速度，提高了用户体验，所以在开发中最推荐使用的方式就是外部CSS文件。

例：

将下列代码保存在style.css文件中

p{
    color:"red";
    font-size:40px;
}

调用style.css文件：

<head>
    <link rel="stylesheet" type="test/css" href="style.css" />
</head>

关注

专栏目录