众妙之门学习笔记

1.CSS3过渡(transition)效果:

如果要给某个a标签加上hover时颜色过渡动画，就使用

a{-webkit-transition: color .4s ease-out;}

其中第一个属性是过渡的属性，如果写成all则表示所有属性的变化都回引发该动画，第二个属性是过渡动画持续的时间，第三个属性是过渡效果，ease-out为原来的颜色会快速消失，新的颜色会慢慢出现，一般都回使用ease-out。

2.倾斜效果:

-webkit-transform:rotate(-5deg);
-moz-transform:rotate(-5deg);
-o-transform:rotate(-5deg);

3.阴影效果:

box-shadow: 3px 3px 5px black;

其中第一个属性是阴影水平偏移的像素，第二个属性是竖直偏移的像素，第三个属性是阴影的大小，第四个属性是阴影的颜色。

4.透明效果:

要是某个元素有透明效果，只需把颜色改为rgba(0,0,0,.5);即可；

其中前三个属性为RGB颜色值，第四个属性为透明度，数值为0-1，越小透明度越高。

5.CSS3动画(animation): 如果要对div使用动画，使用animation，其中第一个属性为动画的名字，第二个属性为动画完成一个周期持续的时间，第三个属性为是否循环。

div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s infinite;
/* Firefox: */
-moz-animation:myfirst 5s infinite;
/* Safari and Chrome: */
-webkit-animation:myfirst 5s infinite;
/* Opera: */
-o-animation:myfirst 5s infinite;
}

然后定义动画效果，可以把动画分割成多部分，定义每个部分的效果。

@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;}
}

@-moz-keyframes myfirst /* Firefox */
{
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;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
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;}
}

@-o-keyframes myfirst /* Opera */
{
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;}
}

6.一个基于CSS的现代网站应该是：渐进式增强、适应不同用户、模块化、高效率以及丰富的字体排版。

7.CSS3伪类:结构伪类、UI元素状态伪类、目标伪类、否定伪类。

#####a.结构伪类

:root–选择了页面上的根源素，大部分情况下为<html>元素
:nth-child(n)–选择所有满足n的元素，如
- table tr:nth-child(odd)能选择table 下所有偶数行的元素；
- li:nth-child(3)能选去第三个li;
- li:nth-child(5n)能选择第5、10、15…个元素
- li:nth-child(-n+5)能选择前五项
:nth-last-child(n)与:nth-child(n)相反，是从待选择元素的最后一个开始往前数。
:nth-of-type(n)与:nth-child(n)相似，只针对特定类型的元素，如
- article img:nth-of-type(odd){xx}把某篇文章中的某些图片处理
:nth-last-of-type(n)与上一个相反
:first-of-type和:last-of-type
:only-of-top
:last-child
:only-child
:empty

b.目标伪类

:target–比如页面上有个div，id为aaa，然后有个a标签的href="#aaa"，点击a标签的时候页面会移动到这个div上，:target就会选中该div。

c.UI元素状态伪类

:enabled和:disable :checked

#####d.否认伪类 :not

8.选择器

属性选择器

[att=value]–属性必须要有指定的确切的值；
[att~=value]–属性的值必须是以空格隔开的单词列表（例如，class="title featured home"），并且其中一个单词具有确切的指定值;
[att|=value]–属性的值正好是” value”或”value-“;
[att^=value]–属性的值以指定的值为起始；
[att$=value]–属性的值以指定的值为结尾；
[att*=value]–属性值包含指定的值。

子选择器
选择特定元素的直接子元素，如: div #sidebar > h2。
兄弟选择器

有两种类型的兄弟选择器：相邻兄弟选择器和通用兄弟选择器。相邻兄弟选择器：这种选择器使用”+”来组合前后两个简单选择器。选择器的元素有相同的父对象，并且第二个必须紧随着第一个出现。如: p + h2{xx;}

通用兄弟选择器：与相邻兄弟选择器作用相似，不同点在于通用兄弟选择器的第二个选择器并不需要一定是紧随着第一个出现。

Greatings

Have a nice day

Hey There