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 @   by1314  阅读(7)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
浏览器标题切换
浏览器标题切换end
点击右上角即可分享
微信分享提示