css常用知识

CSS 引入方式详解CSS层叠样式表可以通过多种方式引入到HTML文档中每种方式都有其特点和适用场景。以下是主要的CSS引入方式1. 内联样式Inline Style直接在HTML元素的style属性中编写CSS样式。示例p stylecolor: 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 relstylesheet hrefstyles/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引入在现代前端开发中通常会使用构建工具如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属性的元素以点号(.)开头一个元素可以有多个类名classwarning important常用于可复用的样式组件1.3 ID选择器#main-content { width: 80%; }选择具有指定id属性的元素以井号(#)开头一个页面中id应该是唯一的常用于布局的主要结构部分1.4 通用选择器* { margin: 0; padding: 0; }选择所有元素常用于重置默认样式性能较差应谨慎使用