《CSS样式》课件概要.ppt

**********CSS居中技巧水平居中对于行内元素或文本，可以使用text-align:center;。对于块级元素，可以设置margin:0auto;并指定宽度。使用Flexbox时，可以设置display:flex;justify-content:center;。使用Grid时，可以设置display:grid;justify-items:center;或place-items:center;。垂直居中对于单行文本，可以设置line-height等于容器高度。对于多行文本，可以使用vertical-align:middle;配合display:table-cell;或使用padding实现近似垂直居中。使用Flexbox时，设置display:flex;align-items:center;。使用Grid时，设置display:grid;align-items:center;。水平垂直居中传统方法使用绝对定位：position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);。现代方法首选Flexbox：display:flex;justify-content:center;align-items:center;。或使用Grid：display:grid;place-items:center;（place-items是align-items和justify-items的简写）。响应式居中创建响应式居中布局时，应避免使用固定宽度和高度。使用max-width而非width，百分比或视口单位而非像素。结合媒体查询调整居中策略，确保在不同设备上都能正确居中。Flexbox和Grid是实现响应式居中的最佳选择。CSS精灵图（Sprite）概念和优势CSS精灵图（CSSSprite）是将多个小图标或图片合并到一个大图片中，然后通过CSS的background-position属性显示其中的特定部分。这种技术的主要优势是减少HTTP请求数量，提高页面加载速度，特别是在HTTP/1.1时代。精灵图还可以减少总图片大小（因为单个大文件通常比多个小文件更高效），简化版本控制（只需管理一个文件），并预加载所有图标（当第一个图标加载时，所有图标都被加载）。实现方法实现CSS精灵图的步骤：首先，将所有小图标合并为一个大图片，可以使用在线工具如SpriteCow或Spritebox。每个图标应有足够的间距以防止显示相邻图标。然后，为每个需要显示图标的元素设置相同的背景图片（精灵图），但使用不同的background-position值定位到特定图标。通常还需要设置元素的宽度和高度与目标图标一致，并使用overflow:hidden防止显示多余部分。CSS3新特性概览CSS3引入了大量新特性，极大扩展了网页样式的可能性。其中圆角（border-radius）允许创建圆角元素，无需使用图片或复杂hack。单独控制每个角的圆角半径，甚至可以创建椭圆形角。阴影效果包括box-shadow（为元素添加阴影）和text-shadow（为文本添加阴影），支持多重阴影、内阴影和各种颜色效果。CSS3动画通过@keyframes规则和animation属性实现，无需JavaScript即可创建复杂动画。可以控制动画的持续时间、速度曲线、延迟、重复次数和方向等。渐变包括线性渐变（linear-gradient）、径向渐变（radial-gradient）和最新的锥形渐变（conic-gradient），可用于背景、边框等。其他重要新特性包括多列布局、Flexbox、Grid布局、媒体查询（响应式设计基础）、变换（2D/3D转换）、过渡效果、自定义字体（@font-face）、背景增强（多重背景、背景大小控制）等。这些特性显著减少了对图片和JavaScript的依赖。CSS的未来：Houdini1Houdini简介Houdini是一系列低级API的总称，它们使开发者能够直接访问CSS引擎，自定义渲染过程。传统上，浏览器如何解析和应用CSS对开发者是黑盒，Houdini让开发者能够扩展CSS，创建之前不可能的效果，同时保持高性能。2PaintAPIPaintAPI允许开发者使用JavaScript编写绘图代码，生成图像，可用于背景、边框或任何接受图像的CSS属性。与使用图片相比，它更灵活，可以响应参数变化，创建自定义图案、渐变和复杂视觉效果。3LayoutAPILayoutAPI让开发者能够创建自定义布局算法，如掌握图（masonry）布局、圆形