CSS 编写的位置（1）

行内样式

  • 写在style属性中，行内样式只能控制当前样式对其他标签无效

<h1 style="color: red; font-size:80px">欢迎光临</h1> #并不推荐使用

内部样式

<head>
    <style>
        h1{
            color: red; 
            font-size:80px;
        }
    </style>
</head>

可以将 style 标签放入 head 或者 body
问题：没有实现结构和样式的分离，多个 html 无法复用样式

外部样式（推荐使用）

独立文件写样式

#新建一个独立文件扩展名为 .css 的样式文件，把相关的引入
h1{
    color:red;
    font-size:40px;
}

<link rel="stylesheet" href="./xxx.css">

  • 标签 要写在 ==== 标签中
  • 的属性说明：
  1. href：引入文档的路径，出处
  2. rel：说明引入文档与当前文档的关系
  • 外部样式的优势：样式复用，结构清晰，可触发浏览器的缓存机制，提高访问速度，实现结构样式的完全分离

样式优先级

冲突情况下，行内样式优先级高于外部、内部样式。内部样式与外部样式是后来居上

posted @ 2024-03-06 15:25  by1314  阅读(3)  评论(0)  编辑  收藏  举报
浏览器标题切换
浏览器标题切换end