CSS设置样式的三种方式

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

对css的学习进行总结

---

提示：以下是本篇文章正文内容

1.CSS

网页分为三个部分：
①结构(HTML)
②表现(CSS)
③行为(JavaScript)
CSS（层叠样式表）：网页实际上是一个多层的结构，通过css可以分别为网页的每个层设置样式，而最终我们能看到的只是网页的最上层，css就是用来设置网页元素的样式。
css修改元素样式的方式有三种：(1)内联样式，也叫行内样式 （2）内部样式表 （3）外部样式表

1.1内联样式

在标签内部使用style属性来设置元素的样式。
特点：内联样式只对一个标签生效
问题：对于多标签使用同样式的情况，需要大量重复的内联样式；样式发生变化时，修改不方便。

<p style="color: red; font-size: 30px;"></p>

1.2内部样式表

在head中的style标签里设置样式。
特点：可以通过css的选择器来选中元素并为其设置样式。可以同时为多个标签设置相同样式，修改时只需在一处修改即可；内部样式方便复用。
问题：内部样式只能对一个网页起作用，不能跨页面使用。

<!-- <style>

     p{
           color: green;
           font-size: 30px;
      }

</style> -->

1.3外部样式表

将css样式编写在一个外部的css文件中。
特点：需要使用link标签来引入，可以在跨页面复用；可以使用浏览器的缓存机制，从而加快网页加载速度，提高用户体验。

浏览器加载网页除了加载网页以外还要加载外部资源，如：外部css文件、图片、音频等，
页面第一次加载后会将外部资源暂时存在浏览器的内存里，再次加载页面，会直接加载暂存在
内存里的副本。

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