2.1.2.CSS3
2.1.2.CSS3
CSS3 是 CSS（层叠样式表）的第三个版本，引入了大量的新特性和功能，大大增强了网页的表现能力。以下是 CSS3 的核心知识点，涵盖了布局、动画、特效、响应式设计等方面。
2.1.2.1.选择器和伪类
伪类选择器：
:hover, :active, :focus, :first-child, :last-child, :nth-child(), :nth-of-type(), :not(), :checked, :enabled, :disabled 等。
伪元素选择器：
::before, ::after, ::first-letter, ::first-line 等。
属性选择器：
[attr=value], [attr^=value], [attr$=value], [attr*=value] 等。
组合选择器：
>, +, ~ 等。
2.1.2.2.文本和字体
@font-face：自定义字体。
font-family：指定字体系列。
font-size、font-weight、font-style 等属性。
font-variation-settings：用于控制可变字体的不同轴（如宽度、粗细等）。
2.1.2.3.盒模型
box-sizing：content-box, border-box
width, height：支持百分比、rem、em、vw、vh 等单位。
2.1.2.4.背景和边框
background：支持渐变、图片等。
background-image, background-size, background-position, background-repeat, background-clip 等。
渐变背景：linear-gradient(), radial-gradient()。
border-radius：圆角边框。
box-shadow：为元素添加阴影效果。
text-shadow：为文本添加阴影效果。
2.1.2.5.Flexbox（弹性布局）
display：flex, inline-flex
justify-content：对齐项目在主轴上的位置。
align-items：对齐项目在交叉轴上的位置。
align-self：单个元素的对齐方式。
flex-direction：设置主轴方向：row, column, row-reverse, column-reverse。
flex-wrap：是否换行：nowrap, wrap, wrap-reverse。
flex-grow, flex-shrink, flex-basis：控制弹性项目的伸缩。
2.1.2.6.Grid（网格布局）
display：grid, inline-grid
grid-template-columns, grid-template-rows：定义列和行的大小。
grid-gap, grid-row-gap, grid-column-gap：设置网格项之间的间隔。
grid-template-areas：创建可命名区域。
grid-column, grid-row：控制元素在网格中的位置。
2.1.2.7.响应式设计
media queries：根据设备或视窗的宽度、分辨率等来改变布局。
@media 规则，max-width, min-width, orientation, resolution 等。
2.1.2.8.变换（Transform）
transform：支持旋转、缩放、平移和倾斜。
rotate(), scale(), translate(), skew() 等。
2.1.2.9.过渡（Transition）
transition：实现元素的平滑过渡效果。
transition-property, transition-duration, transition-timing-function, transition-delay。
2.1.2.10.动画（Animation）
@keyframes：定义关键帧动画。
animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode。
2.1.2.11.多列布局
column-count, column-gap, column-rule 等属性。
2.1.2.12.边框图像
border-image：指定边框的图片，可以用来为元素的边框应用图片。
2.1.2.13.自定义属性（CSS变量）
--variable-name：自定义的 CSS 变量，通过 var() 使用。
2.1.2.14.滤镜（Filter）
filter：为元素应用视觉效果，如模糊、亮度、对比度等。
blur(), brightness(), contrast(), drop-shadow(), grayscale(), sepia() 等。
2.1.2.15.位置
position：static, relative, absolute, fixed, sticky。
z-index：控制层叠上下文中元素的堆叠顺序。
2.1.2.16.视差效果（Parallax）
使用 background-attachment: fixed; 或 CSS 动画创建视差效果。
2.1.2.17.响应式字体（Viewport Units）
vw, vh, vmin, vmax：相对于视口大小的单位，常用于响应式设计。
2.1.2.18.计时函数（Timing Functions）
cubic-bezier()：自定义动画的时间函数。
其他预定义函数如 ease, linear, ease-in, ease-out, ease-in-out。
2.1.2.19.透明度（Opacity）
opacity：控制元素的透明度。
2.1.2.20.Clip-path
clip-path：创建裁剪路径，通常用于将元素裁剪成特定形状。
2.1.2.21.层叠上下文（Stacking Context）
transform, opacity, z-index 等可以创建新的层叠上下文。
2.1.2.22.垂直和水平居中
使用 flexbox 或 grid 实现元素的完美居中。
2.1.2.23.案例
以下是一个包含所有常见 CSS3 功能的完整示例。这个例子展示了如何在一个简单的网页中应用各种 CSS3 特性，包括布局、动画、过渡、响应式设计等。
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="CSS3所有特性示例"> <title>CSS3 示例页面</title> <style> /* 1. 盒模型 */ * { box-sizing: border-box; } /* 2. 背景和边框 */ body { background: linear-gradient(to right, #ff7e5f, #feb47b); font-family: Arial, sans-serif; margin: 0; padding: 0; } .container { width: 80%; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); text-align: center; } h1 { font-size: 3rem; color: #333; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } p { font-size: 1.2rem; color: #555; } /* 3. 变换 (Transform) */ .transform-example { width: 200px; height: 200px; margin: 20px auto; background-color: #4caf50; transition: transform 0.5s ease; } .transform-example:hover { transform: rotate(45deg) scale(1.2); } /* 4. 过渡 (Transition) */ .transition-example { width: 200px; height: 200px; margin: 20px auto; background-color: #f39c12; transition: background-color 0.3s ease; } .transition-example:hover { background-color: #e67e22; } /* 5. 动画 (Animation) */ @keyframes bounce { 0% { transform: translateY(0); } 50% { transform: translateY(-30px); } 100% { transform: translateY(0); } } .animation-example { width: 100px; height: 100px; background-color: #3498db; margin: 20px auto; animation: bounce 1s infinite; } /* 6. Flexbox 布局 */ .flex-container { display: flex; justify-content: space-around; align-items: center; height: 200px; margin: 20px auto; } .flex-item { background-color: #e74c3c; color: white; padding: 20px; border-radius: 10px; text-align: center; flex: 1; } /* 7. Grid 布局 */ .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 20px 0; } .grid-item { background-color: #9b59b6; color: white; padding: 20px; border-radius: 10px; text-align: center; } /* 8. 响应式设计 */ @media (max-width: 768px) { .flex-container { flex-direction: column; } .grid-container { grid-template-columns: 1fr; } } /* 9. 自定义属性（CSS 变量） */ :root { --primary-color: #8e44ad; --secondary-color: #2ecc71; } .custom-var { background-color: var(--primary-color); color: white; padding: 20px; border-radius: 10px; text-align: center; } /* 10. 滤镜（Filter） */ .filter-example { width: 200px; height: 200px; margin: 20px auto; background-image: url('https://via.placeholder.com/200'); filter: blur(5px) grayscale(50%); } /* 11. 字体 */ @font-face { font-family: 'CustomFont'; src: url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); } .custom-font { font-family: 'Roboto', sans-serif; font-size: 1.5rem; color: #34495e; } </style> </head> <body> <div class="container"> <h1>CSS3 特性示例</h1> <div class="transform-example"></div> <div class="transition-example"></div> <div class="animation-example"></div> <div class="flex-container"> <div class="flex-item">项 1</div> <div class="flex-item">项 2</div> <div class="flex-item">项 3</div> </div> <div class="grid-container"> <div class="grid-item">网格项 1</div> <div class="grid-item">网格项 2</div> <div class="grid-item">网格项 3</div> </div> <div class="custom-var">使用自定义变量的背景</div> <div class="filter-example"></div> <p class="custom-font">这是使用自定义字体的文本。</p> </div> </body> </html> |
2.1.2.24.CSS使用策略
使用CSS时，有一些最佳实践可以帮助你提高代码的可维护性、性能和可读性。以下是一些重要的CSS最佳实践：
1）使用外部样式表
将CSS样式与HTML分离，使用外部样式表，而不是在HTML中直接写内联样式或嵌入样式。这样可以减少重复代码并提升加载速度。
例如，使用 <link rel="stylesheet" href="styles.css"> 引入外部样式表。
2）保持样式的简洁和一致
保持CSS规则简洁、统一，并遵循命名约定（例如BEM、OOCSS、SMACSS等）。这样有助于增强代码的可维护性。
例如，使用BEM（块、元素、修饰符）命名方法：block__element--modifier。
3）避免使用 !important
除非必要，否则尽量避免使用 !important。它会导致样式优先级变得混乱，难以调试和维护。
如果确实需要，可以考虑重新组织CSS代码或使用更具特定性的选择器来解决冲突。
4）使用简洁的选择器
使用更简洁的CSS选择器来减少样式的复杂度。过于复杂的选择器可能会影响性能。
例如，避免使用过长的层级选择器（如 .header .nav .item .link），可以改用类名或ID选择器。
5）CSS模块化
将CSS拆分为多个小的、模块化的文件，每个文件负责一个独立的功能模块。可以使用工具（如Sass、Less、PostCSS等）来进行代码组织。
例如，将按钮样式放在一个文件里，将布局样式放在另一个文件里。
6）使用CSS预处理器（如Sass、Less）
CSS预处理器提供了变量、嵌套、混合、继承等功能，帮助你提高CSS代码的复用性和可维护性。
例如，使用Sass的变量来统一管理颜色、字体等：
$primary-color: #3498db; body { background-color: $primary-color; } |
7）遵循响应式设计原则
使用媒体查询（media queries）为不同设备（如手机、平板、桌面）设置不同的样式。这样可以确保你的页面在各种设备上都能良好显示。
@media (max-width: 768px) { .container { flex-direction: column; } } |
8）避免过度嵌套
CSS嵌套过多会增加复杂度，降低可读性和性能。特别是在预处理器中，嵌套层级不宜超过3层。
例如，避免：
.header { .nav { .item { .link { color: blue; } } } } |
9）使用自定义属性（CSS变量）
CSS变量使得你可以在整个CSS中重用相同的值，增强代码的可维护性，并能够更轻松地进行主题切换。
例如：
:root { --main-color: #3498db; } .button { background-color: var(--main-color); } |
10）减少不必要的动画
动画和过渡效果能为用户体验增色，但过度的动画会影响性能，尤其是在低性能设备上。因此，保持动画简洁，并优化其性能。
使用 will-change 提前告诉浏览器哪些元素会发生变化，以优化渲染性能。
11）避免重复的样式
识别和消除重复的样式。可以使用工具（如CSS压缩工具）来自动优化代码，并减少冗余。
例如，多个选择器使用相同样式时，合并它们：
.btn, .button { padding: 10px; font-size: 16px; } |
12）利用浏览器开发者工具调试
浏览器的开发者工具（如Chrome DevTools）可以帮助你快速调试和修改CSS样式，查看实时效果。养成使用这些工具调试的习惯。
13）使用Flexbox和Grid布局
对于复杂的布局，Flexbox和CSS Grid是现代浏览器中非常强大且灵活的布局工具。它们能简化许多传统布局方法（如浮动布局）的复杂性。
例如，使用Flexbox来做垂直居中：
.container { display: flex; justify-content: center; align-items: center; } |