less
- css的预处理语言,有着比css更强大的功能,浏览器只能编译css,vscode需要安装easy less进行文件格式转换less—>css
- // less中的单行注释不会被解析到css;/* less中的多行注释,能被解析到css文件中*/
- 子选择器嵌套在父选择器里面
- 变量,在变量中可以存储一个任意的值,在需要时直接改变变量的值
- 变量的语法:@变量名:值;(大小写敏感,不能带特殊字符,不能以数字开头)
// 定义一个粉色的变量 @color: pink; // 错误的变量名 @1color @color~@# // 变量名区分大小写 @color 和 @Color 是两个不同的变量 // 定义了一个 字体为14像素的变量 @font14: 14px; body{ background-color: @color; } div{ color: @color; font-size: @font14; } a{ font-size: @font14; }
- &表示外层的父元素:&: hover
- :extend() 对当前选择器扩展指定选择器的样式(选择器分组)(包括指定选择器的样式)
- 使用类选择器时可以在选择器后边添加一个括号,这时我们实际上就是创建了一个mixins(相当于一个模板,别的选择器可以直接引用,引用时不用括号)
- 可以使用混合函数,在类选择器括号中传参@变量名
- @import用来将其他的less引入到当前的less
- 在less中所有的数值都可以直接进行运算
- less基础(补充)
- Less是一门CSS预处理语言,它扩展了CSS的动态特性
- Less编译:包含一套自定义的语法及解析器,编译生成对应CSS文体
//后代直接放在父级里 .heard { ... .login{ ... } } //如果遇见(交集|伪类|伪元素选择器)前面加&
- Less运算☆
- 注意:运算符中间左右空格隔开;对于两个不同单位的值之间的运算,结果取第一个值单位
转换
- 转换(transform)是使元素改变形状、尺寸和位置的一种效果。
- translate()方法
// 元素从其当前位置移动,根据给定的left(x坐标)和top(y坐标)位置参数 transform: translate(50px,100px);
- rotate()方法
// 元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。 transform: rotate(30deg);
- rotateX()、rotateY()方法
// 元素围绕其 X 、Y轴以给定的度数进行旋转。 transform: rotateX(120deg); transform: rotateY(130deg);
- scale() 方法
// 通过scale()方法,元素的尺寸会倍数增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数 transform: scale(2,4);
- scaleX(x)、scaleY(y)、scaleZ(z)
- 定义 3D 缩放转换,通过给定一个 X、Y、Z 轴的值。
- skew()方法
// 元素翻转给定的角度,根据给定的水平线(X轴)和垂直线(Y轴)参数 transform: skew(30deg,20deg); // 围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 20 度。
- matrix()方法
// matrix()把所有 2D 转换方法组合在一起。需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。 transform:matrix(0.866,0.5,-0.5,0.866,0,0);
过渡
- CSS3 过渡(transition)是元素从一种样式逐渐改变为另一种的效果
// 规定您希望把效果添加到哪个 CSS 属性上 // 规定效果的时长 transition: width 2s; transition: width 2s, height 2s, transform 2s;
动画
- CSS3 @keyframes 规则
// 在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。 @keyframes myfirst { from {background: red;} to {background: yellow;} } // 多层改变 @keyframes myfirst { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} } //@keyframes 中创建动画时,请把它捆绑到某个选择器:规定动画的名称、规定动画的时长 div { animation: myfirst 5s; } div { animation-name: myfirst; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } div { animation: myfirst 5s linear 2s infinite alternate; }
多列
- column-count 属性规定元素应该被分隔的列数
div { column-count:3; }
- column-gap 属性规定列之间的间隔
div { column-gap:40px; }
- column-rule 属性设置列之间的宽度、样式和颜色规则
div { column-rule:3px outset #ff0000; }
用户界面
- resize 属性规定是否可由用户调整元素尺寸。
// 规定 div 元素可由用户调整大小 div{ resize:both; overflow:auto; }
- box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。
// 规定两个并排的带边框方框 div { box-sizing:border-box; width:50%; float:left; }
- outline-offset 属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓
// 规定边框边缘之外 15 像素处的轮廓 div { border:2px solid black; outline:2px solid red; outline-offset:15px; }