前端知识点总结(四) Css进阶Css3、Sass篇

1、CSS3新特性，伪类，伪元素，锚伪类#

• 动态伪类：（并不存在于HTML中,当用户和网站交互的时候才能体现出来）

• . property a:link { color; } 链接没有被访问时前景色为灰色
• . property a: visited { color: yellow; } 链接被访问过后前景色为黄色
• . property a: hover { color: green; } 鼠标悬浮在链接上时前景色为绿色
• . property a: active { color: blue; } 鼠标点钟激活链接那一下前景色为蓝色 注：先后顺序，遵守爱恨原则LoVe/HAte,也就是Link—visited—hover—active； 对于，，。，这个经常用在表单元素上。

• UI元素状态伪类：

• :enabled,:disabled,:checked IE6-8不支持"","",""这三种选择器。

• CSS3的：

• :first-child 选择某个元素的第一个子元素；
• :last-child 选择某个元素的最后一个子元素；
• :nth-child() 选择某个元素的一个或多个特定的子元素；
• :nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
• :nth-of-type() 选择指定的元素；
• :nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算；
• :first-of-type 选择一个上级元素下的第一个同类子元素；
• :last-of-type 选择一个上级元素的最后一个同类子元素；
• :only-child 选择的元素是它的父元素的唯一一个了元素；
• :only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；
• :empty 选择的元素里面没有任何内容

• 否定选择器（：not）

• 否定选择器 :not()，可以让你定位不匹配该选择器的元素。IE6-8浏览器不支持()选择器

• 伪元素（两个“：：”和一个“：”css3中主要用来区分伪类和伪元素）

• ::first-line：选择元素的第一行
• ::first-letter：选择元素的第一个字母
• ::before和::after：这两个主要用来给元素的前面或后面插入内容，这两个常用”content”配合使用，见过最多的就是清除浮动
• ::selection：用来改变浏览网页时选中文字的默认效果

2、css3动画transform，transition和animation的区别#

• transform(2D变换)

• translate(x,y)：沿着 X 和 Y 轴移动元素。
• rotate(angle)：旋转，在参数中规定角度。
• scale(x,y)：缩放转换，改变元素的宽度和高度。
• skew(x-angle,y-angle)：倾斜转换，沿着 X 和 Y 轴。
• matrix(n,n,n,n,n,n)：定义 2D 转换，使用六个值的矩阵。

• transition（过渡） Tip: transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。 兼容性：IE10+，Firefox, Opera 和 Chrome transition属性的值包括以下四个：

• transition-property： 指定对HTML元素的哪个css属性进行过渡渐变处理，这个属性可以是color、width、height等各种标准的css属性。
• transition-duration：指定属性过渡的持续时间
• transition-timing-function：指定渐变的速度：
  • ease：（逐渐变慢）默认值
  • linear：（匀速）
  • ease-in：(加速)
  • ease-out：（减速）
  • ease-in-out：（加速然后减速）
  • cubic-bezier：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。
• transition-delay：指定延迟时间，也就是经过多长时间才开始执行过渡过程。

• animation（动画） 需要配合@keyframes使用，语法规则<命名是由>”@keyframes”开头，后面接着 “动画的名称”加上一对花括号“{}”，括号中就是一些不同时间段样式规则。不同关键帧是通过from（相当于0%）、to（相当于100%）或百分比来表示。@keyframes定义好后，须通过animation把它绑定到选择器。animation的属性如下：

• Animation：所有动画属性的简写属性（除了animation-play-state 属性）。
• animation-name：规定 @keyframes 动画的名称。
• animation-duration：规定动画完成一个周期所花费的秒或毫秒,默认是0。
• animation-timing-function：规定动画的速度曲线，默认是”ease”。
• animation-delay：规定动画何时开始，默认是 0
• animation-iteration-count：规定动画被播放的次数，默认是 1（infinite：无限次）
• animation-direction：规定动画是否在下一周期逆向地播放。默认“normal”（reverse：反向播放；alternate：奇数次正向播放，偶数次反向播放；alternate-reverse：奇数次反向播放，偶数次正向播放。）
• animation-play-state：规定动画是否正在运行或暂停，默认是“running”（paused：暂停动画）。

a、Sass基本用法：#

    1、变量（SASS允许使用变量，所有变量以$开头，如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中)。

1
$blue: #1875e7;
2
div {
3
    color: $blue
4
}

    2、计算功能（SASS允许在代码中使用算式：)。

1
body {
2
    margin: (14px/2);
3
    top: 50px + 100px;
4
}

    3、嵌套（SASS允许选择器嵌套，属性也可以嵌套，在嵌套的代码块内，可以使用&引用父元素（伪类）;)。

b、代码重用：#

     1、继承: SASS允许一个选择器，继承另一个选择器.

1
.class1 {
2
    border: 1px solid #ddd;
3
}
4
/* class2要继承class1，需要使用 @extend 命令*/
5
.class2 {
6
    @extend .class1;
7
    font-size: 120%;
8
}

     2、Mixin: (定义可重用代码块)，mixin的强大之处，在于可以指定参数和缺省值。

1
/* 使用 @mixin 命令，定义一个代码块 */
2
@minxin left {
3
    float: left;
4
    margin-left: 10px;
5
}
6
/* 使用 @include 命令，调用 minxin */
7
div {
8
    @include left;
9
}

     3、颜色函数（SASS提供了一些内置的颜色函数，以便生成系列颜色。）      4、插入文件（@import命令，用来插入外部文件。如果插入的是.css文件，则等同于css的import命令。）

c、高级用法：#

     1、条件语句

1
/* @if 可以用来判断 */
2
p {
3
    @if 1 + 1 == 2 { border: 1px solid; }
4
    @if 5 < 3 { border: 2px detted; }
5
}
6
/* 一起的还有 @else 命令 */
7
@if lightness($color) > 30% {
8
    background-color: #000;
9
} @else {
10
    background-color: #fff;
11
}

     2、循环语句

1
/* sass 支持 for 循环 */
2
@for $i from 1 to 10 {
3
    .border-#{$1} {
4
        border: #{$i}px solid blue;
5
    }
6
}
7
/* while 循环 */
8
$i: 6;
9
@while $i > 0 {
10
    .item-#{#i} {
11
        width: 2em * $i
12
    }
13
    $i: $i - 2
14
}
15
/* each 命令与for类似 */
16
@each $member in a,b,c,d {
17
    .#{$member} {
18
        background=image: url("#{$member}.jpg");
19
    }
20
}

     2、自定义函数

1
/* Sass 允许用户编写自己的函数 */
2
@function double($n) {
3
    @return $n * 2
4
}
5

6
#sidebar {
7
    width: double(5px);
8
}