行内样式
- 写在标签的 style 属性中（又称：内联样式）
- 语法：
<h1 style="color: red;font-size: 40px;">
- 注意点：
style属性的值不能随便写，写要符合CSS语法规范，是 名:值; 的形式
行内样式表，只能控制当前标签的样式，对其他标签无效
- 存在的问题：
书写繁琐、样式不能复用、并且没有体现出： 结构与样式的分离 的思想，不推荐大量使用，只有对当前元素添加简单样式时，才偶尔使用。
内部样式
- 写在HTML页面内部，将所有的CSSdiamagnetic提取出来，单独放在 <style> 标签中
- 语法：
<style>
h1 {
color: red;
font-size: 50px;
}
</style>
- 注意点：
<style> 标签理论上可以放在HTML文档的任何地方，但一般都放在 <head> 标签中
这种写法：样式可以复用、代码结构清晰
- 存在的问题：
并没有实现：结构与样式的完~全分离
多个HTML页面无法复用样式
外部样式
-
写在单独的.css文件中，随后在HTML文件中引入使用
-
语法：
新建一个扩展名为.css的样式文件，把所有CSS代码都放入此文件中
h1 {
color: green;
font-size: 20px;
}
在HTML文件中引入.css文件
<link rel="stylesheet" href="./xxx.css">
- 注意点：
<link> 标签要写在<head>标签中
<link> 标签属性说明：
- href： 引入的文档来自于哪里
- rel：（relation：关系）说明引入的文档与当前文档之间的关系
外部样式的优势：样式可以复用、结构清晰、可触发浏览器的缓存机制，提高访问速度，实现了结构与样式的完全分离
实际开发中，几乎都是用外部样式，这是最推荐的使用方式
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
