css使用基础技巧课件.ppt

css使用基础技巧 css使用基础技巧 将一段文字置于容器的水平中点，只要设置text-align属性即可： 1. 文字的水平居中 text-align:center; bootstrap 文本居中 p class=text-center居中对齐文本/p css使用基础技巧 先为该容器设置一个明确宽度，然后将margin的水平值设为auto即可。 2. 容器的水平居中 div#container { width: 760px; margin: 0 auto; background: #66AFE9; 　　} css使用技巧 单行文字的垂直居中，只要将行高与容器高设为相等即可。 3. 文字的垂直居中 比如，容器中有一行数字。 然后CSS这样写： div#number {height: 35px; line-height: 35px;} div id=number1234567890/div 如果有n行文字，那么将行高设为容器高度的n分之一即可。 css使用基础技巧 如何使得较大的图片，能够自动适应小容器的宽度？CSS可以这样写： 4. 图片宽度的自适应 但是IE6不支持max-width，所以遇到IE6时，使用IE条件注释，将语句改写为： img {width: 100%} img {max-width: 100%} css使用基础技巧 要使按钮具有3D效果，只要将它的左上部边框设为浅色，右下部边框设为深色即可。 5. 3D按钮 div#button { 　　　　background: #888; 　　　　border: 1px solid; 　　　　border-color: #999 #777 #777 #999; 　　} css使用基础技巧 6. font属性的快捷写法 所以， body { 　　　　font-family: Arial, Helvetica, sans-serif; 　　　　font-size: 13px; 　　　　font-weight: normal; 　　　　font-variant: small-caps; 　　　　font-style: italic; 　　　　line-height: 150%; 　　} body { 　　　　font: font-style font-variant font-weight font-size line-height font-family; 　　} body { 　　　　font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif; 　　} font快捷写法的格式为： 可以被写成： css使用基础技巧 7. link状态的设置顺序 1)普通形式 a:link{} a:visited{} a:hover{} a:active{} a href=....../a 　　a:link 未点时链接色 　　a:visited 已点过的链接色 　　a:hover 光标放入链接上的色 　　a:active 点击时的样式 link的四种状态，需要按照下面的前后顺序进行设置： 2)单个class a.clsname{} a.clsname:link{} a.clsname:visited{} a.clsname:hover{} a.clsname:active{} a href=... class=clsname..../a 3)容器class .cls a:link{} .cls a:visited{} .cls a:hover{} .cls a:active{} div class=cls a href=.../a /div 4)ID的形式 #idname a:link{} #idname a:visited{} #idname a:hover{} #idname a:active{} div id=idname a href=......./a /div css使用基础技巧 8. IE6专用语句：方法一 IE7专用语句则要写成 　/* the following rules apply only to IE6 */ 　　* html{ 　　} 　　* html body{ 　　} 　　* html .foo{ 　　} /* the following rules apply only to IE7 */ 　　*+html .foo{ 　　} 由于IE6不把html视为文档的根元素，所以利用这一点，可以写出只有IE6才能读到的语句： css使用基础技巧 9. IE专用语