当前位置：首页 > news >正文

前端笔记（四)

news 2026/7/17 19:43:05

目录
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
1. 属性值: stylesheet
2. 引入的外问加你与Html的关系
href
1. css文件的路径
2. 可以是网络中的
3. 也可以是本地路径中的
type
1. 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>

效果图
外联式的优点
1. 其他页面可以同时使用
  1. 只需要在页面直接使用
2. 页面与样式分离
3. 节省代码量
引用ai
1. 外联式的主要优点
  代码分离与维护性提升
  外联式（如CSS或JavaScript外联文件）将样式、脚本与HTML结构分离，使代码结构更清晰。修改样式或脚本时无需改动HTML文件，便于团队协作和长期维护。
  缓存机制优化性能
  浏览器会缓存外联的CSS或JavaScript文件，同一页面或多个页面重复使用时无需重复下载，显著减少HTTP请求次数，加快页面加载速度。
  复用性与一致性
  单个外联文件可被多个页面引用，确保网站风格或功能统一。修改一处即可全局生效，避免重复代码，降低出错概率。
  并行加载提高效率
  浏览器可并行下载外联文件（如CSS与HTML同时加载），而内联代码需按顺序解析。外联方式更利于资源优化，尤其对大型网站尤为重要。
  模块化开发支持
  外联文件便于模块化拆分，例如按功能划分多个JS文件或按组件划分CSS，结合构建工具（如Webpack）可实现按需加载，优化资源利用率。