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文档中