CSS3选择器

新增基本选择器

子元素选择器

概念

子元素选择器只能选择某元素的子元素

注意：是直接后代，不是间接后代

语法格式

父元素 > 子元素（father > child）

兼容性

IE8+、Firefox、Chrome、Safari、Opera

相邻兄弟元素选择器

概念

相邻兄弟选择器可以选择紧接在另一个元素后的元素，而且他们具有一个相同的父元素

语法格式

元素 + 兄弟相邻元素（element + sibling）

兼容性

IE8+、Firefox、Chrome、Safari、Opera

通用兄弟选择器

概念

选择某元素后面的所有兄弟元素，而且他们具有一个相同的父元素

语法格式

元素 ~ 后面所有兄弟相邻元素（element ~ siblings）

兼容性

IE8+、Firefox、Chrome、Safari、Opera

群组选择器

概念

群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号“ , ”隔开

语法格式

元素1 , 元素2 , ... , 元素n（element1 , element2 , ... , elementn）

兼容性

IE8+、Firefox、Chrome、Safari、Opera

属性选择器 element[attribute]

概念

选择所有带有attribute属性的元素

兼容性

IE8+、Firefox、Chrome、Safari、Opera

举例

element[attribute="value"] 选择所有使用attribute="value"的元素
element[attribute~="value"] 选择所有attribute属性包含单词"value"的元素（注意是用空格隔开的单词）
element[attribute^="value"] 选择所有attribute属性以"value"开头的元素
element[attribute$="value"] 选择所有attribute属性以"value"结尾的元素
element[attribute*="value"] 选择所有attribute属性包含"value"的元素
element[attribute|="value"] 选择所有attribute属性为"value"或以"value-"开头的元素

伪类选择器（权值为10）

动态伪类

这些伪类并不存在于HTML中，只有当用户和网站交互的时候才能体现出来

锚点伪类

:link、:visited

用户行为伪类

:hover、:active、:focus

UI元素状态伪类

概念

我们把":enabled"、":disabled"、":checked"伪类称为UI元素状态伪类

兼容性

IE9+、Firefox、Chrome、Safari、Opera

CSS3结构类

我们把CSS3的:nth选择器也成为CSS3结构类

element:fitst-child

选择属于其父元素的首个子元素的每个element元素

elment:last-child

选择属于其父元素的最后一个子元素的element元素

element:nth-child()

选择器匹配属于其父元素的第N个子元素，无论元素的类型（计数时不看类型，但显示时还是要看类型的）

说明：参数可以取number（某个具体值）、带n的表达式（n从0开始，依次取0,1,2……）、odd（第奇数个）、even（第偶数个）

element:nth-last-child()

选择器匹配属于其父元素的倒数第N个子元素，无论元素的类型（计数时不看类型，但显示时还是要看类型的）

element:nth-of-type()

选择器匹配属于父元素的特定类型的第N个子元素的每个元素（从符合的标签中数出第N个）

element:nth-last-of-type()

选择器匹配属于父元素的特定类型的倒数第N个子元素的每个元素（从符合的标签中数出倒数第N个）

element:first-of-type

选择器匹配属于其父元素特定类型的首个子元素的每个元素

element:last-of-type

选择器匹配属于其父元素特定类型的最后一个子元素的每个元素

element:only-child

选择器匹配属于其父元素的唯一子元素的每个元素（元素必须是其父元素的唯一子元素才符合，也就是指向自己）

element:only-of-type

选择器匹配属于其父元素的特定类型的唯一子元素的每个元素（可以有其他类型的元素，但该类型的元素只能有一个）

element:empty

选择器匹配没有子元素（包括文本节点，即标签内没有文字）的每个元素

否定选择器

:not（element / selector）

选择器匹配非指定元素 / 选择器的每个元素

语法格式

父元素:not（子元素 / 子选择器）

兼容性

IE9+、Firefox、Chrome、Safari、Opera

伪元素（权值为1）

element::first-line

概念

根据"first-line"伪元素中的样式对element元素的第一行文本进行格式化

说明

"first-line"伪元素只能用于块级元素

element::first-letter

概念

用于向文本的首字母设置特殊样式

说明

"first-letter"伪元素只能用于块级元素

element::before

概念

在元素的内容前面插入新内容

说明

是其元素的父元素的第一个子元素
是行级元素
常用"content"配合使用，内容通过content写入
标签中找不到对应的标签

element::after

概念

在元素的内容后面插入新内容

说明

是其元素的父元素的最后一个子元素
是行级元素
常用"content"配合使用，内容通过content写入，多用于清除浮动
标签中找不到对应的标签

