《CSS样式和布局》课件.ppt

*************************************CSS变量(自定义属性)声明变量CSS变量(自定义属性)以--开头声明，通常在:root伪类中定义以使其全局可用。例如：:root{--primary-color:#3498db;--secondary-color:#2ecc71;--base-padding:15px;}变量名区分大小写，建议使用描述性名称并采用一致的命名约定，如kebab-case(短横线命名法)。使用变量使用var()函数引用变量。例如：button{background-color:var(--primary-color);padding:var(--base-padding);border:1pxsolidvar(--secondary-color);}var()函数可接受第二个参数作为回退值：var(--main-color,black)，当变量未定义时使用黑色。它还可以在计算中使用：calc(var(--base-padding)*2)。变量作用域CSS变量遵循层叠和继承规则。在特定元素上声明的变量仅对该元素及其后代可用，形成局部作用域：.card{--card-bg:#f4f4f4;}.cardp{background-color:var(--card-bg);/*有效*/}这种作用域机制使得可以创建组件特定的变量，或在特定上下文中覆盖全局变量。CSSSprite技术什么是CSSSpriteCSSSprite是将多个小图标或图像合并到一个大图片文件中，然后通过CSS的background-position属性显示所需部分的技术。例如，一个包含所有社交媒体图标的单一图片，每个图标在页面上显示时只显示适当的部分。这种技术在Web开发的早期非常流行，尤其在HTTP/1.1时代，因为它减少了HTTP请求数量，提高了页面加载速度。虽然现代网络已经改进，但Sprite仍在某些场景下使用。优点和缺点优点：减少HTTP请求数量，提高页面加载速度；减少总体文件大小(一个大图比多个小图总大小小)；避免图标闪烁(所有图标一次加载)；适合需要不同状态的图标(如正常、悬停)。缺点：维护复杂，添加或修改单个图标需要重新生成整个Sprite图；定位不便，需要精确计算坐标；对SEO不友好，图片无替代文本；不适合响应式设计，在不同分辨率下难以适配；无法单独缓存单个图标。实现方法1.创建包含所有图标的单一图像文件2.为每个需要显示图标的元素设置相同的背景图像：.icon{background-image:url(sprite.png);width:24px;height:24px;}.icon-home{background-position:00;}.icon-search{background-position:-24px0;}通过调整background-position值，可以移动背景图像，使需要的图标部分可见。现代开发中，可使用工具自动生成Sprite图和CSS代码。CSS优先级1内联样式最高优先级(1,0,0,0)2ID选择器高优先级(0,1,0,0)3类、属性、伪类选择器中等优先级(0,0,1,0)4元素、伪元素选择器低优先级(0,0,0,1)5通用选择器和组合器无贡献(0,0,0,0)CSS优先级决定了当多个规则应用于同一元素时，哪个规则会胜出。层叠(Cascade)是核心机制，根据样式来源、优先级和声明顺序确定最终应用的样式。优先级计算方式是四位权重值(a,b,c,d)，内联样式为(1,0,0,0)，每个ID加(0,1,0,0)，每个类/属性/伪类加(0,0,1,0)，每个元素/伪元素加(0,0,0,1)。优先级提升技巧包括：使用!important表示最高优先级(但应谨慎使用)；使用更具体的选择器如#id.class元素代替单个.class；利用选择器重复提升优先级，如.btn.btn比.btn优先级高；尽量使用类选择器而非元素选择器，便于覆盖；将需要高优先级的规则放在样式表末尾，利用声明顺序规则(相同优先级时，后声明的胜出)。CSS重置与归一化CSSResetCSSReset是一种技术，通过重置所有HTML元素的默认样式，使不同浏览器的起点一致。它通常是一个简单的样式表，将元素的边距、内边距、边框等设置为0或一致的值。流行的CSSReset包括Er