)
目录
css的概念
css语法
内联式
内嵌式
外联式
css的概念
描述HTML文件样式的计算机语言
作用：
静态的修饰网页,配合javascript或其他的（脚本语言）进行网页动态交互
css语法
p{
width: 200px;
height: 200px;
}
- p
- 选择器
- width
- 属性名
- 200px
- 属性值
- height
- 属性名
- 200px
- 属性值
//
选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;......}
内联式
行内式
写在style属性上的css样式
<div style="width: 100px; height:100px; background-color:red;">asir</div>内嵌式
写在head标签的style中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> p{ width: 200px; height: 200px; } </style> </head> <body> <p>这是一段被内嵌式样式修饰的代码</p> </body> </html>看上面代码的style标签
css只负责结构样式，HTML负责页面的结构.
不能跨页面加载样式。
外联式
脱离html文件，单独存在的css文件
如何使用？
在head标签中使用link标签引入外部文件
常用属性
- rel
- 属性值: stylesheet
- 引入的外问加你与Html的关系
- href
- css文件的路径
- 可以是网络中的
- 也可以是本地路径中的
- type
- text/css
使用
- css文件
.class_info { width: 200px; height: 200px; background-color: red; }
- html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./test.css" type="text/css"> </head> <body> <div class="class_info">test</div> </body> </html>
效果图
外联式的优点
其他页面可以同时使用
只需要在页面直接使用
页面与样式分离
节省代码量
引用ai
外联式的主要优点
代码分离与维护性提升
外联式（如CSS或JavaScript外联文件）将样式、脚本与HTML结构分离，使代码结构更清晰。修改样式或脚本时无需改动HTML文件，便于团队协作和长期维护。缓存机制优化性能
浏览器会缓存外联的CSS或JavaScript文件，同一页面或多个页面重复使用时无需重复下载，显著减少HTTP请求次数，加快页面加载速度。复用性与一致性
单个外联文件可被多个页面引用，确保网站风格或功能统一。修改一处即可全局生效，避免重复代码，降低出错概率。并行加载提高效率
浏览器可并行下载外联文件（如CSS与HTML同时加载），而内联代码需按顺序解析。外联方式更利于资源优化，尤其对大型网站尤为重要。模块化开发支持
外联文件便于模块化拆分，例如按功能划分多个JS文件或按组件划分CSS，结合构建工具（如Webpack）可实现按需加载，优化资源利用率。