div::after{
    display:block;
    content:"";    /*这句不写不行，如果不写还是无法撑开父元素*/
    clear:both;
}

element::selection

概念

用于设置在浏览器中选中文本后的背景色与前景色（即光标选中区域的效果）

兼容性说明

selection在IE家族中，只有IE9+版本支持，在firefox中需要加上其前缀“-moz”

CSS3边框与圆角

border-radius属性

一个最多可指定四个 border -*- radius 属性的复合属性，这个属性允许你为元素添加圆角边框

语法

border-radius: 1-4 length|% / 1-4 length|%

多值

四个值：分别是左上角、右上角、右下角、左下角（顺时针）
三个值：分别是左上角、右上角和左下角、右下角
两个值：分别是左上角与右下角，右上角与左下角
一个值：四个圆角值相同

兼容性

IE9+、Firefox4+、Chrome、Safari5+、Opera

说明：

单位不仅可以是px，还可以是em、vw、rem等。
用%时，是相对容器本身宽高而言的，会出现圆角不圆的效果。取值为50%时，会变成椭圆。
可以用border-radius-top(bottom)-left(right)来单独设置

box-shadow属性

可以设置一个或多个下拉阴影的框

语法

box-shadow-

h-shadow：水平阴影，正值往右

v-shadow：垂直阴影，正值往下

blur：模糊

spread：往四周扩展

color：颜色

inset：内外阴影

border-image属性

使用border-image-*属性来构建美丽的可扩展按钮

语法

border-image-

source：指定要使用的图像，取值可以是 none | image路径

slice：指定图像的边界向内偏移，取值可以是 number | % | fill （百分比越大，图片越小）

说明：fill为可选属性值，假如指定，name中间第九块不是透明块，假如不指定，那么为透明图片处理

width：指定图像边界的宽度，取值可以是 number | % | auto

outset：指定在边框外部绘制 border-image-area的量，取值可以是length | number

repeat：图像边界是否重复（repeat）、拉伸（stretch）或铺满（round）

兼容性

IE不兼容、Firefox、Chrome、safari6+、Opera不兼容

CSS3背景与渐变

CSS3背景图像区域

CSS3背景图像定位

设置背景是相对于内边距、边框还是内容框来定位

CSS3背景图像大小

说明：

percentage 表示占父元素的比例，如果只写其中一个百分比，另一个为auto，就会按比例进行缩放。如果两个都写，就按设置值大小显示图片。
cover 将背景图片等比缩放以填满整个容器，多余部分溢出（背景图片很大时），可以用定位调整背景显示区域，默认情况下从左上角开始显示。—— 以宽、高较小者为准
contain 将背景图片等比缩放至某一边紧贴容器边缘为止，也就是要么填满宽，要么填满高，另一侧填不满就留白。—— 以宽高较大者为准

CSS3多重背景图像

CSS3允许为元素使用多个背景图像

语法

background-image: url(1.jpg) , url(2.jpg);

注意：元素引用多个背景图片，前面图片依次覆盖后面的图

CSS3背景属性整合

建议：background 只写 color url repeat content-box(h) content-box(v) , background-size / background-oringin / background-clip / background-attachment 另外写，避免不兼容，有利于排除错误

CSS3线性渐变

注意：

第一个元素不设置百分比默认为0%，最后一个元素不设置百分比默认为100%。
百分比意思是从容器的某个位置到某个位置实现两个颜色的过渡，而这个位置用百分比来定位。

注意：百分比不满100%的不会自动填充剩余的部分，而是不断重复同一样式的渐变。

CSS3径向渐变

注意：关键字和形状要写在同一个参数中，用空格隔开。

CSS3文本与字体

CSS3文本阴影

text-shadow属性

说明：

h-shadow：阴影的水平距离
v-shadow：阴影的垂直距离
blur：模糊程度
color：阴影颜色

CSS3换行

word-break属性

说明：

normal：单词放不下了，换到下一行。在中文显示中，若文档流中最后一行只有一个标点符号，就会和它前面的字符一起排到实际显示的最后一行。
break-all：单词放不下了，把字符断开
keep-all：单词放不下了，换到下一行，有连字符就从连字符断开。在中文显示中，从文档流中离换行处最近的标点符号处换行。

word-wrap属性

说明：

normal：即使单词很长，没有遇到空格也不会断开，会直接溢出
break-word：把单词断开以防止溢出现象

CSS3新文本属性

text-align-last属性

说明：

