本书从第十二章P205开始讲CSS3的部分，由于笔记较多，所以分开记。
1.CSS3中，摒弃了class属性，提倡使用选择器来将样式与元素直接绑定起来。与正则表达式结合起来了。
2.属性选择器：CSS3中有属性选择器，并在其中加入了通配符的概念，引入正则表达式。
1)[att=val]{}属性选择器：若元素的att属性的值为val所指定的字符，则使用该选择器指定的样式。注意这里可以使用id属性，跟id选择器一样。
2)[att*=val]{}属性选择器：若元素的att属性的值中包含val所指定的字符，则使用该选择器指定的样式。
3)[att^=val]{}属性选择器：若元素的att属性的值以val指定的字符开头，则使用这个选择器指定的样式。
4)[att$=val]{}属性选择器：若元素的att属性的值以val指定的字符结尾，则使用这个选择器指定的样式。
以上选择器的val都是字符，他们中若包含特殊符号，也要像正则表达式一样，使用 \ 来进行转义。
灵活运用以上选择器，原来使用id选择器和class类选择器完成的样式都可以通过属性选择器来实现。
3.伪元素选择器：它并不是针对真正的元素使用的选择器，而是针对css中已经定义好的伪元素使用的选择器，使用方法：
使用该选择器的元素名：伪元素{属性：值}
伪元素选择器也可以与类配合使用，使用方法：
使用该选择器的元素名 类名：伪元素{属性：值}
在css中主要有以下四种伪元素选择器：
1)first-line伪元素选择器：用于对某个元素中的第一行文字使用样式。
2)first-letter伪元素选择器：用于对某个元素中的文字的第一个字母或者第一个字使用样式。
3)before伪元素选择器：用于在某个元素之前插入一些内容。例如在无序列表前边插入符号等。不仅能插入文字，图片，媒体也可以。
4)after伪元素选择器：用于在某个元素之后插入一些内容。例如在无序列表后边加上一些补充文字等。
上边的before和after选择器的用法：
要插入在哪个元素旁边：before{
content："插入的内容"
}//里边还可以对内容增加样式。同时，还可以结合类的使用，指定一个类，将content的属性设置为none，指定个别不进行插入的元素时将其class属性值设为该类名即可。
还可以用来插入图片：
要插入在哪个元素旁边：before{
content：url(图片.格式);
}//其实还能插入媒体，看浏览器支持与否。
在content中还可以通过arrt（属性名）来获得属性的值，比如在图片后边插入：
img:after{
content.arrt(alt);
}//这样就可以通过arrt(alt)得到img的alt属性值，并把它插入在图片后边。
在多个标题前加上连续的编号：
在content.counter（计数器名，编号类型）中加上编号类型，还可以指定不同的编号类型，比如大写字母(upper-alpha)和大写罗马字母(upper-roman)等。
在编号嵌套时（三个大标题，每个大标题下三个小标题）,可以在大标题的选择器中加入counter-reset:小标题计数器名; 以此来实现每个大标题下重置小标题计数器，让小标题在不同的大标题下都是从1开始重新计数。
可以用过编号的嵌套实现如下效果：
另外，还可以在字符串两边添加嵌套的文字符号：
例如在h1两边加上括号：
注意当需要添加双引号的时候，要用\进行转义。
4.结构性伪类选择器：允许开发者根据文档树中的结构来指定元素的样式。
1)root选择器：它将样式绑定到页面的根元素中。根元素即文档中的最顶层元素，在HTML页面中就是指包含整个页面的<html>部分。下例将整个网页背景设为黄色，body元素背景设为绿色：
:root{
background-color:yellow;
}
body{
background-color:limegreen;
}
注意：若上例中没有用root元素，只指定body元素，那么整个网页都是绿色。
2)not选择器：相对某个元素使用样式，但不希望该元素下的子元素继承样式时，可以使用not选择器。例如：
body *:not(h1){
background-color：yellow;
}
表示body下的h1元素的部分之外，其他部分背景色为黄色。
3)empty选择器：指定当前元素内容为空白时使用的样式。例如有个表格，当其中一些格子没有值的时候填充黄色。
4)target选择器：对页面中的某个target元素（该元素的id被当做页面中的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素之后起作用。
5.针对子元素的选择器：
1)first-child选择器和last-child选择器：单独指定某个父元素的第一个子元素和最后一个子元素的样式。使用方法：
子元素名：first/last-child{}
2)nth-child选择器和nth-last-child选择器：对指定序号的子元素指定样式：
子元素名：nth-child(n){}为第n个子元素指定样式
子元素名：nth-last-child(n){}为倒数第n个子元素指定样式
3)对所有奇数或者偶数个子元素使用样式：
nth-child(2n+1){} 对正数所有第奇数个子元素使用样式
nth-last-child(2n+2){} 对倒数所有第偶数个子元素使用样式
6.有些情况下，如一个div元素中，有多个文章，每个文章有<h>元素的标题和<p>元素组成的正文。此时，如果想要把文章的标题，按照奇偶分别指定不同的样式，就不能用上边的方法了。因为对上边的方法来说，在这种排列方式下，所有的<h>元素都处于div的奇数个元素，所有的<p>元素都处于div的偶数个元素，无法单独将<h>元素分奇偶。
这时，就需要使用nth-of-type选择器和nth-last-of-type选择器了。
h2:nth-of-type(odd){} 通过这个选择器，在父元素div中计算排序时，就只看相同的子元素，即<h>元素的排序了。
7.循环使用样式：例如在无序列表中，列表项有很多，想要以红黄蓝绿，红黄蓝绿来重复的指定样式时，仍然可以使用nth-child选择器，只要在nth-child(n)语句处，将n给位可以循环的参数（an+b）的形式，a表示每次循环中共包括几种样式，b表示指定的样式在循环中排在第几位。要4种颜色循环，即4n+1；4n+2；4n+3；4n+4的使用即可。
8.only-child选择器：当该父元素下只有一个子元素的时候使用该样式。
子元素名：only-child{} 等价于 子元素名：nth-child(1):nth-last-child(1){}
9. UI元素状态伪类选择器：指定的样式只有在元素处于某种状态下时才起作用，在默认的状态下不起作用。
1)E:hover选择器：鼠标移动到元素上时使用的样式。使用方法如下：
元素名：hover{}
还可以在元素中添加type属性，方法如下：
input[type="text"]:hover{}
所有UI元素状态伪类选择器使用方法均与此类似，下边不再赘述。
2)E:active选择器：元素被激活（鼠标按下还未松开）时使用的样式。
3)E:focue选择器：元素获得光标焦点时的样式，主要是在文本框控件获得焦点并进行文字输入的时候使用。
4)E:enabled选择器：当元素处于可用状态时的样式
5)E:disabled选择器：当元素处于不可用状态时的样式。
他俩结合JavaScript实现，单选框+文本框的组合表单时，根据单选项目不同，来决定文本框是否可用，文本框可用和不可用的时候，改变不同的样式。
6)E:read-only选择器：当元素处于只读状态时的样式
7)E:read-write选择器：当元素处于非只读状态时的样式。通过input的readonly属性来设置是否只读
8)E:checked选择器：当表单中的单选框或复选框处于选取状态时的样式。在firefox浏览器中，需要将其写作“-moz-checked”的形式
9)E:default选择器：当页面打开时默认处于选取状态的单选框或复选框控件的样式。这里要注意，即使用户将该框的选取状态设定为非选取状态，E：default选择器中指定的样式仍然有效。
10)E:indeterminate选择器：当页面打开时，若一组单选框中所有的框都没被设定为选取状态时，整组单选框的样式，若用户选取了其中任何一个单选框，则该样式被取消。目前只有Opera浏览器支持。
11)E::selection选择器：当元素处于被选中状态时的样子，例如选中文本，表格等。
10.通用兄弟元素选择器：
11.文字与字体的相关样式：
1)text-shadow属性：给页面上的文字添加阴影效果。
text-shadow:length length length color;
其中前三个值分别是阴影离开文字的横向距离，阴影离开文字的纵向距离，和阴影模糊半径，color为阴影颜色，后两个参数为可选参数。前两个length可以为负值，即反向移动。
还可以通过：
text-shadow:10px 10px green，20px 20px yellow, 30px 30px red;
这样可以为字体指定多个阴影。
2)文本自动换行：word-break属性。
3)长单词与url地址自动换行：word-wrap属性：
4)使用服务器端字体：Web-Font和@font-face属性
下载一套字体的时候，不仅包含常规字体，一般还包含斜体，粗体，粗斜体等字体文件，可以看情况使用。
5)显示客户端本地字体：
6)@font-face属性值的指定：
7)修改字体而保持字体尺寸不变：font-size-adjust属性
在实际中，不同的字体，即使尺寸选择一样，显示出来的大小仍然会不同，所以会需要上边这个属性。
12.关于盒子模型：之前讲过block块元素和inline行列元素。现在追加了一个inline-block元素。该元素在显示的时候，按照inline行列元素的性质来显示。它与inline行列元素的却别在于，它可以使用设置width宽度，而行列元素设置宽度无效。
13.之前在一行显示多个div元素的时候，需要用float或者position，较复杂。可以使用
inline-block类型来实现。
若想将3个div放在一行排列，且一行只能放下前两个div，且他俩高度不同，这样放第三个div的时候就会自动环绕，很难看，调整也麻烦。此时将前两个div设为inline-block类型，他俩就会默认下边对齐，下一个div就容易摆放了。若想改为上对齐，使用vertical-align：top即可。
可以用inline-block类型来实现水平菜单。
14.inline-table类型：
使用display：inline-table将table表格的类型转为inline-table，能够实现让表格周围的文本跟表格放在同一行。
15.若在display中将元素的类型设置为list-item类型，可以将多个元素作为列表来显示，同时在元素开头加上列表的标记。
16.run-in类型与compact类型。
将元素指定为run-in类型或者compact类型时，若元素后边还有block元素，run-in类型的元素会被包含在block元素的内部，而compact类型的元素会被放在block元素的左边。
17.表格相关属性：
18.将元素类型指定为none类型后，该元素将不被显示，即：
display：none；
19.若指定了盒子的宽度和高度，则有可能出现某些内容在盒子里放不下的情况。使用overflow属性来指定如何显示盒子里放不下的内容。同时与overflow相关的还有overflow-x属性，overflow-y属性以及text-overflow属性。
1)overflow属性的值有：hidden（超出的部分隐藏）；scroll(超出时出现滚动条)；auto(超出时出现滚动条)；visible(超出的部分直接显示)
2)overflow-x属性和overflow-y属性，可以单独指定在水平方向或垂直方向上内容超出盒子容纳范围时的方法。其属性的值与上边一样，overflow-x属性和overflow-y属性要一起用。
3)text-overflow属性：
20.给盒子增加阴影
该属性也可以对盒子内的元素使用阴影效果，直接在样式上加上就好了。也可以结合之前的first-letter对第一行或者第一个字使用阴影。
21.对表格table和单元格td也可以使用阴影，看上去更立体。
22.box-sizing属性： 控制元素的总宽度
关于content-box与border-box：因为默认是content-box，所以在指定元素时，只对内容的宽度做了指定，实际宽度要更大；而使用border-box属性，能够指定元素的总宽度，有些场合下利用这个属性会使布局更加方便。例如想要两个div元素并列显示，只要将box-sizing属性的值设置为border-box，再把宽度设为50%，就可以了。
23.CSS3中追加了一些背景相关的属性：
1)指定背景的范围：background-clip属性
盒子模型中，内容外边有padding，还有border。使用background-clip属性可以设置背景的范围，若属性值设为border，则背景范围包括边框；若属性值设为padding则不包括边框。当边框为点划线的时候，效果会很不一样。
2)指定绘制背景图像的绘制起点：background-origin属性 不同的浏览器写法不同。
绘制背景图像时，默认从padding区域的左上角开始绘制，但可以利用background-origin属性（属性值默认padding，还可以是content和border）来指定绘制时从border或者content的左上角开始绘制。
3)指定背景图像的尺寸：background-size属性
上边几种属性，不同的浏览器写法都不同，用的时候两种都要写。
上图中40px是width，20px是height，若要维持图像的横纵比，就设置其中一个，另一个设置为auto。设置宽高的时候也可以使用百分比，但是不同的浏览器百分比的算法不同。
4)指定内联元素背景图像进行平铺时的循环方式：background-break属性
5)
24.在一个元素中显示多个背景图像。
使用background-image：url（图片）,url（图片）可以实现显示多个背景图像，中间用逗号隔开。浏览器会把第一个图片放在最上边，最后一个放在最下边，按照这个顺序指定，要显示不同的图片，还要配合以下几个属性一起使用：
25.使用CSS3绘制圆角边框。
在border-radius属性中，可以指定两个半径，此时在不同的浏览器中表现不同。
注意，当使用了border-radius属性但是把边框设置为不显示的时候，会把背景的四个角绘制成圆角。使用了border-radius属性之后，不论边框是什么种类，都会沿着曲线进行绘制。
26.绘制四个角不同半径的圆角边框：
27.图像边框：比较复杂
28.使用border-image属性来指定边框宽度
29.在CSS3中，可以使用transform功能来实现图像的旋转，缩放，倾斜，移动这四种类型的变形处理。
1)旋转：使用transform：rotate（45deg）；
使用此方法可以实现顺时针旋转45度。
2)缩放：使用transform：scale(0.5)；
使用此方法可以实现缩小50%。
另外，可以分别指定元素水平方向和垂直方向上的放大倍率。
transform：scale(0.5,2); 表示水平方向变为50%，垂直方向变为2倍
3)倾斜：使用transform：skew(30deg,30deg)；
使用此方法可以实现水平方向上倾斜30度，垂直方向上倾斜30度。
另外，也可以只指定一个参数，此时默认水平方向倾斜，垂直不倾斜。
注意：倾斜会造成变形，旋转不会。
4)移动：使用translate：（50px，50px）；
使用此方法实现在水平方向上移动50个像素，在垂直方向上移动50个像素。
另外，也可以只指定一个参数，此时默认水平方向上移动，垂直方向上不移动。
30.如何综合使用上述方法对一个元素进行综合变形。
注意:图像的移动是针对图像本身的方向进行移动，而非针对窗口或者浏览器，所以当图像旋转一定方向（如顺时针旋转45度）之后再移动时，移动的方向很可能是倾斜的（如旋转45度之后，图像向右移动，在浏览器上看起来是像右下角斜着移动）。所以移动，旋转的顺序不同，会造成不用的结果。
31.改变变形的基准点：
例如：将属性值设置为：left bottom； 即可将基准点改为左下角。
32.CSS3中的动画功能：
1)Transitiongs功能:支持从一个属性平滑过渡到另一个属性。
2) Animationgs功能：支持通过关键帧来在页面上指定更复杂的动画效果。
33.transitions功能：通过将某个元素的一个属性，从一个属性值在一定的时间内平滑过渡到另一个属性值来实现动画效果。
另外，还有一种比较麻烦的使用方法，就是将这三个属性分开写：
34.transitions功能也可以同时对多个属性值进行平滑过渡，写在同一行，不同的属性之间用逗号进行间隔：
35.transitions功能结合transform可以让元素实现移动旋转的动画。使用它的缺点在于，它只能指定起点和终点，然后在他们之间平滑过渡，不能实现更为复杂的效果。
36.在CSS3中，除了Transitions功能外，还有Animations功能，它可以定义多个关键帧，并指定每个关键帧中的元素属性值，来实现更复杂的动画效果。
37.若想要实现多个属性值同时改变的情况，只要在各个关键帧同时指定多个属性值就可以了。
另外，在元素的代码样式中，可以通过animation-iteration-count属性来指定动画的播放次数，当指定值为5，即动画播放5次；若指定该属性的值为infinite，则动画不停的循环播放。
38.实现动画的方法：在前边几个示例中，都只用了linear，还有其他的。
39.网页淡入效果:
使用Animation方法还可以实现网页淡入的效果：其实很简单，就是在关键帧代码中加入一个opacity属性，将透明度从0到1的进行改变，就可以实现网页淡入了。
40.布局的相关样式：
在CSS3之前，主要使用float和position属性进行页面中的简单布局，但是使用它们也有一些缺点，比如两栏或者多栏中如果元素的内容高度不一致，则有底部很难对齐的问题。所以CSS3中追加了一些新的布局方式，它们可以修改这些问题并且让布局更简单，实现更加复杂的布局。
41.CSS3的多栏布局：使用多栏布局可以将一个元素的内容分为两栏或多栏显示，并且确保各栏中内容底部对其。
42.盒布局：CSS3中，除了使用多栏布局之外，还可以使用盒布局来解决前边说的float和position属性时左右两栏不对齐的问题。
在CSS3中，使用box属性来使用盒子布局，在Firefox浏览器中，要写成“-moz-box”的形式，在Safari浏览器或者chrome浏览器中要写成“-webkit-box”的形式。
盒子布局相当于把几个div放在一个大div盒子里，这几个div不管怎么样都会填满大的div，从而实现底部对齐。
43.盒子布局与多栏布局的区别：
44.弹性盒布局：
另外，使用盒布局的时候，元素的高度与宽度具有自适应性，即元素的宽度与高度可以根据排列方向的改变而改变。
盒子布局这里有很多细节，在实际操作的时候还要再回来重看一下。
45.CSS3中加入了Media Queries模块，该模块中允许添加媒体查询（media query）表达式，用以指定媒体的类型，然后根据媒体的类型来选择应该使用的样式。换句话说，允许我们在不改变内容的情况下在样式中选择一种页面的布局以精确的适应不同的设备，从而改善用户体验。
@media screen and (min-width:600px) and (max-width:999px){ 样式 }
通过设置不同的显示器范围，来使用不同的样式。
46.iphone中的Safari浏览器比较特别，要用meta指定处理页面时按照什么宽度来处理才行。P383
47.media query的使用方法：
(min-width:400px)
48.在CSS3之前，在样式种只能使用RGB颜色值，只能用opacity属性来设置元素透明度。CSS3样式中增加了3中颜色值：RGBA，HSL,HSLA。并且允许通过RGBA颜色值和HSLA颜色值设定alpha通道的方法来更容易的实现半透明文字与图像互相重叠的效果。
49.对RBG颜色利用alpha通道来设定颜色：
50.对HSL颜色利用alpha通道来设定颜色：
51.alpha通道和opacity属性的区别：
52.指定颜色值为transparent
53.在CSS3的用户界面模块中，定义了很多用来提高用户体验而新增的属性和功能。
1)CSS中定义了一个outline属性，用来在元素周围绘制一条轮廓线，可以起到突出元素的作用。
2)CSS3中新增了out-offset属性：
在默认情况下，对带有边框的元素来说，使用outline属性将紧贴着边框外围绘制一条轮廓线。有时我们不想让轮廓线紧贴着，想让它稍微向外偏离几个像素，以绘制出双层边框的效果，这时就可以使用out-offset属性了。
3)resize属性允许用户通过拖动的方式来修改元素的尺寸。目前，主要用于可以使用overflow属性的任何元素中。
4)initial属性：取消对元素的样式指定。
initial属性值的作用就是让各种属性使用默认值。
但是，个别情况下，使用initial属性后的结果并不等于直接删除该样式之后的结果，因为initial属性是让该属性变为浏览器的默认值，而不管html元素的默认值，例如h系列元素，默认字体会比浏览器默认字体大，此时就会不同。
74
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
