CSS-编写位置
2025-08-22 本文已影响0人
大炮打小鸟
1、行内样式
写在标签的style属性中（又称：内嵌样式）。
语法：
<h1 style="color: red;font-size: 40px;">欢迎来到山东</h1>
注意点：
1、
style属性的值不能随便写，要符合CSS语法规范，是名:值;的形式。
2、行内样式表，只能控制当前标签的样式，对其他标签无效。
存在问题：书写繁琐，样式不能服用，而且没有体现：出结构与样式分离的思想，不推荐大量使用，只要对当前元素简单样式时，才偶尔使用。
2 、内部样式
html文件内的head标签内
<style>
h1 {
color: red;
font-size: 40px;
}
h2 {
color: yellow;
font-size: 60px;
}
</style>
注意width、height写像素一定写px
存在问题：
1、并没有实现，结构与样式的完全分离
2、多个HTML页面无法复用样式
3、外部样式
创建.css文件,只写样式，不需要style标签
h1 {
color: red;
font-size: 40px;
}
h2 {
color: yellow;
font-size: 60px;
}
html内head标签内
<link rel="stylesheet" href="./cssPlace.css">
注意：
1、
<link>标签要写在<head>标签中。
2、<link>标签属性说明：
href：引入的文档来自于哪里。
rel：（relation关系）说明引入的文档与当前文档之间的关系。
3、外部样式的优势，样式可以复用，结构清晰，可以对浏览器的缓存机制，提高访问速度，实现了结构与样式的完全分离
4、实现开发中，几乎都使用外部样式，这是最推荐的使用方式。
样式表的优先级
行内样式优先级最高；
内部样式和外部样式优先级相同，只在于引用代码的顺序。
代码风格
1、展开风格，开发时推荐，便于维护和调试；
h1 {
color: red;
font-size: 40px;
}
2、紧凑风格，项目上线时推荐，可以减小文件体积。
h1{color:red;font-size:40px;}
项目上线时，我们会通过webpack工具将【展开风格】的代码，变成【紧凑风格】，这样可以减小文件体积，节约网络流量，同时也能让用户打开网页时的速度更快。