left：左对齐
right：右对齐
center：水平居中
justify：两端对齐
start：主流文本左对齐则最后一行左对齐
end：主流文本左对齐则最后一行右对齐

text-overflow属性

说明：

clip：溢出部分直接减掉
eliipsis：溢出部分用省略号表示
string：溢出部分用自己写的"string"来表示

CSS3 @font-face的语法规则

先把字体文件放入服务器，网页加载时自动下载服务器中的字体文件到客户本地，从而在用户的电脑上也能显示出所需的字体。

CSS3 @font-face的取值说明

注意：source 建议使用相对路径。

CSS3 @font-face的字体格式

说明：svg 其实是以图片的形式渲染出字体的样式

CSS3 @font-face的字体应用

说明：

font-family在本地自带的字体库中找不到myFont，就会到src指定的url中，自上而下去寻找一个可以兼容的字体格式
最好新建一个font文件夹，把字体都放在这个文件夹下，相对路径就写为：url('font/myFont.ttf')

CSS3 获取特殊字体

Fontsquirrel

www.fontsquirrel.com/tools/webfo…

从本地上传字体myFont（自行定义）
Agreement 中点击Yes，点击上面的EXPERT
勾选Font Formats 中的.tt .woff .eot（通常为了网页运行快，选压缩版本） .svg
点击download your kit
到所在文件夹打开生成的css文件
复制粘贴到css文件中
到所在文件夹把生成的字体文件放到font目录下，并把名称改为我们自己命名的myFont（自行定义）

CSS3转换

CSS3 Transform

说明：[<transform-function>]* 意思是后面还可以加无数个函数

CSS3 2D转换

CSS3 rotate() 旋转

说明：

角度以deg为单位
旋转一定要有一个旋转中心，所以必须先用transform-origin来确定旋转中心，若缺省，默认transform-origin:50% 50%

/*为了兼容各种浏览器*/
-webkit-transform:rotate(7deg);
   -moz-transform:rotate(7deg);
    -ms-transform:rotate(7deg);
     -o-transform:rotate(7deg);
        transform:rotate(7deg);

CSS3 translate() 平移

说明：

translate的单位可以是px、em、rem、vw、% ，x轴取正值向右偏移，y轴取正值向上偏移。
translate(x,y)第一个参数不能缺省，第二个参数可以，不写时默认为0

CSS3 scale() 缩放

说明：

缩放的标准线在父容器的垂直中线、水平中线或中点上，而不在左上角。
scale()的第一个参数不能缺省，第二个参数可以，不写时默认和第一个参数一样
scale的参数是以1为基准的缩放矢量参数，不需要单位，也不能用分数和百分比

CSS3 skew() 扭曲或斜切

说明：角度为正，逆时针转动，以中线为旋转中心。与rotate不同，rotate角度为正顺时针转动，以本元素中点为旋转中心

skew(x,y)第一个参数不可缺少，第二个参数可以，不写时默认为0。

CSS3 3D转换

CSS3 rotate3d()

说明：角度0 ~ 90°，元素被逐渐压缩，角度90° ~ 180°，元素倒置并逐渐变大。

说明：以中点为旋转中心旋转

说明：

rotate3d(x,y,z,angle)是三种效果叠加的效果。
前三个参数中，取值为1意为该方向顺时针旋转，0为该方向不旋转，-1位该方向顺时针旋转。

CSS3 translate3d()

说明：多用于遮罩

说明：x轴参数指明距离左上角水平平移距离，y轴参数指明距离左上角垂直平移距离，z轴参数指明距离人眼前后平移距离

CSS3 scale3d()

说明：scaleZ是厚度的变化

CSS3 perspective3d()

CSS3 Transform与坐标系统

CSS3 矩阵

说明：

[x y 1] 若不写，默认为 [0 0 1]
ax+cy+e为变换后的水平坐标，bx+dy+f表示变换后的垂直位置。

CSS3 扩展属性

transfor-style属性

perspective属性

说明：z＞0的部分比正常大，z＜0的部分比正常小

backface-visibility属性

说明：z＜0的部分不可见

CSS3过渡

说明：

从一种形态变到另一种形态，也就是CSS值发生变化
CSS效率非常高，它发生的变化时瞬间变化，速度非常快
视觉发生变化时，前一秒的视觉会在人眼中停留0.1s，而CSS的变化时间绝对小于0.1s，如果1s中经历有24帧的变化，就可以认为它是瞬间直接变化的。

transition-property属性

transition-duration属性

transition-timing-function属性

说明：

liner：匀速变化
ease：先慢后快
ease-in：先慢后很快
ease-out：先很快后慢
ease-in-out：先慢后快再慢

