CSS3包含在h5中，是h5中的一小部分
css3中提出了伪类以及伪元素（如果没有伪类和伪元素，则需要添加一个新的类）
推荐网站：bootstrap网站
一、结构性伪类选择器
总结
下列列表中前一个从后向前考虑，先考虑排序，再考虑元素类型；后一个从前向后考虑，先考虑元素类型，再考虑排序
-
:nth-child(n) 与 :nth-of-type(n)
父元素的第n个子元素的所有元素 与 某个元素的第n个同类元素 -
:first-child 与 :first-of-type
-
:last-child 与 :last-of-type
-
:nth-last-child(n) 与 :nth-last-of-type(n)
-
only-child 与 only-of-type
父元素中只有一个子元素，且这个元素为某元素 与 父元素中只有一个某元素，但可以有其他不同类型的元素
1、nth-child伪类
nth：第n个
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 n 可以是数字、关键词或公式
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul>li:nth-child(3) { //选择所有ul的第三个子元素li
background-color: cyan;
}
ul>li:nth-child(2n) { //选择第2、4、6、8个li
background-color: cyan;
}
ul>li:nth-child(2n+1) { //选择第3、5、7、9个li
background-color: cyan;
}
ul>li:nth-child(odd) { //选择奇数的li
background-color: cyan;
}
ul>li:nth-child(even) { //偶数
background-color: cyan;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<hr>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</body>
2、first-child 伪类
选择属于其父元素的首个子元素的每个xx元素
li:first-child{
background-color:blue
}
3、last-child伪类
选择属于其父元素的最后一个元素的每个xx元素
4、nth-last-child伪类
li:nth-child(4n){//4的倍数的li
background-color:blue
}
li:nth-last-child(4n){//4的倍数的li,但是是从后向前
background-color:blue
}
5、only-child 伪类
:only-child 选择器匹配属于父元素中唯一子元素的元素
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li:only-child {
color:red; //这里所有的li都会变红，因为第二个ul中的li虽然不是唯一的子元素，但是他会继承父元素的color属性
border: 1px red solid; //border不会继承
}
</style>
</head>
<body>
<ul>
<li>
first
<ul>
<li>xxxxx</li>
</ul>
</li>
</ul>
<hr>
<ul>
<li>
second
<ul>
<li>yyyy</li>
<li>yyyy</li>
<li>yyyy</li>
</ul>
</li>
</ul>
</body>
6、nth-of-type伪类
:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。
n可以是一个数字，一个关键字，或者一个公式。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p:nth-child(2) {
background-color: cyan;
}
p:nth-of-type(2) {
background-color: red;
}
</style>
</head>
<body>
<div>
<div>div1</div>
<p>这是第一个段落</p>
<p>这是第二个段落</p>
<div>div2</div>
<p>这是第三个段落</p>
<p>这是第四个段落</p>
</div>
</body>
- p:nth-child(2) 先满足2，即必须是第二个子元素，再满足是p元素
- p:nth-of-type(2) 必须为p元素，再满足是第二个元素
7、first-of-type
/* p:nth-of-type(1) {
background-color:cyan;
} */
p:first-of-type { //与上面意思相同，取第一个p
background-color: cyan;
}
8、last-of-type
p:last-of-type { //最后一个p
background-color: cyan;
}
9、nth-last-of-type
：nth-last-of-type（n）
从后往前选取父元素的特定类型的第n个子元素的每一个元素
：nth-of-type（n）
从前往后选取父元素的特定类型的第n个子元素的每一个元素
10、only-of-type
p:only-of-type
先考虑为p元素，再看是否这里没有其他p元素
二、文本新增属性
总结
1、设置元素透明度:
opacity: value|inherit;
rgba(x,x,x)
2、文字阴影 text-shadow
1、opacity属性
- 该属性设置元素的不透明级别
- opacity: value|inherit;
- value：规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。
- inherit：应该从父元素继承opacity属性
- 只设置父元素的透明度时，会影响子元素的透明度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#outer {
width: 300px;
height: 300px;
background-color: blue;
opacity: .1; //0.1透明度
}
#inner {
width: 100px;
height: 100px;
background-color:crimson;
/* opacity: .6; */
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
inner
</div>
</div>
</body>
</html>
2、rgba
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#outer {
width: 500px;
height: 300px;
background-color: rgba(0, 0, 0, .5); //黑色 rgba:red、green、blue、透明度（透明度默认为不透明）
margin: 100px auto;
}
</style>
</head>
<body style="background:url(images/timg.jpg);">
<div id="outer"></div>
</body>
</html>
3、背景透明文字不透明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#outer {
width: 500px;
height: 300px;
margin: 100px auto;
background-color: rgba(0, 0, 0, 0.2);
color: darkorange;
font-size: 30px;
line-height: 300px;
text-align: center; //文字居中，包括水平与垂直居中
}
</style>
</head>
<body>
<div id="outer">
背景透明文字不透明
</div>
</body>
</html>
4、文字阴影
text-shadow: h-shadow v-shadow blur color;
水平方向偏移，垂直方向偏移，模糊的距离，阴影颜色
text-shadow: 2px 2px 9px black;
5、背景模糊
filter 滤镜
www.runoob.com/cssref/css3…
filter:blur(px)给图像设置高斯模糊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#header{
position: relative;
width: 100%;
height: 100px;
background-color: rgba(0, 0, 0, .2);
overflow: hidden; /*超出部分隐藏*/
}
#header>img{
margin: 20px 0 20px;
}
#aa { /*div要脱离文档流*/
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: url(images/5.png);
background-size: 100% 124px;
z-index: -1; /*作为背景*/
filter: blur(10px); /*滤镜：给图像设置高斯模糊*/
}
</style>
</head>
<body>
<div id="header">
<img src="images/5.png" alt="" width="60px" height="60px">
<div id="aa"></div>
</div>
</body>
</html>
三、盒模型新增属性
1、盒模型阴影
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 100px;
height: 100px;
margin: 100px;
background-color: red;
/* box-shadow: 0px 10px 30px 10px blue; x偏移量、y偏移量、阴影模糊半径、阴影颜色 */
box-shadow: 0 0 30px 30px #000000, inset 0 0 30px yellow;/*x偏移量、y偏移量、阴影模糊半径、阴影颜色 ，inset为内阴影，所以这里既有内阴影又有外阴影*/
}
</style>
</head>
<body>
<div id="box"></div>
</body>
2、resize属性
resize 属性规定是否可由用户调整元素的尺寸。
none: 用户无法调整元素的尺寸
both :用户可调整元素的高度和宽度
horizontal: 用户可调整元素的宽度
vertical:用户可调整元素的高度
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 100px;
height: 100px;
background-image: url("images/timg.jpg");
resize: both;/*用户可调整元素宽度和高度*/
overflow: auto/*overflow 属性规定当内容溢出元素框时发生的事情。auto表示出现滚动条*/
}
</style>
</head>
<body>
<div id="box"></div>
</body>
3、怪异盒模型（IE盒模型）
www.cnblogs.com/yky-iris/p/…
标准盒模型中，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）
box-sizing则可以更改盒子的模型
content-box(默认) 标准盒模型
border-box: 怪异盒模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1 {
width: 200px;
height: 200px;
background-color: blanchedalmond;
}
#box2 {
width: 200px;
height: 200px;
background-color: blanchedalmond;
padding: 10px;
border: 10px solid rebeccapurple;
}
#box3 {
box-sizing: border-box; /**/
width: 200px;
height: 200px;
background-color: blanchedalmond;
padding: 10px;
border: 10px solid rebeccapurple;
}
</style>
</head>
<body>
<p>content-box</p>
<div id="box1">content-box</div>
<p>content-box</p>
<div id="box2">content-box</div>
<p>border-box</p>
<div id="box3">border-box</div>
</body>
</html>
四、新增UI样式
1、圆角
border-radius
该属性是一个简写属性，是为了将四个属性border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius简写为一个属性
这个CSS3属性不仅能够创建圆角，还可以创建椭圆角
有斜杠，则斜杠前表示水平半径长度，斜杠后表示垂直半径高度；无斜杠，表示水平半径和垂直半径一样
#div1 {
width: 200px;
height: 200px;
background-color: deeppink;
border-radius: 10px 20px 30px 40px; /*从左上角开始，顺时针*/
}
按照顺时针进行分配，如果没有设置，则和对角线上的一样
#div3 {
width: 200px;
height: 200px;
background-color: deeppink;
/*top-left、bottom-right:20px, top-right、bottom-left:40px*/
border-radius: 20px 40px;
}
水平半径为200px，垂直半径为400px
#div4 {
width: 200px;
height: 200px;
background-color: deeppink;
border-radius: 200px/400px;
}
斜杠前面是四个角的水平半径、斜杠后面是四个角的垂直半径
#div5 {
width: 120px;
height: 160px;
background-color: deeppink;
border-radius: 60px/100px 100px 60px 60px;
}
2、背景
background-size
background-size 属性规定背景图像的尺寸。
cover
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain
背景图进行缩放，刚好被包含在区域中
background-size: 400px 60px;
设置背景图的大小
background-origin
background-origin 属性规定 background-position 属性相对于什么位置来定位。
padding-box 背景图像相对于内边距框来定位。
border-box 背景图像相对于边框盒来定位。
content-box 背景图像相对于内容框来定位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
margin: 10px;
border: 20px dotted black;
padding: 50px;
background: url("images/img_flwr.gif");
background-repeat: no-repeat;
background-position: left;
}
#div1 {
background-origin: border-box;
}
#div2 {
background-origin: padding-box;
}
#div3 {
background-origin: content-box;
}
</style>
</head>
<body>
<p>background-origin:border-box</p>
<div id="div1">
背景图片背景图片背景图片背景图片背景图片背景图片背景图片背景图片背景图片
背景图片背景图片背景图片背景图片背景图片背景图片背景图片背景图片背景图片
</div>
<p>background-origin:padding-box</p>
<div id="div2">
背景图片背景图片背景图片背景图片背景图片背景图片背景图片背景图片背景图片
背景图片背景图片背景图片背景图片背景图片背景图片背景图片背景图片背景图片
</div>
<p>background-origin:content-box</p>
<div id="div3">
背景图片背景图片背景图片背景图片背景图片背景图片背景图片背景图片背景图片
背景图片背景图片背景图片背景图片背景图片背景图片背景图片背景图片背景图片
</div>
</body>
</html>
background-clip
规定背景的绘制区域
border-box 背景被裁剪到边框盒。
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。
text 元素的背景保留在前景内容中（文字），和其形状大小相同,目前仅支持chrome浏览器
div {
margin: 10px;
border: 20px dotted black;
padding: 50px;
background-color: yellow;
}
#div1 {
background-clip: border-box;
}
#div2 {
background-clip: padding-box;
}
#div3 {
background-clip: content-box;
}
#div4 {
background-image: url("images/timg.jpg"); //以图片为背景
font-size: 2em;
font-weight: 700;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
3、线性渐变
linear-gradient
linear-gradient() 函数用于创建一个线性渐变的 "图像"。
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
- direction 用角度值指定渐变的方向（或角度）。 默认方向向下
- color-stop1, color-stop2,... 用于指定渐变的起止颜色。
background-image: linear-gradient(red, blue, pink, black);
<style>
#div1 {
width: 300px;
height: 300px;
/* 0% 25% 50% 75% 100%*/
background-image: linear-gradient(red, blue, red, blue, red);
}
#div2 {
width: 300px;
height: 300px;
//红色60px宽，blue宽度90px，red宽度120px
background-image: linear-gradient(red 60px, blue 90px, red 120px, blue 150px, red 180px);
}
</style>
5、伪元素
after
<style>
div {
width: 300px;
height: 100px;
background-color: blanchedalmond;
}
div::after {
content: "我的内容在后面"
}
#p1::after {
content: "<-无聊！";
color: red;
}
</style>
</head>
<body>
<div>伪元素after</div>
<p id=p1>无聊的文字</p>
</body>
before
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 300px;
height: 100px;
background-color: blanchedalmond;
}
div::before {
content: "我的内容在前面"
}
#p1::before {
content: "<-无聊！";
color: red;
}
</style>
</head>
<body>
<div>伪元素after</div>
<p id=p1>无聊的文字</p>
</body>
first-letter伪元素
:first-letter 伪元素向文本的第一个字母添加特殊样式。
first-line伪元素
:first-line 伪元素向文本的首行添加特殊样式。
六、过渡
transition transition 属性是一个简写属性，用于设置四个过渡属性,默认值为all 0 ease 0
transition-property
transition-duration
transition-timing-function
transition-delay
1、transition-property
transition-property 属性规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）。
transition-property: width, height, background;
transition-property: none|all|property;
- none 没有属性会获得过渡效果。
- all 所有属性都将获得过渡效果。
- property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。
transition-duration：定义过渡效果持续的时间
2、transition-timing-function
transition-timing-function 属性规定过渡效果的速度曲线。
该属性允许过渡效果随着时间来改变其速度。
linear 匀速变化 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 ease-in 加速（等于 cubic-bezier(0.42,0,1,1)）。 ease-out 减速（等于 cubic-bezier(0,0,0.58,1)）。 ease-in-out 先加速再减速（等于 cubic-bezier(0.42,0,0.58,1)）。 cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 step-start 直接位于过渡效果结束处，等同于steps(1,start)， step-end 位于开始处，经过时间间隔后结束，等同于steps(1,end) steps(n) 过渡效果分为n步进行 steps(n,start) 过渡效果分为n步进行，直接开始过滤效果 steps(n,end) 过渡效果分为n步进行，在最开始暂停一会，再进行过渡
3、transition-delay
transition-delay 属性规定过渡效果何时开始。
4、练习
七、变形
1、旋转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#outer{
border: 1px solid black;
}
#inner {
width: 40px;
height: 40px;
background-color: tomato;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
transition: 3s; //过渡时间为3秒
}
#outer:hover #inner{
transform: rotate(360deg); //旋转369度
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
rotete
</div>
</div>
</body>
</html>
2、平移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#outer{
border: 1px solid black;
}
#inner {
width: 40px;
height: 40px;
background-color: tomato;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
transition: 3s;
}
#outer:hover #inner{
/*
transform: translateX(300px);
transform: translateY(300px);
如果这样写，则只会在垂直方向上平移，因为第二个语句将第一个语句覆盖了
*/
transform: translate(-300px,-300px); /*x，y方向平移，向上，向左*/
transform: translate(300px); /*水平方向，向右平移*/
transform: translate(0,300px); /*垂直方向，向下平移*/
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
rotete
</div>
</div>
</body>
</html>
3、斜切
transform: skewX(45deg);
/* transform: skewX(-45deg); */
/* transform: skewY(45deg); */
/*transform: skewY(-45deg);*/
4、缩放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#outer {
width: 800px;
height: 400px;
border: 1px solid black;
position: relative;
}
#inner {
width: 200px;
height: 200px;
background-color: coral;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
transition: 3s;
}
#outer:hover #inner {
/* transform: scaleX(0.5); x方向缩小
transform: scaleY(0.5); y方向缩小 ，如果两句一起写，下面那句会覆盖上面那句*/
transform: scale(2, 2); /*x，y方向都扩大两倍*/
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
rotate
</div>
</div>
</body>
</html>
5、改变基准点
transform-origin设置变换的中心点
transform-origin: 50px 50px; /*以元素左上角向右50px，向下50px的点为基点*/
动画
1、animation-name
animation-name属性：定义动画名称，用于指定由规则定义的动画的一个或多个名称。
animation-name属性必须与规则@keyframes配合使用，因为动画名称是由@keyframes定义声明的，如果提供多个属性值用逗号隔开。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1 {
width: 1000px;
height: 100px;
text-align:center;
border-radius:50%;
background-color: tomato;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
animation-name: myRotate;
animation-duration: 4s;
animation-iteration-count: 3;
animation-play-state: paused;
}
@keyframes myRotate{//关键帧
from { //如果只设置两个关键帧，可以使用from
transfrom:rotate(0deg);
}
to{
transfrom:rotate(360deg);
}
}
</style>
</head>
<body>
<div id="div1">animation</div>
</body>
</html>
2、animation-duration
动画持续时间
3、animation-timing-function
动画运用的类型（匀速linear、加速度、减速度、贝塞尔曲线）。
4、animation-direction
animation-direction 属性定义是否应该轮流反向播放动画。
//动画应该正常播放
animation-direction:normal
//反向运行动画，每周期结束动画由尾到头运行
animation-direction：reverse
// 动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。
animation-direction:alternate
//动画会在奇数次数（1、3、5 等等）向后播放，而在偶数次数（2、4、6 等等）正常播放
animation-direction:alternate-reverse //
5、animation-file-mode
作用：指定动画等待/结束的样式
animation-file-mode:forwards
//表示动画结束的状态和最后动画设置的状态保持一致
animation-file-mode:backwards
//动画开始之前的状态和
（from的状态）动画设置的开始状态保持一致
animation-file-mode:backwards
//forwards + backwards的状态
6、animation-play-state
animation-play-state:paused; //动画停止
animation-play-state:running //动画正在播放
7、animation-delay
动画的延迟
8、animation-iteration-count
动画运动的次数（默认情况下运动1次） infinite(无限循环)
响应式布局
1、引入
响应式布局：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。
针对不同的媒体，选择不同的css 页面会根据不同的设备、媒体改变自己的布局
2、媒体种类
三种类型 screen print all
<style>
@media screen{
#wrap{
border:10px solid; //如果是屏幕，则为十个边框
}
}
@media print{
#wrap {
border:10px dotted;//打印时边框线为虚线
}
}
</style>
<style>
@media all{
#wrap {
border:10px solid; //所有媒体都给div加上一个10px的边框
}
}
</style>
3、媒体属性宽度width
//当浏览器窗口宽度大于等于800px时，才应用下面的样式
@media screen and (min-width:800px){
#wrap{
border: 10px solid
}
}
4、设备属性宽度
device-width:设备尺寸(物理尺寸)
分为pc端和移动端
- 以前的屏幕中，一个逻辑像素点（css像素）对应一个物理像素点 高清屏幕中，一个逻辑像素点对应多个物理像素点
当物理设备宽度小于等于414px时，才能应用以下样式
@media screen and (max-device-width:41px){
#wrap{
border: 10px solid
}
}
5、设备像素比device-pixel-ratio
device-pixel-ratio：物理像素/逻辑像素
也分为pc端与移动端，包括最大像素比和最小像素比
- 原始屏幕 设备像素比 1:1
- 高清屏幕 设备像素比 n:1
- 设备像素比越大，屏幕越清晰
<body>
<script>
console.log(window.devicePixelRatio) //打印出屏幕的设备像素比
</script>
</body>
手机上 DPR就是设备像素比
@media screen and (device-pixel-ratio:2){
#wrap{
border: 10px solid
}
}
LESS
1、概述
什么是css预处理器
css预处理器定义了一种新的语言，其基本思路，用一种专门的编程语言，为css增加一些编程的特性，将css作为目标生成文件
比如，可以在css中使用变量、简单的逻辑程序、函数等，可以让css更加简洁、适应性更强、更加有可读性，易于代码的维护
Less
Sass (SCSS)
Stylus
使用方法
命令行方法
写好style.less文件后在命令行中将less文件编译成css文件
lessc style.less
lessc style.less style.css
代码用法
在终端中
npm init
npm install less
浏览器用法
写好less文件后，还要下载less.js文件并引入
<script src="less.js">要放在<link rel="stylesheet/less" type="text/css" href="style.less">后面，意思是用less.js对style.less进行编译，生成css文件
当去访问style.less文件时请求会失败，会出现跨域问题，具体看《跨域问题》那篇文章，可以下载live server插件解决
vscode中使用插件easy less
这个插件会在你写好less文件时自动生成css文件
3、变量
普通变量
使用@声明普通变量
作为选择器或者属性名称
选择器
@selector:.wrap
@{selector}:{
position: relative;
width: 300px;
height: 300px;
border: 1px solid;
margin: @zero auto;
}
属性名——使用的时候也要加大括号
@w:width;
@{selector}{
position: relative;
@{w}: 300px;
height: 300px;
border: 1px solid;
margin: @zero auto;
}
变量作为url
@url:"../images/timg.jpg"
@{selector}:{
position:relative;
width:300px;
height:300px;
background-image:url("@{url}");
}
4、嵌套
之前的写法
.wrap {
position: relative;
width: 300px;
height: 300px;
border: 1px solid;
margin: 0 auto;
}
.wrap .inner {
height: 100px;
width: 100px;
background-color: pink;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
现在的嵌套写法
.wrap {
position: relative;
width: 300px;
height: 300px;
border: 1px solid;
margin: 0 auto;
.inner{
height: 100px;
width: 100px;
background-color: pink;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
}
@zero:0;
*{
margin:@zero;
padding:@zero;
}
#list {
list-style: none;
line-height: 30px;
width: 300px;
background-color: cyan;
margin: 0 auto;
li{
height: 30px;
}
a{
float: left;
&:hover{ //a的伪类写法
color: blue;
}
}
span{
float: right;
}
}
5、混合
普通混合
将重复的代码抽出去
.center{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.box1{
height: 100px;
width: 100px;
background-color: pink;
.center;
}
.box2{
height: 100px;
width: 100px;
background-color: red;
.center;
}
不带输出的混合
.center部分不会被编译到css文件中
.center(){
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.box1{
height: 100px;
width: 100px;
background-color: pink;
.center;
}
.box2{
height: 100px;
width: 100px;
background-color: red;
.center;
}
带参数的混合
.centerBox(@w,@h,@c){
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width:@w;
height:@h;
background-color:@c;
}
.box1{
.centerBox(100px,100px,cyan);
}
.box2{
.centerBox(200px,200px,yellow);
}
带参数的混合
.centerBox(@w:100px,@h :100px,@c :cyan){
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width:@w;
height:@h;
background-color:@c;
}
.box1{
.centerBox(100px,100px,cyan);
}
.box2{
.centerBox(200px,200px,yellow);
}
命名参数
参数也是按照顺序传递的，但是进行命名后就可以不按照顺序传递
.box2{
.centerBox(@c:yellow,@w:200px); //高度使用默认值
}
模式匹配
类似于多态
根据第一个标识来匹配
<body>
<div id="sanjiao1"></div>
<div id="sanjiao2"></div>
<div id="sanjiao3"></div>
<div id="sanjiao4"></div>
</body>
@zero:0;
*{
margin:@zero;
padding:@zero;
}
//向上的三角
.triangle(top,@w:10px,@c:cyan){
border-width: @w;
border-color: transparent transparent @c transparent;
border-style: dashed dashed solid dashed;
}
//向下的三角
.triangle(bottom,@w:10px,@c:cyan){
border-width: @w;
border-color: @c transparent transparent transparent;
border-style:solid dashed dashed dashed
}
//向左的三角
.triangle(left,@w:10px,@c:cyan){
border-width: @w;
border-color: transparent @c transparent transparent;
border-style: dashed solid dashed dashed
}
//向右的三角
.triangle(right,@w:10px,@c:cyan){
border-width: @w;
border-color: transparent transparent transparent @c;
border-style: dashed dashed dashed solid
}
.triangle(@_,@w:10px,@c:cyan){
width: 0;
height: 0;
overflow: hidden;
}
#sanjiao1 {
.triangle(left,20px)
}
#sanjiao2 {
.triangle(top)
}
#sanjiao3 {
.triangle(right)
}
#sanjiao4 {
.triangle(bottom)
}
arguments
下面两部分代码相同
.border(@w:10px,@s:solid,@c:red){
border:@w,@s,@c
}
.border(@w:10px,@s:solid,@c:red){
border:@arguments
}
6、运算
表达式运算
7、继承
&.extend()表示继承
.center{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.centerBox(@w:100px,@h :100px,@c :cyan){
&.extend(.center);
width:@w;
height:@h;
background-color:@c;
}
&.extend(.center all);表示继承.center的所有样式，包括伪元素
.center:hover{
background-color:green;
}
.center{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.centerBox(@w:100px,@h :100px,@c :cyan){
&.extend(.center all);
width:@w;
height:@h;
background-color:@c;
}
