CSS层叠样式学习总结
- 格式：doc
- 大小：95.50 KB
- 文档页数：16
.
.. 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%平均值
圆角
border-radius: 20px;//水平，垂直border-radius: 20px，20px;//左上，右上，右下，左下border-radius:
20px，20px 20px 20px;
下拉阴影
//水平；垂直；模糊直径；颜色box-shadow: 10px 5px 15px #000;//内阴影box-shadow: 10px 5px 15px
#000 inset;//水平；垂直；模糊直径；延展距离;颜色box-shadow: 10px 5px 15px 15px #000;//多阴影box-shadow: 0 1px 1px #fff inset, 5px 5px 10px #000;
chromw:-webkit-;safari:-webkit-;ie>=9
文本阴影 .
.. //水平;垂直;颜色text-shandow: 1px 1px #fff;//水平;垂直;模糊直径;颜色text-shandow: 1px 1px .3em
#fff;
渐变
默认下渐变是垂直方向的；也可以传递一个位置参数来改变方向
linear-gradient(#ccc, #ddd, white);//设定一个倾斜度
linear-gradient(-45deg, #ccc, #fff);//水平渐变
linear-gradient(left, #ccc, #fff);//设置颜色停止值
linear-gradient(white, #ddd 20%, black);
选择器
//选中的第一个元素:first-child//选中的最后一个元素:last-child//选中的元素是其父元素的唯一子元素:only-child//选中当前URL的哈希中的目标元素:target
//选中复选框以被勾选的元素
:checked
nth-child选择器
nth-child(n);
nth-child(even);/nth-child(2n);
nth-child(odd);/nth-child(2n+1);
直接后代选择器
>
否定选择器
:not(.current) .
.. ie>=9
过渡
transition: 持续时间， 属性， [动画类型];//多个动画transition: 2s opacity, .5s height ease-in;
定时函数种类
linear
ease-in
ease-out
ease-in-out
例子
div {
background: pink;
width: 50px;
height: 50px;
-moz-transition: 2s width ease-in, 2s height ease-out; /* Firefox 4 */
-webkit-transition: 2s width ease-in, 2s height ease-out; /* Safari and Chrome */
-o-transition: 2s width ease-in, 2s height ease-out; /* Opera */
transition: 2s width ease-in, 2s height ease-out;}div:hover{
width: 100px;
height: 150px;}
div { .
.. position: absolute;
left: 10px;
-moz-transition: 2s left
-webkit-transition: 2s left;
-o-transition: 2s left ;
transition:2s left;
}
div:hover{
position: absolute;
left: 100px;
}
firefox:-moz-; chrome:-webkit-; safari: -webkit-; ie>=10; opear: -o-;
css3 总结03
box-flex: 设置或检索弹性盒模型对象的子元素如何分配其剩余空间。
..
#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所分到的应该是除内容外所剩余下来的宽度
box-flex-group: 设置或检索弹性盒模型对象的子元素的所属组。
box-ordinal-group: 设置或检索弹性盒模型对象的子元素的显示顺序。
box-direction: 设置或检索弹性盒模型对象的子元素的排列顺序是否反转。
box-lines: 设置或检索弹性盒模型对象的子元素是否可以换行显示。
.hbox{
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-align: stretch;
-webkit-box-pack: start;
display: -moz-box;
-moz-box-orient: horizontal; .
.. -moz-box-align: stretch;
-moz-box-pack: start;
}
.vbox{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-align: stretch;
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-align: stretch;
}
上面将display设置为-webkit-box或-moz-box-，然后设置子元素布局的方向。默认情况下，所有子元素都将自动扩充为父元素一样的大小。但通过设置box-flex属性却可以修改默认行为
#sidebar{
-webkit-box-flex: 0;
-moz-box-flex: 0;
box-flex: 0;
width: 200px; .
.. }#content{
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex：1；
}
如果设置box-flex为0，就指定了该元素不允许扩充；相反设置1或更大的数值该元素会自动扩充可利用的内容空间。上面对侧边栏设置flex为0；而主内容区设置flex为1
字体
@font-face{
font-family: 'Bitstream'
src: url('/Bitstream.ttf');}#font-example{
font-family: Bitstream;}
css实例--文字/字体
使用自定义字体：
在CSS2中font-family属性只能使用两个字体：
通用字体：Serif字体，Sans-serif字体，Monospace字体，Cursive字体,Fantasy字体;
特定字体：如Times,Courier等，要求计算机已经安装该字体；
使用@font-face：
1
2
3
4
5 @font-face{
font-family:example;
src:url('example.ttf') ,
url('example.eot');/*IE9+*/
}
