标签：
css(Cascading style sheets):层叠样式表
1.图片替换技术
以下代码表示：点击百度logo的图片就会跳转到百度首页。
<style > .baidu｛
/*宽高定义图片的宽高*/ width:154px height:30px border: 1px solid black background: url(../...百度logo.png) no repeat overflow:hidden /*超出隐藏*/ } .baidu a{ line-height:200px display:block /*分区块*/ } </style> <body> <h1 class="baidu"> <a href="http://www.baidu.com">百度</a> </h1> </body>
2.sprite图（雪碧图）
<style> /*以下图片大小要使用ps来量出其图片的像素*/ .sprite{ /*定义图片大小*/ width:100px height:80px background: url(../..图片.jpg); background-position:-10px -20px; /*使 图片能移到定义图片大小重合*/ } .sprite:hover{ background-position:-60px -30px;/*当鼠标移入时候显示另一张图片*/ } </style> <body> <div class="sprite"></div> </body>
3.背景
以下代码表示一张开始为红色背景的图片用20s的时间变成黑色背景的图，并且在浏览器上一直重复。
<style> .box{ width:300px height:300px background:red no repeat center; animation: bian 20s infinite; } @key frames bian { from{ background:red } to{ background:black } }
｝ </style> <body> <div class="box"></div> </body>
4.文本
<style> .text{ color:green; font-size: 40px; font-family: Fangsong; font-weight:400; font-style: litalic; text-indent: 30px; /*文字缩进*/ letter-spacing: 10px; /*字间距*/ word-spacing: 10px; /*词间距*/ line-height: 20px; text-decoration: underline; } .text1{ text-transform:capitalize /*文本英文首字母大写*/ } </style> <body> <p class="text">学习 web 前端</p> <p class="text1">learn web</p> </body>
标签：
原文地址：http://www.cnblogs.com/jbit56/p/5770591.html
