首页 / CSS3 / 前端开发CSS3技术经验分享
前端开发CSS3技术经验分享
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了前端开发CSS3技术经验分享,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3682字,纯文字阅读大概需要6分钟。
内容图文
最近对前端的一些知识进行了归纳总结,方便自己以后查看,同时也分享给大家,希望大家少走弯路。这篇文章主要总结了CSS3中的相关知识,有需要的朋友可以参考一下,希望对你有用。1、设置字体(兼容所有浏览器)
@font-face { font-family: 'iconfont'; src: url("fonts/iconfont/iconfont.eot"); src: url("fonts/iconfont/iconfont.eot?#iefix") format("embedded-opentype"), url("fonts/iconfont/iconfont.ttf") format("truetype"), url("fonts/iconfont/iconfont.woff") format("woff"), url("fonts/iconfont/iconfont.svg#icomoon") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family : name ; src : url( url ) ; sRules }
说明:
name : 字体名称
url : 使用绝对或相对地址指定OpenType字体
sRules : 样式表定义
设置嵌入HTML文档的字体。
@font-face { font-family: dreamy; font-weight: bold; src: url(http://www.example.com/font.eot); }
2、div[class^="test"]
设置只有div内 class 属性值以 "test" 开头的所有 div 元素的背景色:
div[class^="test"] { background:#ffff00; }
3、 [class*="abc"]
class的值中含有"abc"的元素。
div[class*="abc"]
代表只有div内class=abc的样式
4、指定最后一个p标签背景样式
p:last-child{ background:#ff0000;}
5、显示设备分辨率最小768并且最大979时候显示abc(CSS3)
@media (min-width: 768px) and (max-width: 979px) { .abc{} }
ie6-ie9支持
<style> @media screen and (min-width: 1201px) { .y-row { width: 1200px; border:1px solid #333; height:300px; min-width: 1200px; } } @media screen and (max-width: 1200px) { .y-row { width: 900px; border:1px solid #333; height:300px; min-width: 900px; } } </style> <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
6、div > span (IE6不支持)
div > span{字体12px}
div标签内的儿子span样式为字体12px,div内孙子span不起作用,具有优先
7、字体阴影
.blue { background:#01dbff; text-shadow:2px 2px 2px #09a5ef; }
阴影字体靠左距离 靠下距离 阴影距离范围 阴影颜色
字体背景+字体阴影
8、盒子阴影
-moz-border-radius:0px 5px 5px 0px; -webkit-border-radius:0px 5px 5px 0px; border-radius:0px 5px 5px 0px; -moz-box-shadow:0px 0px 1px #fff inset; -webkit-box-shadow:0px 0px 1px #fff inset; box-shadow:0px 0px 1px #fff inset;
-moz代表firefox浏览器私有属性
-ms代表IE浏览器私有属性
-webkit代表chrome、safari私有属性
-o代表opera苹果浏览器
设置
border-radius:0px 5px 5px 0px; 代表边框右上和右下 圆角为5px
box-shadow:0px 0px 1px #fff inset;代表边框间距靠左0 靠上0 和1px阴影范围 阴影颜色为白色
有inset 代表框内阴影 不带inset 代表框外阴影
注意:box-shadow:0px 0px 1px #fff
第1个值为0时,代表左右边框阴影 为1px范围
第1个值为正整数 代表 左边框阴影
第1个值为负整数 代表 右边框阴影
同理
第2个值为0 代表上下边框阴影
第2个值为正整数 代表1px阴影距离上边框多少
第1个值为负整数 代表下边框阴影设置
border-radius圆角
9、:first-letter
p:first-letter{font-size:20px}
代表p标签内第一个字大小为20px
10、div:first-line { color:red;font-size:16px; }
代表DIV中第一行文字为红色字体为16px
11、p a:first-child { color: green }
代表p盒子里第一个a超链接字体颜色为绿色
12、p:before { content:"我在这" }
代表p标签对象前加入一段内容:“我在这”
13、table:after { content: END OF TABLE }
代表在table对象后显示内容“END OF TABLE ”
14、单冒号与双冒号
伪元素由双冒号和伪元素名称组成。双冒号是在当前规范中引入的,用于区分伪类和伪元素。但是伪类兼容现存样式,浏览器需要同时支持旧的伪类,比如:first-line、:first-letter、:before、:after等。
那么现在就可以完整的回答标题中的问题了,对于CSS2之前已有的伪元素,比如:before,单冒号和双冒号的写法::before作用是一样的。
所以,如果你的网站只需要兼容webkit、firefox、opera等浏览器,建议对于伪元素采用双冒号的写法,如果不得不兼容IE浏览器,还是用CSS2的单冒号写法比较安全。
15、.uploader input[type=file]{}
代表class为uploader 盒子内input标签属性为type=file设置样式
以上就是前端开发CSS3技术经验分享的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的前端开发CSS3技术经验分享全部内容,希望文章能够帮你解决前端开发CSS3技术经验分享所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。