香港服务器做盈利网站营销策划推广公司
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. 内部样式表
-
在HTML中的head标签中创建style标签
-
在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. 外部样式表（推荐使用）
- 在外部创建一个.css结尾的文件，在该文件中编写css样式表
语法格式：选择器 {属性1: 属性值1;属性2: 属性值2;…… } - 在需要引入样式的页面的head标签中，利用link标签引入外部样式表
优点：
1. 易于维护
2. 可移植性强
3. 提高复用性
4. 可以利用浏览器缓存机制，加快网页加载速度，提高用户体验
外部样式表做到了 “高内聚、低耦合” ，这是很重要的编程思想
<link rel="stylesheet" href="./CSS/hello.css">
可以在hello.css中编写想要的样式，并通过link标签将其引入到当前HTML文档中