CSS[行内样式-内部样式-外部样式]
html页面的加载顺序
先加载herd区域然后在加载body区域
也就是有什么全局配置初始化的东西可以放在herd中
行内样式
在任何标签里添加 style=“样式”
列: <p style=”font-size:14px color:green;”></p> //字体14 颜色绿
内部样式
在<head >中 添加<style> 内容 </style>
<head><style>p{font-size:px20;color:green;}</style></head >
外部样式
在外部创建css文件 在里面写css样式 写法和内部样式一样 然后将文件 添加到<head>中
<link href="css文件路径" rel="stylesheet" type="text/css" />
rel=”stylesheet” :是指在这个页面使用这个外部样式
type=”text/css” :是指文件类型
还有一种导入的方式@import
<style>@import "waib.css";</style>
2种方式差别是:
link导入:不管用户网慢还是网快都同时显示html和css内容
@import导入:是用户网差的时候先显示html框架在显示css 会有点反差 难看
推荐外部连接
访问 行内- 内部 -外部 顺序
行内 (2.内部 3.外部) 或者 ( 2.外部 3.内部)
就近原则 离body越近越优先
一个标签中同时存在 行内和(内部|外部) 并且都是设置边框 那么只会显示行内的 不会显示(内部|外部) 的
在很多使用使用js… 来切换样式发现无效的情况就是没有吧这个顺序弄懂
定义一个waib.css文件
.div_class_wai{color: #4968ff;}
index.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><link href="waib.css" rel="stylesheet" type="text/css" /><style>/*内部样式*/.div_class_nei{color: chartreuse;}</style></head><body><!--行内 内部 外同时存在的时候 优先行内样式--><div class="div_class_nei div_class_wai"style="color: salmon">abc</div><!--行内 内部同时存在的时候 优先内部--><div class="div_class_nei div_class_wai" >abc</div><!--没有行内和内部 的时候 执行外部样式--><div class="div_class_wai" >abc</div></body></html>
我们将 <link 外部样式 和 <style>内部样式调换下位置
<head><meta charset="UTF-8"><title>Title</title><style>/*内部样式*/.div_class_nei{color: chartreuse;}</style><link href="waib.css" rel="stylesheet" type="text/css" /></head>
调换后 外部样式 优先于 内部样式 满足了 我上面说的 离Body越近 越优先
点赞 -收藏-关注-便于以后复习和收到最新内容有其他问题在评论区讨论-或者私信我-收到会在第一时间回复如有侵权，请私信联系我感谢,配合,希望我的努力对你有帮助^_^
