CSS简介

最新推荐文章于 2025-07-29 22:09:54 发布

原创最新推荐文章于 2025-07-29 22:09:54 发布 · 398 阅读

CC 4.0 BY-SA版权

文章标签：

23 篇文章

订阅专栏

本文介绍了如何通过内联样式、内部样式表和外部样式表三种方式管理网页元素样式，强调了外部样式表的复用性和性能优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS(层叠样式表)

网页实际上是一个多层的结构，通过css可以为网页的每一层来设计样式

最终我们能看到的只是网页的最上边一层

总之，css可以用来设置网页中元素的样式

使用css来修改元素的样式

（1）第一种方式(内联样式；行内样式)：在标签内部通过style属性来设置元素的样式

<p style="color: red; font-size: 30px;">床前明月光，疑是地上霜</p>

问题：

使用内联样式，只能对一个标签生效

如果希望影响到多个元素必须在每一个元素中都复制一遍

并且当样式发生变化时，修改非常不方便

注意：开发时绝对不要使用内联样式

（2）第二种方式(内部样式表)：将样式编写到head中的style标签里，然后通过css的选择器来选中元素，并为其设置各种样式，可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用，内部样式表更方便对样式进行复用

<head>
     <style>
     p{
         color: green;
         font-size: 30px;
       }

    </style>
</head>

问题：

内部样式表只能对一个网页起作用

它里边的样式不能跨页面进行复用

（3）第三种方式（外部样式表）最佳实践：将css样式编写到一个外部的css文件中，然后通过 link标签引入外部的css文件

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

外部样式表需要使用link标签来进行引入

意味着只要想使用这些样式的网页都可对其进行引用

使样式可以在不同的页面之间进行复用

将样式编写到外部的css文件中

可以使用到浏览器的缓存机制

从而加快网页的加载速度，提高用户的体验