CSS层叠样式学习选编.doc

css3 总结01 前缀 chrome: -webkit- safari: -webkit- firefox: -moz- ie: -ms- opera: -o- 书写的时候应该先用有前缀的样式，再用无前缀的样式 rgb(red, green, blue); rgba(red, green, blue, opacity[0-1]); hsl(色度， 饱和度， 亮度)； 色度为色轮的度数，0/360d代表红色，120代表绿色，240代表蓝色；饱和度百分比值，100%表示完全显示该颜色；亮度百分比值，0%代表黑色，100%代表白色，50%平均值 chromw:-webkit-;safari:-webkit-;ie=9 文本阴影 //水平;垂直;颜色text-shandow: 1px 1px #fff;//水平;垂直;模糊直径;颜色text-shandow: 1px 1px .3em #fff; 渐变 默认下渐变是垂直方向的；也可以传递一个位置参数来改变方向 nth-child选择器 直接后代选择器 否定选择器 :not(.current) ie=9 定时函数种类 linear ease-in ease-out ease-in-out 例子 firefox:-moz-;?chrome:-webkit-; safari: -webkit-; ie=10; opear: -o-; css3 总结03 box-flex: 设置或检索弹性盒模型对象的子元素如何分配其剩余空间。 ul id=box lia/li lib/li lic/li/ul #box{display:box;width:240px;height:100px;margin:0;padding:10px;list-style:none;}#box li:nth-child(1){box-flex:1;}#box li:nth-child(2){box-flex:1;}#box li:nth-child(3){box-flex:2;} 注意box-flex只是动态分配父元素的剩余空间，而不是整个父元素的空间。如上例，父元素#box的宽度为240px，如果你认为a,b,c的宽度分别为60, 60, 120那么就错了，因为box-flex只是分配父元素的剩余空间而已，所以a,b,c所分到的应该是除内容外所剩余下来的宽度 上面将display设置为-webkit-box或-moz-box-，然后设置子元素布局的方向。默认情况下，所有子元素都将自动扩充为父元素一样的大小。但通过设置box-flex属性却可以修改默认行为 如果设置box-flex为0，就指定了该元素不允许扩充；相反设置1或更大的数值该元素会自动扩充可利用的内容空间。上面对侧边栏设置flex为0；而主内容区设置flex为1 使用自定义字体： 在CSS2中font-family属性只能使用两个字体： 通用字体：Serif字体，Sans-serif字体，Monospace字体，Cursive字体,Fantasy字体; 特定字体：如Times,Courier等，要求计算机已经安装该字体； 使用@font-face： 1 2 3 4 5 6 7 @font-face{ ???font-family:example; ???src:url(example.ttf) , url(example.eot);/*IE9+*/ } div{ ??font-family:example; } 文本缩进和首字符下沉： 缩进：text-indent; 首字符设置： :first-letter; 文本被选中： 1 2 3 ::selection{} //老版本的firefox ::-moz-selection{} 调整文字，字符间距： demo: word-spacing：空格距离； letter-spacing：子间距离； line-heigh：文本行间距； white-space：空格，换行符的控制； 强制换行：word-wrap: break-word;?word-break: normal; ?文字阴影/框阴影： text-shadow： h-shadow(必须) ?v-shadow(必须) ?blur ?color; 文字毛玻璃效果： box-shadow:?h-shadow(必须)? v-shadow(必须)? blur spread color inset; 文本溢出处理： demo: overflow：主要在对高度的处理，如果宽度不够，默认会换行； text-overflow：主要对宽度的处理，在设置white-space: nowrap; 阻止换行之后可以设置默认（clip）或省略（ellipsis）; 高级文字