CSS优先级及变形学习笔记

发布时间：2024-11-02 03:21:32

CSS优先级及变形学习笔记

CSS优先级

样式继承

某些样式属性（如color）会自动继承父元素的样式。 例如： 

<div class="wrap">
    <p>Hello World</p>
</div>

<style>
.wrap {
    color: red;
}
</style>

结果：<p>标签中的文本会继承.wrap的color属性。

样式优先级

浏览器根据CSS优先级规则，决定应用哪些样式。 优先级规则： 内联样式 > ID选择器 > 类选择器/属性选择器/伪类选择器 > 标签选择器 !important 可覆盖其他声明。

示例代码：

p {
    color: red !important;
}
.text {
    color: blue;
}

优先级计算

选择器权值计算： !important: 10000 内联样式：1000 ID选择器：100 类/属性/伪类选择器：10 标签选择器：1

示例：

#msg { color: red; }  /* 权重：100 */
div.box.lg { color: blue; } /* 权重：21 */

结果：#msg 权重更高，优先应用样式。

CSS3变形 (Transforms)

Transform概念

CSS3的transform属性用于对元素进行移动、缩放、旋转和倾斜。

常用变形方法

1. 平移 translate()

沿X轴和Y轴移动元素。 

transform: translate(50px, 100px);

2. 旋转 rotate()

元素围绕中心旋转指定角度。 

transform: rotate(45deg);

3. 缩放 scale()

按比例放大或缩小元素。 

transform: scale(1.5);

4. 倾斜 skew()

沿X轴或Y轴倾斜元素。 

transform: skew(20deg, 10deg);

5. 矩阵 matrix()

使用六个参数综合设置元素变形。 

transform: matrix(1, 0, 0, 1, 50, 50);

CSS3 3D变形

3D变形方法

translate3d(x, y, z) rotate3d(x, y, z, angle) scale3d(x, y, z)

透视 perspective

定义观察者到屏幕的距离。 

.container {
    perspective: 1000px;
}

变形原点 transform-origin

控制变形发生的原点。 

transform-origin: center center;
transform-origin: 50% 50%;

总结

CSS优先级决定了样式的应用顺序。 !important 覆盖一切样式。 CSS3的transform属性可用于2D和3D变形。 通过transform-origin可控制元素的变形基点。

下一步学习： CSS动画与过渡。

评论数：0