transition-delay属性

说明：duration 是开始变化到变化完成经历的时间，delay是开始变化之前等待的时间

<style type="text/css">
body { background: #abcdef; }
div { width: 800px; height: 800px; margin: auto; transform: rotate(0deg); background: url(images/imooc.png) no-repeat center center, url(images/circle_outer.png) no-repeat center center;
    -webkit-transition-property: transform;
       -moz-transition-property: transform;
        -ms-transition-property: transform;
         -o-transition-property: transform;
            transition-property: transform;
    -webkit-transition-duration: 2s;
       -moz-transition-duration: 2s;
        -ms-transition-duration: 2s;
         -o-transition-duration: 2s;
            transition-duration: 2s;
    -webkit-transition-timing-function: ease-in-out;
       -moz-transition-timing-function: ease-in-out;
        -ms-transition-timing-function: ease-in-out;
         -o-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out;
    -webkit-transition-delay: 1s;
       -moz-transition-delay: 1s;
        -ms-transition-delay: 1s;
         -o-transition-delay: 1s;
            transition-delay: 1s;
}
div:hover { cursor: pointer; transform: rotate(180deg);
    -webkit-transition-property: transform;
       -moz-transition-property: transform;
        -ms-transition-property: transform;
         -o-transition-property: transform;
            transition-property: transform;
    -webkit-transition-duration: 2s;
       -moz-transition-duration: 2s;
        -ms-transition-duration: 2s;
         -o-transition-duration: 2s;
            transition-duration: 2s;
    -webkit-transition-timing-function: ease-in-out;
       -moz-transition-timing-function: ease-in-out;
        -ms-transition-timing-function: ease-in-out;
         -o-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out;
    -webkit-transition-delay: 1s;
       -moz-transition-delay: 1s;
        -ms-transition-delay: 1s;
         -o-transition-delay: 1s;
            transition-delay: 1s;
}
</style>

注意：顺序一定不能错

CSS3动画

CSS3 动画

CSS3 animation

animation-name属性

animation-duration属性

animation-timing-function属性

animation-delay属性

建议：CSS中小数点前的0都可以省略掉，如 0.5 用 .5 表示

animation-iteration-count属性

注意：delay的时间不算在每一次动画循环播放时间之内，它是变化过程之外等待的时间。

注意：alternate和alternate-reverse必须配合循环属性使用

animation-fill-mode属性

注意：当循环次数为infinity时，显示不出我们设置的效果

animation-play-state属性

animation属性

说明：

animation 属性中 name 和 duration 是必须的，其余属性可缺省，如果只有一个时间参数，默认是duration的参数
duration参数如果不设置则默认为0，动画不会播放

<style type="text/css">
body { background: #abcdef; }
div { position: relative; width: 760px; height: 760px; margin: auto;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
div > div { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; background-repeat: no-repeat; background-position: center; }
div > .inner { background-image: url(images/circle_inner.png);
    -webkit-animation: circle_inner linear 10s infinite;
            animation: circle_inner linear 10s infinite;
}
div > .middle { background-image: url(images/circle_middle.png);
    -webkit-animation: circle_middle linear 10s infinite;
            animation: circle_middle linear 10s infinite;
}
div > .outer { background-image: url(images/circle_outer.png);
    -webkit-animation: circle_outer linear 10s infinite;
            animation: circle_outer linear 10s infinite;
}
div > .imooc { background-image: url(images/imooc.png); }
@keyframes circle_inner {
    from { transform: rotateX(0deg);   }
    to   { transform: rotateX(360deg); }
}
@keyframes circle_middle {
    from { transform: rotateY(0deg);   }
    to   { transform: rotateY(360deg); }
}
@keyframes circle_outer {
    from { transform: rotateZ(0deg);   }
    to   { transform: rotateZ(360deg); }
}
</style>

CSS3 @keyframes

<style type="text/css">
body { background: #abcdef; }
div { position: relative; width: 760px; height: 760px; margin: auto;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
div > div { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; background-repeat: no-repeat; background-position: center; }
div > .inner { background-image: url(images/circle_inner.png);
    -webkit-animation: circle_inner linear 10s infinite;
            animation: circle_inner linear 10s infinite;
}
div > .middle { background-image: url(images/circle_middle.png);
    -webkit-animation: circle_middle linear 10s infinite;
            animation: circle_middle linear 10s infinite;
}
div > .outer { background-image: url(images/circle_outer.png);
    -webkit-animation: circle_outer linear 10s infinite;
            animation: circle_outer linear 10s infinite;
}
div > .imooc { background-image: url(images/imooc.png); }
@-webkit-keyframes circle_inner {
    form   { transform: rotateX(0deg);   }
    25%    { transform: rotateX(45deg);  }
    75%    { transform: rotateX(315deg); }
    to     { transform: rotateX(360deg); }
}
@keyframes circle_inner {
    form   { transform: rotateX(0deg);   }
    25%    { transform: rotateX(45deg);  }
    75%    { transform: rotateX(315deg); }
    to     { transform: rotateX(360deg); }
}
@-webkit-keyframes circle_middle {
    form   { transform: rotateY(0deg);   }
    25%    { transform: rotateY(45deg);  }
    75%    { transform: rotateY(315deg); }
    to     { transform: rotateY(360deg); }
}
@keyframes circle_middle {
    form   { transform: rotateY(0deg);   }
    25%    { transform: rotateY(45deg);  }
    75%    { transform: rotateY(315deg); }
    to     { transform: rotateY(360deg); }
}
@-webkit-keyframes circle_outer {
    form   { transform: rotateZ(0deg);   }
    25%    { transform: rotateZ(45deg);  }
    75%    { transform: rotateZ(315deg); }
    to     { transform: rotateZ(360deg); }
}
@keyframes circle_outer {
    form   { transform: rotateZ(0deg);   }
    25%    { transform: rotateZ(45deg);  }
    75%    { transform: rotateZ(315deg); }
    to     { transform: rotateZ(360deg); }
}
</style>

CSS3 will-change

提高渲染速度的方法

will-change属性

说明：推荐使用<custom-ident>

注意：勿滥用will-change、使用时提前申明、remove

<style type="text/css">
body { background: #abcdef; }
div { position: relative; width: 760px; height: 760px; margin: auto;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
div > div { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; background-repeat: no-repeat; background-position: center;
    -webkit-transition: transform 10s ease;
       -moz-transition: transform 10s ease;
        -ms-transition: transform 10s ease;
         -o-transition: transform 10s ease;
            transition: transform 10s ease;
    -webkit-will-change: transform;
       -moz-will-change: transform;
            will-change: transform;
}
div > .inner { background-image: url(images/circle_inner.png); transform: rotateX(0deg); }
div > .middle { background-image: url(images/circle_middle.png); transform: rotateY(0deg); }
div > .outer { background-image: url(images/circle_outer.png); transform: rotateZ(0deg); }
div > .imooc { background-image: url(images/imooc.png); }
div:hover > .inner { transform: rotateX(360deg); }
div:hover > .middle { transform: rotateY(360deg); }
div:hover > .outer { transform: rotateZ(360deg); }
</style>

前端基础入门——升级页面化妆师CSS3

CSS3选择器

新增基本选择器

子元素选择器

相邻兄弟元素选择器

通用兄弟选择器

群组选择器

属性选择器 element[attribute]

伪类选择器（权值为10）

伪元素（权值为1）

CSS3边框与圆角

border-radius属性

box-shadow属性

border-image属性

CSS3背景与渐变

CSS3背景图像区域

CSS3背景图像定位

CSS3背景图像大小

CSS3多重背景图像

CSS3背景属性整合

CSS3线性渐变

CSS3径向渐变

CSS3文本与字体

CSS3文本阴影

text-shadow属性

CSS3换行

word-break属性

word-wrap属性

CSS3新文本属性

text-align-last属性

text-overflow属性

CSS3 @font-face的语法规则

CSS3 @font-face的取值说明

CSS3 @font-face的字体格式

CSS3 @font-face的字体应用

CSS3 获取特殊字体

CSS3转换

CSS3 Transform

CSS3 2D转换

CSS3 rotate() 旋转

CSS3 translate() 平移

CSS3 scale() 缩放

CSS3 skew() 扭曲或斜切

CSS3 3D转换

CSS3 rotate3d()

CSS3 translate3d()

CSS3 scale3d()

CSS3 perspective3d()

CSS3 Transform与坐标系统

CSS3 矩阵

CSS3 扩展属性

transfor-style属性

perspective属性

backface-visibility属性

CSS3过渡

transition-property属性

transition-duration属性

transition-timing-function属性

transition-delay属性

CSS3动画

CSS3 动画

CSS3 animation

animation-name属性

animation-duration属性

animation-timing-function属性

animation-delay属性

animation-iteration-count属性

animation-fill-mode属性

animation-play-state属性

animation属性

CSS3 @keyframes

CSS3 will-change

提高渲染速度的方法

will-change属性