css常用知识
CSS 引入方式详解
CSS（层叠样式表）可以通过多种方式引入到HTML文档中，每种方式都有其特点和适用场景。以下是主要的CSS引入方式：
1. 内联样式（Inline Style）
直接在HTML元素的style属性中编写CSS样式。
示例：
<p style="color: blue; font-size: 16px;">这是一段蓝色文本</p>特点：
- 优先级最高
- 不利于维护和复用
2. 内部样式表（Internal Style Sheet）
在HTML文档的
<head>部分使用<style>标签定义样式。示例：
<head> <style> body { background-color: #f0f0f0; font-family: Arial, sans-serif; } h1 { color: #333; text-align: center; } </style> </head>特点：
- 只对当前页面有效
- 比内联样式更易于维护
- 适用于单页面应用的样式定义
3. 外部样式表（External Style Sheet）
通过<link>标签引入独立的.css文件。
示例：
<head> <link rel="stylesheet" href="styles/main.css"> </head>特点：
- 最常用的方式
- 可以实现样式复用
- 易于维护和修改
- 浏览器会缓存CSS文件，提高加载速度
外部CSS文件示例（main.css）：
/* 全局样式 */ body { margin: 0; padding: 0; line-height: 1.6; } /* 导航栏样式 */ .navbar { background-color: #333; color: white; padding: 15px; }4. @import规则
可以在CSS文件中使用@import引入其他CSS文件。
示例：
/* 在主样式表中 */ @import url("reset.css"); @import url("typography.css");特点：
- 可以在CSS文件中嵌套引入
- 会影响页面加载性能（建议放在文件顶部）
- 现代开发中较少使用，已被构建工具取代
使用JavaScript动态添加样式
通过JavaScript动态创建<style>标签或修改样式属性。
示例：
// 创建style元素 const style = document.createElement('style'); style.innerHTML = ` .dynamic-class { background-color: yellow; border: 1px solid black; } `; document.head.appendChild(style); // 或直接修改元素样式 document.getElementById('myElement').style.color = 'red';特点：
- 可以实现动态样式变化
- 适用于交互复杂的场景
- 需要谨慎使用以避免性能问题
最佳实践建议
- 开发环境：推荐使用外部样式表，便于模块化开发和维护
- 生产环境：应考虑合并和压缩CSS文件以减少HTTP请求
- 优先级管理：了解样式优先级（内联 > 内部 > 外部）避免冲突
- 性能优化：
- 将CSS放在
<head>中尽早加载 - 避免使用过多
@import语句 - 对首屏关键CSS可以使用内联方式
- 将CSS放在
现代开发中的CSS引入
在现代前端开发中，通常会使用构建工具（如Webpack、Vite等）和CSS预处理器（如Sass、Less）来管理样式：
// 在JavaScript文件中导入CSS import './styles/main.scss'; import 'bootstrap/dist/css/bootstrap.min.css';这种方式可以利用模块化、变量、混合等高级特性，并通过构建工具自动优化输出。
CSS选择器
CSS选择器是CSS规则中用于指定要应用样式的HTML元素的模式。选择器允许我们精确地定位文档中的元素来进行样式设置。以下是对CSS基础选择器的详细分类和说明：
1.1 元素选择器（类型选择器）
p { color: blue; }- 选择所有
<p>元素 - 最基础的选择器类型
- 适用于需要统一设置某类元素基本样式的情况
1.2 类选择器
.warning { background-color: yellow; }- 选择所有具有指定class属性的元素
- 以点号(.)开头
- 一个元素可以有多个类名（class="warning important"）
- 常用于可复用的样式组件
1.3 ID选择器
#main-content { width: 80%; }- 选择具有指定id属性的元素
- 以井号(#)开头
- 一个页面中id应该是唯一的
- 常用于布局的主要结构部分
1.4 通用选择器
* { margin: 0; padding: 0; }- 选择所有元素
- 常用于重置默认样式
- 性能较差，应谨慎使用