re:从0开始的CSS学习之路 1. CSS语法规则

0. 写在前面

现在大模型卷的飞起，感觉做页面的活可能以后就不需要人来做了，不知道现在还有没有学前端的必要。。。

1. HTML和CSS结合的三种方式

在HTML中，我们强调HTML并不关心显示样式，样式是CSS的工作，现在就轮到CSS的学习了。

1. 行内样式表

将样式直接写到HTML标签的style属性中
缺点：不易于维护、不可复用，可移植性极差

<p style="color: red; font-size: 30px;">今天天气不错</p>
<p style="color: red; font-size: 30px;">挺风和日丽的</p>

可以发现如果想对每个标签都添加相同的样式，是一件非常麻烦的事情

2. 内部样式表

1. 在HTML中的head标签中创建style标签

2. 在style标签中利用选择器，为选中的标签添加样式

   语法格式：选择器 {属性1: 属性值1;属性2: 属性值2;……
   }
   

   <style>/*CSS注释注意：在style标签中属于CSS，而CSS和HTML的注释不同。在这里面是CSS范畴，在外面是HTML范畴，在标签中要遵守CSS的规范*/p {color: orange;font-size: 30px;}h1 {color: blue;font-size: 80px;}
   </style>
   

选择器：用于选择需要添加样式的标签
{}：称为声明块，需要为元素添加的样式，都写在声明块
样式：以键值对的形式呈现，样式名对应样式值。名和值之间以英文的 : 连接
以英文的 ; 结尾。键值对可以有多个，建议每行写一对。

缺点：仅对于当前文档使用，可移植性差

3. 外部样式表（推荐使用）

1. 在外部创建一个.css结尾的文件，在该文件中编写css样式表

   语法格式：选择器 {属性1: 属性值1;属性2: 属性值2;……
   }
   

2. 在需要引入样式的页面的head标签中，利用link标签引入外部样式表
   优点：
   1. 易于维护
   2. 可移植性强
   3. 提高复用性
   4. 可以利用浏览器缓存机制，加快网页加载速度，提高用户体验

外部样式表做到了 “高内聚、低耦合” ，这是很重要的编程思想

<link rel="stylesheet" href="./CSS/hello.css">

可以在hello.css中编写想要的样式，并通过link标签将其引入到当前HTML文档中