CSS3经典使用手册.docx

1.选择器一、属性选择器增加三种：att* = val：表示包含用val指定的字符att= val：表示开头字符用val指定的字符att$= val：表示结尾字符用val指定的字符例如：id$=-1background-color:yellow; 结尾字符为-1二、结构性伪类选择器1、例如： a:link a:visited a:hover a:active2、格式： 选择器：伪元素属性：值 选择器 类名：伪元素属性：值3、伪元素选择器： first-line：用于为某个元素中的第一行文字使用样式。 first-letter：用于某个元素中的文字的首字母或第一个字使用样式。 before：用于在某个元素之前插入一些内容。 after：用于在某个元素之后插入一些内容。4、选择器：root,not,empty,target root：将样式绑定到页面的根元素（是指位于文档树中最顶层结构的元素） not：想对某个结构元素使用样式，但想排除该结构元素的子结构元素。 empty：指定当元素内容为空白时使用的样式。 target：对页面中某个target元素指定样式，该样式只在用户点击了页面中的超链接来使用。5、选择器：first-child、last-child、nth-child、nth-last-child first-childlast-child元素：单独指定第一个子元素与最后一个子元素样式。 nth-child、nth-last-child元素： （1）对指定序号的子元素使用样式。 格式：nth-child(n) ：nth-last-child(n) （2）对所有第奇数个子元素或第偶数个子元素使用样式 正数第偶个：nth-child(odd) ：nth-last-child(n) 正数第奇个：nth-child(even) ：nth-last-child(n) 倒数第偶个：nth-last-child(odd) ：nth-last-child(n) 倒数第奇个：nth-last-child(odd) ：nth-last-child(n) （3）选择器：nth-of-type和nth-last-of-type 只针对同类型的子元素进行计算。6、Only-child 选择器三、UI元素状态伪类选择器共同特征：指定的样式只有当元素处于某种状态下时才起作用，在默认状态下不起作用。 e:hover 支持的浏览器 (ff,safari,opera,IE8,chrome) 移动到该元素鼠标指针样式 e:active 支持的浏览器 (ff,safari,opera,chrome) 鼠标按下还没松开的样式 e:focus 支持的浏览器 (ff,safari,opera,IE8,chrome) 元素获得光标焦点时使用的样式 e:enabled 支持的浏览器 (ff,safari,opera,chrome)元素处于可用状态时的样式 e:disabled 支持的浏览器 (ff,safari,opera,chrome)元素处于不可用状态时的样式 e:read-only 支持的浏览器 (ff,opera)指定元素处于只读状态时的样式（ff:-moz-read-only） e:read-write 支持的浏览器 (ff,opera)指定元素处于非只读状态时的样式（ff:-moz-read-write） e:checked 支持的浏览器 (ff,safari,opera,chrome)指定单选框或复选框选中状态 e:default 支持的浏览器 (ff)指定当页面打开时默认处于选取装态的单选框或复选框控件的样式。 e:indeterminate 支持的浏览器 (opera)默认选择整组单选框。 e:selection用来指定当元素处于选中状态时的样式。四、通用兄弟选择器2.文字与字体样式1、给文字添加阴影：text-shadow 支持的浏览器：safari,firefox,chrome,opera 使用方法： text-shadow:length length length color横方向距离，纵方向距离，模糊半径，颜色 指定多个阴影：text-shadow:10px 10px 10px #cccccc,20px 30px 30px #cccccc,40px 40px 50px #cccccc2、文本自动换行：word-break 支持的浏览器：IE，chrome,safari3、长单词与URL地址自动换行：word-wrap 支持的浏览器：所有 属性值：normal,break-word4、使用服务器端字体：web font与font-face font-face font-family:webfont; src:url(font/Fontin_Sans_R_45b.otf) format(opentype); font-weight:normal; 5、定义粗体、斜体、粗斜体、小型大写字体 fontin_sans_b_45.otf fontin_sans_i_45b.otf fontin_sans_bi_45.otf fontin_sans_sc_45.otf6、显示客户端本地的字体 font-family：Arial;Arial Italic;Arial Bold;Arial Bold Italic;Arial Black3.盒相关样式display一、inline-block支持浏览器：safari,opera,chrome,firefox, ie8二、inline-table支持浏览器：safari,opera,chrome,firefox, ie8以上三、list-item四、run-incompact五、表格相关类型元素 所属类型 说明table table 代表整个表格table inline-table 代表整个表格，table类型或inline-table类型tr table-row 表格中的一行td table-cell 表格中的单元格th table-cell 表格中的列标题tbody table-row-group 表格中所有行thead table-header-group 表格中的标头部分tfoot table-footer-group 表格中的脚注部分col table-column 表格中的一列colgroup table-column-group 表格中所有列caption table-caption 整个表格的标题六、none类型七、对于各浏览器支持各种盒类4、背景及边框一、与背景相关的新增属性1、background-clip指定背景的显示范围 浏览器支持：火狐浏览器:-moz- background-clip safarigoogle chromeopera:-webkit- background-clip 属性： background-clip：border(包括边框区域) background-clip：padding(不包括边框区域)2、background-origin指定绘制背景图像时的起点 浏览器支持：火狐浏览器:-moz-background-origin safarigoogle chromeopera:-webkit-background-origin 属性：background-origin：border从边框的左上角 background-origin：padding从内部补白的左上角 background-origin：content从内容的左上角3、background-size 指定背景中图像的尺寸 浏览器支持：safarigoogle chromeopera:-webkit-background-size4、background-break指定内联元素的背景图像进行平铺时的循环方式 浏览器支持：火狐浏览器:-moz-background-inline-policy二、在一个元素中显示多个背景background-imagebackground-repeatbackground-positionbackground-clipbackground-originbackground-size三、border-radius属性火狐浏览器：-moz-border-radiussafari:-webkit-border-radiusopera:border-radiuschrome:border-radius/-webkit-border-radius四、在border-radius属性中指定两个半径border-radius:40px 20px;1)在chrome浏览器、safari浏览器中：会绘制出1个椭圆形边框，第一个数值是椭圆形的水平半径，第二个数值是椭圆形的垂直半径。2)在firefox浏览器、opera浏览器中：第一个数值是边框左上角与右下角的半径，第二个数值是边框右上角和左下角的半径。五、绘制四个角度不同半径的圆角边框border:solid 5px blue;border-radius-topleft:10px;border-radius-topright:20px;border-radius-bottomright:30px;border-radius-bottomleft:40px;-moz-border-radius-topleft:10px;-moz-border-radius-topright:20px;-moz-border-radius-bottomright:30px;-moz-border-radius-bottomleft:40px;-o-border-radius-topleft:10px;-o-border-radius-topright:20px;-o-border-radius-bottomright:30px;-o-border-radius-bottomleft:40px;-webkit-border-radius-top-left-radius:10px;-webkit-border-radius-top-right-radius:20px;-webkit-border-radius-bottom-right-radius:30px;-webkit-border-radius-bottom-left-radius:40px;六、修改边框种类border:dashed 5px blue;border-radius:20px;-moz-border-radius:20px;-o-border-radius:20px;-webkit-border-radius:20px;background-color:skyblue;padding:20px;width:180px;七、使用图像边框border-image火狐浏览器：-moz-border-imagesafari/chrome：-webkit-border-imageopera:border-image5、变形处理transformtransform一、支持的浏览器： safari 3.1以上；google chrome 8以上；firefox 4以上；Opera 10以上；二、书写规则：safari/chrome：-webkit-transformfirefox：-moz-transformOpera：-o-transform三、属性功能：缩放：scale(0.5,2)表示水平方向缩小50%，垂直方向扩大一倍-webkit-transform:scale(0.5,2);-moz-transform:scale(0.5,2);-o-transform:scale(0.5,2);倾斜：skew(30deg,30deg)表示在水平方向上倾斜30度，垂直方向上倾斜30度-webkit-transform: skew(30deg,30deg);-moz-transform: skew(30deg,30deg);-o-transform: skew(30deg,30deg);移动：translate(50px,50px)表示水平方向上移动50px,垂直方向上移动50px-webkit-transform: translate(50px,50px);-moz-transform: translate(50px,50px);-o-transform: translate(50px,50px);四、对一个元素使用多个变形的方法水平移动150px;垂直移动250px-旋转45度-水平放大1.5倍width:300px;background-color:yellow;text-align:center;-webkit-transform:translate(150px,250px) rotate(45deg) scale(1.5);-moz-transform:translate(150px,250px) rotate(45deg) scale(1.5);-o-transform:translate(150px,250px) rotate(45deg) scale(1.5);五、指定变形的基准点safari/chrome:-webkit-transform-originfirefox:-moz-transform-originOpera:-o-transform-origin-webkit-transform:skew(30deg,30deg);-moz-transform:skew(30deg,30deg);-o-transform:skew(30deg,30deg);-webkit-transform-origin:left bottom;-moz-transform-origin:left bottom;-o-transform-origin:left bottom;6、动画功能Transition功能一、支持的浏览器Firefox:-moz-transitionOpera:-o-transitionSafari/Chrome：-webkit-transition二、属性的使用方法transition:property duration timing-functionproperty:表示对哪个属性进行平滑过渡duration:表示在多长时间内完成属性值的平滑过渡timing-function:表示通过什么方法进行平滑过渡三、实例-webkit-transition:background-color 1s linear;-moz-transition:background-color 1s linear;-o-transition:background-color 1s linear;div:hover background-color:#C60;四、使用transition功能同时平滑过渡多个属性值-webkit-transition:background-color 1s linear,color 1s linear,width 1s linear;-moz-transition:background-color 1s linear,color 1s linear,width 1s linear;-o-transition:background-color 1s linear,color 1s linear,width 1s linear;div:hover background-color:#C60; color:#CF9; width:400px;Animations功能safari 4以上浏览器，chrome2以上浏览器都支持与transition功能相同，区别是transition只能通过指定属性的开始值与