css3语法教程讲义

CSS3介绍CSS3介绍对话框如何实现？头像怎么翻转了？多背景图像？好看的字体如何实现？不同格式文件图标怎么添加？？什么是CSS，什么是CSS3？CSS1.0CSS2.0CSS3.0199619982001CSS即层叠样式表（CasadingStyleSheets），是一种替代并为网站添加样式的标记性语言。现在所使用的CSS基本是在1998年推出的CSS2的基础上发展而来的。CSS发展历史CSS3简介CSS3：CSS3表示下一代CSS，3只是版本号，css3在css2.1版本上加入了一些新特性，把很多以前需要使用图片和脚本来实现的效果只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影等。CSS3不仅能简化前端开发工作人员的设计过程，还能加快页面载入速度。CSS与HTML结合的方法内嵌样式表直接添加在html的标识符里•例如：pstyle=“color:black;font-size:14px;”CSS实例/p内部样式表定义在head/head间，仅作用于本文档•例如：styletype=text/cssbody{color:blue;font-size:20px;}/style外部样式表CSS以文件的形式存在，在head/head间使用link标记连接外部文件•例如：linkrel=“stylesheet”type=“text/css”href=“xxx.css”/link浏览器的前缀Konqueror-khtml-IE-ms-Mozilla（Gecko浏览器）-moz-Chrome和Safari-webkit-Opera-o-CSS3的一些新特性圆角效果图形化边界块阴影与文字阴影使用RGBA实现透明效果渐变效果使用@Font-Face实现定制字体多背景图文字或图像的变形、过渡、动画多栏布局媒体查询CSS3技术概述CSS3选择器CSS3文字与文字相关样式CSS3盒相关样式CSS3背景与边框相关样式CSS3中的变形、过渡、动画CSS3多栏布局CSS3媒体查询（MediaQueries）CSS3颜色相关样式CSS3渐变CSS3选择器在CSS3中添加的选择器一般同级组合器子串特性选择器；结构伪类；UI状态伪类；CSS3选择器一般同级组合器：波浪字符（~）它针对一个元素的有同一个父级节点的所有兄弟级别元素。第二个选择器不必紧跟在第一个选择器后面。•实例：h3～ul{List-style-type:binary;}articlesectionh3SectionTitle/h3p.../pp.../pulli.../lili.../lili.../li/ul/sectionp.../p/articleCSS3选择器特性和子串选择器[att^=“value”]匹配属性包含以特定的值开头的元素[att$=“value”]匹配属性包含以特定的值结尾的元素[att*=“value”]匹配属性包含含有特定的值的元素CSS3选择器结构性伪类选择器:root:not:empty:target:nth-child(n):nth-last-child(n):only-child:first-child:last-child:first-of-type:last-of-type:nth-of-type:only-of-type详解：:root•:root伪类选择页面的根元素。在HTML中，始终是指html元素。•例如：:root{background-color:yellow;}：not•:not想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素。•例如：body*:not(h1){background-color:yellow;}：empty•:empty当元素内容为空时被选中•例如：:empty{background-color:yellow;}tabletrtda/tdtdb/td/trtrtdc/tdtd/td/tr/tableCSS3选择器CSS3选择器详解：：target•:target对页面中某个target元素（该元素的id被当作页面中的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用：only-child•它会选择出父元素的唯一子元素。如果某个元素是它的父节点的唯一子节点，那么你可以使用:only-child选择它•例如：li:only-child{…}我们可以使用它来选择ul或ol中的单个列表项：last-child•last-child用于选择父元素的最后一个子节点•例如：li{border-bottom:1pxsolid#ccc;}•li:last-child{border-bottom:none;}CSS3选择器first-child用法同last-child相同，用于选择父元素的第一个子节点nth-child(n)和nth-last-child(n)根据其父元素的子元素的序号来选取元素，nth-child(n)从前往后计算，nth-last-child(n)是从后往前几种写法•简单数字序号写法：:nth-child(number)直接匹配第number个元素，参数number必须为大于0的整数。•倍数写法：:nth-child(an)匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n。CSS3选择器•奇偶匹配写法：:nth-child(odd)与:nth-child(even)分别匹配序号为奇数与偶数的元素，奇数(odd)与(2n+1)结果一样；偶数(even)(2n)结果一样•例如：li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/li:last-child{border-bottom:none;}CSS3选择器“类型”伪类的工作方式与“子元素”选择器相同，其关键区别是“类型”伪类只选择与应用了选择器的元素相同类型的元素：first-of-type选取某个父元素的第一个同类型兄弟元素：last-of-type选取某个父元素的最后一个同类型兄弟元素：nth-of-type根据其父元素的子元素的序号来选取元素，但只有符合给定类型的元素才能参与排序：nth-last-of-type与：nth-of-type相似，但计算的序号的方式是从后往前（倒数）：only-of-type选取某个父元素的唯一一个某类型的子元素CSS3选择器UI元素状态伪类选择器共同点：指定的样式只有当元素处于某种状态下时才起作用：hover鼠标指针移动到某个文本框控件上的样式；:active元素被激活(鼠标在元素上按下还没有松开)时使用的样式；:focus元素获得光标焦点时使用的样式；:enabled指定当元素处于可用状态时的样式；:disabled指定当元素处于不可用状态时的样式；:read-only指定当元素处于只读状态时的样式；CSS3选择器UI元素状态伪类选择器:read-write指定当元素处于非只读状态时的样式；:checked指定当表单中的radio单选框或checkbox复选框处于选取状态时的样子:default指定当页面打开时默认处于选区状态的radio或checkbox控件的样式:indeterminate指定当页面打开时，如果一组单选框中任何一个单选框都没有被设定为选取状态时整组单选框的样式，如果用户选取了一个单选框，则该样式被取消::selection指定当元素处于选中状态时的样式CSS3选择器浏览器支持情况CSS3技术概述CSS3选择器CSS3文字与文字相关样式CSS3盒相关样式CSS3背景与边框相关样式CSS3中的变形、过渡、动画CSS3多栏布局CSS3媒体查询（MediaQueries）CSS3颜色相关样式CSS3渐变CSS3文字相关样式文字阴影与盒阴影使用服务器端字体@font-face控制文本溢出text-overflow长单词与URL自动换行—wordwrapCSS3文字相关样式文字阴影与盒阴影语法：box-shadow:ApxBpxCpx#xxx;text-shadow:ApxBpxCpx#xxx;•Apx=x轴偏移量•Bpx=y轴偏移量•Cpx=投影长度•#XXX=像通常一样的颜色实例：box-shadow和text-shadowCSS3文字相关样式@font-face使用服务器端字体实现个性化字体font-family：设置文本的字体名称。font-style：设置文本样式。font-weight：设置文本的粗细。Font-size：设置文本字体大小。src：设置自定义字体的相对路径或者绝对路径。实例：@font-faceCSS3文字相关样式text-overflow属性规定当文本溢出包含元素时发生的事情语法：text-overflow:clip|ellipsis|string;•clip：修建文本。•ellipsis：显示省略符号来代表被修剪的文本。•string：使用给定的字符串来代表被修剪的文本。实例：text-overflowCSS3文字相关样式Word-Wrap属性允许长单词或URL地址换行到下一行语法：word-wrap:normal|break-word;•normal值：(默认的)只在允许在半角空格或连字符的地方换行。•break-word：文字可以在任何需要的地方截断以匹配分配的空间并防止溢出。实例：word-wrapCSS3文字相关样式浏览器支持CSS3技术概述CSS3选择器CSS3文字与文字相关样式CSS3盒相关样式CSS3背景与边框相关样式CSS3中的变形、过渡、动画CSS3布局相关样式CSS3媒体查询（MediaQueries）CSS3颜色相关样式CSS3渐变CSS3盒相关样式box-shadow（文字阴影已提过）box-sizingresizeoutline-offsetCSS3盒相关样式box-sizing属性允许您以确切的方式定义适应某个区域的具体内容语法：box-sizing：content-box|border-box|inherit•content-box：指元素的宽度与高度不包括内部补白区域，以及边框的宽度与高度。•border-box：指元素的宽度与高度包括内部补白区域，以及边框的宽度与高度。•inherit：规定应从父元素继承box-sizing属性的值实例：box-sizingCSS3盒相关样式resize属性规定是否可由用户调整元素的尺寸注释：如果希望此属性生效，需要设置元素的overflow属性，值可以是auto、hidden或scroll。语法：resize：none|both|horizontal|vertical；•none：用户无法调整元素的尺寸。•both：用户可调整元素的高度和宽度。•horizontal：用户可调整元素的宽度。•vertical：用户可调整元素的高度。实例：resizeCSS3盒相关样式outline-offset属性对轮廓进行偏移，并在边框边缘进行绘制。轮廓在两方面与边框不同：轮廓不占用空间；轮廓可能是非矩形。语法：outline-offset：length|inherit；•length：轮廓与边框边缘的距离。•inherit：应从父元素继承outline-offset属性的值。实例：