前端笔记（四)

目录

css的概念

css语法

内联式

内嵌式

外联式

css的概念

描述HTML文件样式的计算机语言

作用：

静态的修饰网页,配合javascript或其他的（脚本语言）进行网页动态交互

css语法

p{

width: 200px;

height: 200px;

}

p

选择器

width

属性名

200px

属性值

height

属性名

200px

属性值

//

选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;......}

内联式

行内式

写在style属性上的css样式

html 复制代码

<div style="width: 100px; height:100px; background-color:red;">asir</div>

内嵌式

写在head标签的style中

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>
    <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文件
1.

css 复制代码

.class_info {
    width: 200px;
    height: 200px;
    background-color: red;
}

html文件
1.

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）可实现按需加载，优化资源利用率。

前端笔记（四)

css的概念

css语法

内联式

内嵌式

外联式

外联式的主要优点