- 1、本文档共14页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
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)
您可能关注的文档
- CorelDRAW 快捷键全攻略.doc
- CORELDRAW-X4绘制卡通衣服1.ppt
- CorelDRAW_X4_快捷键牢记学习大全.doc
- 2012-8-9-金科王府之女人季活动方案.ppt
- core快捷大全.doc
- COPD与支气管哮喘辨.ppt
- CP1-CA2装配技能竞赛试题库.doc
- 2012ji 一轮复习——细胞呼吸.ppt
- CP1210029LQ定稿IP001-通过单个按钮模拟键盘输入序列的实现.doc
- 2012629583-DISC性格分析(培训用).ppt
- 2023学年诸暨中学高三年级第二学期3月第二次模拟考试(政治)公开课教案教学设计课件资料.docx
- 运动的合成与分解(二)公开课教案教学设计课件资料.pptx
- 近五年浙江省各地图形的翻折(轴对称)原题公开课教案教学设计课件资料.doc
- 如何做教师-2019-11-13-中关村一小相关公开课教案教学设计课件资料.pptx
- 生活中的圆周运动 (水平面)正式版公开课教案教学设计课件资料.pptx
- 专题10 条件概率与全概率公式公开课教案教学设计课件资料.docx
- 金华市东阳市2019学年第二学期期末测试卷公开课教案教学设计课件资料.doc
- 5 琥珀(第二课时)【慕课堂版】公开课教案教学设计课件资料.pptx
- 项目五 打印米老鼠模型公开课教案教学设计课件资料.ppt
- (打印版)9月25日地理周练公开课教案教学设计课件资料.docx
文档评论(0)