CSS样式源码（案列）---------------------------持续更新，欢迎大家补充分享
2015-03-05 20:00
609 查看
1、宽度居中实例(box块居中）
body{text-align:center}
.box{ margin:0 auto; width:500px; height:100px; border:1px solid #00F;text-align:left;}
2、使用text-indent来隐藏文本
text-indent:-9999px;
margin:0 auto;
width:400px;
height:100px;
background:transparent url("images/logo.jpg") no-repeat scroll;
}
3、根据文件格式设置链接图标
这个技巧主要是针对用户体验，让用户能很清楚点击的链接是有关于什么方面的内容，比如说，点击某个链接会到跳到站外。换句话说使用属性选择器器，给不同的链接设置不同的图标，让用户很轻松的明白相应的链接是有关于什么方面的内容：
a[href^="http:"] {
display:inline-block;
padding-right:14px;
background:transparent url(/Images/ExternalLink.gif) center right no-repeat;
}
a[href^="mailto:"] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/MailTo.gif) center left no-repeat;
}
a[href$='.pdf'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/PDFIcon.gif) center left no-repeat;
}
a[href$='.swf'], a[href$='.fla'], a[href$='.swd'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/FlashIcon.gif) center left no-repeat;
}
a[href$='.xls'], a[href$='.csv'], a[href$='.xlt'], a[href$='.xlw'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/ExcelIcon.gif) center left no-repeat;
}
a[href$='.ppt'], a[href$='.pps'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/PowerPointIcon.gif) center left no-repeat;
}
a[href$='.doc'], a[href$='.rtf'], a[href$='.txt'], a[href$='.wps'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/WordDocIcon.gif) center left no-repeat;
}
a[href$='.zip'], a[href$='.gzip'], a[href$='.rar'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/ZIPIcon.gif) center left no-repeat;
}
4、在IE浏览器中删除textarea的滚动条
IE浏览器中textarea默认就有滚动条出现，为了达到所有浏览器默认下一致的效果，其实我们可以使用代码让他达到一致的效果：
textarea{
overflow:auto;
}
5、段落首字下沉
有杂志排版中我们常看到第一个段落的首字下沉的效果，其实这种效果实现是相当的容易：
p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:60px;
font-family:Georgia;
}
6、所有浏览器下的CSS透明度
元素透明度时常是个恼人的问题，下面这种方式可以实现所有浏览器下的透明度设置：
.transparent {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
但是使用opacity会影响其后代元素的透明度，我们可以考虑使用：
.transparent {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
7、图片预加载有时是非常有用的，这样当某个元素需要时，他就已经被加载了，此时就不会有任何延误或闪烁的现像：
#preloader {
/* Images you want to preload*/
background-image: url(image1.jpg);
background-image: url(image2.jpg);
background-image: url(image3.jpg);
width: 0px;
height: 0px;
display: inline;
}
8、基本的CSS Sprite按钮
CSS Sprite我想大家一定是非常熟悉，我们时常在按钮或链接中使用CSS Sprites,用来提搞用户的体验。比如说，我们有一个按钮，当用户鼠标在按钮上时需要显示另一种背景，那么我们就可以使用这样的技术：
a {
display: block;
background: url(sprite.png) no-repeat;
height: 30px;
width: 250px;
}
a:hover {
background-position: 0 -30px;
}
9、固定页脚
固定页脚在屏幕的底部，在现代浏览器来说是一件非常容易的事情，但是在IE6下还是需要特殊的处理：
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop
: document.body.scrollTop))+'px');
}
10、翻转图片
翻转图像随着CSS3的transform越来越实用，不需要重新加载图片，就可以实现一个图片的旋转。常见的是一个三角型效果，我们想让他在不同状态展示不同的风格：
img.flip {
-moz-transform: scaleX(-1); //webkit引擎支持-webkit-transform私有属性，mozilla Gecko引擎支持-moz-transform私有属性，Presto引擎支持-o-transform私有属性，IE浏览器暂时不支持transform属性，也没有定义transform的私有属性，不过可以通过IE滤镜实现。
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
11、圆角
随着CSS3的属性的出现，我们制作圆角效果就不需要在像以前那样的辛苦了，可以使用CSS3的border-radius来实现，只是在IE-6-8下无法实现，我们来看现代浏览器下如何制作圆角：
.round{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px; /* for old Konqueror browsers */
border-radius: 10px; /* future proofing */
}
12、clearfix
clearfix主要是使用他来清除浮动，只需要添加这个类名无需加上任何HTML标记，就可以达到清除浮动的效果：
.clearfix:before,
.clearfix:after {
content: " ";
display:table;
}
.clearfix:after {
clear:both;
overflow:hidden;
}
.clearfix {
zoom: 1;
}
13、圆角
随着CSS3的属性的出现，我们制作圆角效果就不需要在像以前那样的辛苦了，可以使用CSS3的border-radius来实现，只是在IE-6-8下无法实现，我们来看现代浏览器下如何制作圆角：
.round{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px; /* for old Konqueror browsers */
border-radius: 10px; /* future proofing */
}
14、!important
!important有时可以帮我们做很多事，他可以覆盖任何相同的样式，换句话说他可以改为样式的权重：
p{
font-size:20px !important;
}
15、@font-face
@font-face也是CSS3的属性之一，他能在所有浏览器下运行。最大的作用就是让用户没有字体的浏览下也能支持网页字体，具体使用：
@font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('☺'),
url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}
h2 {
font-family:'Graublau Web';
}
15、::selection
有很多朋友肯定不知道这个属性的作用。它可以改变选择的文本的背景色和前景色，突出你的浏览器中的选择文本效果：
//本属性的意思是，对于选中的部分，改变样式。（较少使用）
::selection {
color: #000000;
background-color: #FF0000;
}
::-moz-selection {
color: #000000;
background: #FF0000;
}
16、处理溢出的问题
<!DOCTYPE html>
<html>
<head>
<style>
div.test
{
white-space:nowrap;
width:12em;
overflow:hidden;
border:1px solid #000000;
}
</style>
</head>
<body>
<p>下面两个 div 包含无法在框中容纳的长文本。正如您所见，文本被修剪了。</p>
<p>这个 div 使用 "text-overflow:ellipsis" ：</p>
<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
<p>这个 div 使用 "text-overflow:clip"：</p>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>
</body>
</html>
17、处理hr的默认阴影更改问题；
html中水平衡线hr默认高度是两个像素，其中border-top高1px，且颜色为黑，border-bottom高1px颜色为灰，这时看着是阴影效果
去掉阴影效果很简单，只需在css里把border-bottom或border-top属性设置一个为none即可
.hrtest{
border-top:1px solid red;
border-bottom:none;
}
18、文字特效立体与凹体效果
#test{
text-shadow:-1px -1px white,
1px 1px #333;
}
#test{
test-shadow:1px 1px white,
-1px -1px #444;
}
19、防止表格的th标题行被顶开
#test{
word-break：keep-all；
word-wrap：normal；
white-space：nowrap;
}
另外，为th添加属性 <th nowrap="nowrap">姓名</th>
20、实现文本换行
#test{
word-wrap：break-word；
overflow：hidden；
}
21、实现遮罩的灯箱效果
demo代码
div{
position:absolute;
}
.bg{
width:100%;
height:100%;
background:#000;
opacity:0.7;
filter:alpha(opacity:70);
}
.lightbox{
left:50px;
top:50px;
}
</style>
<body>
<div class="web"><img src="images/web_1.jpg width="1259" height="630" /></div>
<div class="bg"></div>
<div class="lightbox"><img src="images/web_1.jpg" width="80%"></div>
</body>
body{text-align:center}
.box{ margin:0 auto; width:500px; height:100px; border:1px solid #00F;text-align:left;}
2、使用text-indent来隐藏文本
这个常用在图片替换文本中，最常见的就是使用使用图片来替换Logo，这个是非常有用的，使用“text-indent”我们可以达到图片替换文本的效果，而且方便搜索引擎的优化，还能支持阅读器阅读网页内容：
h1 {text-indent:-9999px;
margin:0 auto;
width:400px;
height:100px;
background:transparent url("images/logo.jpg") no-repeat scroll;
}
3、根据文件格式设置链接图标
这个技巧主要是针对用户体验，让用户能很清楚点击的链接是有关于什么方面的内容，比如说，点击某个链接会到跳到站外。换句话说使用属性选择器器，给不同的链接设置不同的图标，让用户很轻松的明白相应的链接是有关于什么方面的内容：
a[href^="http:"] {
display:inline-block;
padding-right:14px;
background:transparent url(/Images/ExternalLink.gif) center right no-repeat;
}
a[href^="mailto:"] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/MailTo.gif) center left no-repeat;
}
a[href$='.pdf'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/PDFIcon.gif) center left no-repeat;
}
a[href$='.swf'], a[href$='.fla'], a[href$='.swd'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/FlashIcon.gif) center left no-repeat;
}
a[href$='.xls'], a[href$='.csv'], a[href$='.xlt'], a[href$='.xlw'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/ExcelIcon.gif) center left no-repeat;
}
a[href$='.ppt'], a[href$='.pps'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/PowerPointIcon.gif) center left no-repeat;
}
a[href$='.doc'], a[href$='.rtf'], a[href$='.txt'], a[href$='.wps'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/WordDocIcon.gif) center left no-repeat;
}
a[href$='.zip'], a[href$='.gzip'], a[href$='.rar'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/ZIPIcon.gif) center left no-repeat;
}
4、在IE浏览器中删除textarea的滚动条
IE浏览器中textarea默认就有滚动条出现，为了达到所有浏览器默认下一致的效果，其实我们可以使用代码让他达到一致的效果：
textarea{
overflow:auto;
}
5、段落首字下沉
有杂志排版中我们常看到第一个段落的首字下沉的效果，其实这种效果实现是相当的容易：
p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:60px;
font-family:Georgia;
}
6、所有浏览器下的CSS透明度
.transparent {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
但是使用opacity会影响其后代元素的透明度，我们可以考虑使用：
.transparent {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
7、图片预加载有时是非常有用的，这样当某个元素需要时，他就已经被加载了，此时就不会有任何延误或闪烁的现像：
#preloader {
/* Images you want to preload*/
background-image: url(image1.jpg);
background-image: url(image2.jpg);
background-image: url(image3.jpg);
width: 0px;
height: 0px;
display: inline;
}
8、基本的CSS Sprite按钮
CSS Sprite我想大家一定是非常熟悉，我们时常在按钮或链接中使用CSS Sprites,用来提搞用户的体验。比如说，我们有一个按钮，当用户鼠标在按钮上时需要显示另一种背景，那么我们就可以使用这样的技术：
a {
display: block;
background: url(sprite.png) no-repeat;
height: 30px;
width: 250px;
}
a:hover {
background-position: 0 -30px;
}
9、固定页脚
固定页脚在屏幕的底部，在现代浏览器来说是一件非常容易的事情，但是在IE6下还是需要特殊的处理：
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop
: document.body.scrollTop))+'px');
}
10、翻转图片
翻转图像随着CSS3的transform越来越实用，不需要重新加载图片，就可以实现一个图片的旋转。常见的是一个三角型效果，我们想让他在不同状态展示不同的风格：
img.flip {
-moz-transform: scaleX(-1); //webkit引擎支持-webkit-transform私有属性，mozilla Gecko引擎支持-moz-transform私有属性，Presto引擎支持-o-transform私有属性，IE浏览器暂时不支持transform属性，也没有定义transform的私有属性，不过可以通过IE滤镜实现。
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
11、圆角
随着CSS3的属性的出现，我们制作圆角效果就不需要在像以前那样的辛苦了，可以使用CSS3的border-radius来实现，只是在IE-6-8下无法实现，我们来看现代浏览器下如何制作圆角：
.round{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px; /* for old Konqueror browsers */
border-radius: 10px; /* future proofing */
}
12、clearfix
clearfix主要是使用他来清除浮动，只需要添加这个类名无需加上任何HTML标记，就可以达到清除浮动的效果：
.clearfix:before,
.clearfix:after {
content: " ";
display:table;
}
.clearfix:after {
clear:both;
overflow:hidden;
}
.clearfix {
zoom: 1;
}
13、圆角
随着CSS3的属性的出现，我们制作圆角效果就不需要在像以前那样的辛苦了，可以使用CSS3的border-radius来实现，只是在IE-6-8下无法实现，我们来看现代浏览器下如何制作圆角：
.round{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px; /* for old Konqueror browsers */
border-radius: 10px; /* future proofing */
}
14、!important
!important有时可以帮我们做很多事，他可以覆盖任何相同的样式，换句话说他可以改为样式的权重：
p{
font-size:20px !important;
}
15、@font-face
@font-face也是CSS3的属性之一，他能在所有浏览器下运行。最大的作用就是让用户没有字体的浏览下也能支持网页字体，具体使用：
@font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('☺'),
url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}
h2 {
font-family:'Graublau Web';
}
15、::selection
有很多朋友肯定不知道这个属性的作用。它可以改变选择的文本的背景色和前景色，突出你的浏览器中的选择文本效果：
//本属性的意思是，对于选中的部分，改变样式。（较少使用）
::selection {
color: #000000;
background-color: #FF0000;
}
::-moz-selection {
color: #000000;
background: #FF0000;
}
16、处理溢出的问题
<!DOCTYPE html>
<html>
<head>
<style>
div.test
{
white-space:nowrap;
width:12em;
overflow:hidden;
border:1px solid #000000;
}
</style>
</head>
<body>
<p>下面两个 div 包含无法在框中容纳的长文本。正如您所见，文本被修剪了。</p>
<p>这个 div 使用 "text-overflow:ellipsis" ：</p>
<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
<p>这个 div 使用 "text-overflow:clip"：</p>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>
</body>
</html>
17、处理hr的默认阴影更改问题；
html中水平衡线hr默认高度是两个像素，其中border-top高1px，且颜色为黑，border-bottom高1px颜色为灰，这时看着是阴影效果
去掉阴影效果很简单，只需在css里把border-bottom或border-top属性设置一个为none即可
.hrtest{
border-top:1px solid red;
border-bottom:none;
}
18、文字特效立体与凹体效果
#test{
text-shadow:-1px -1px white,
1px 1px #333;
}
#test{
test-shadow:1px 1px white,
-1px -1px #444;
}
19、防止表格的th标题行被顶开
#test{
word-break：keep-all；
word-wrap：normal；
white-space：nowrap;
}
另外，为th添加属性 <th nowrap="nowrap">姓名</th>
20、实现文本换行
#test{
word-wrap：break-word；
overflow：hidden；
}
21、实现遮罩的灯箱效果
demo代码
div{
position:absolute;
}
.bg{
width:100%;
height:100%;
background:#000;
opacity:0.7;
filter:alpha(opacity:70);
}
.lightbox{
left:50px;
top:50px;
}
</style>
<body>
<div class="web"><img src="images/web_1.jpg width="1259" height="630" /></div>
<div class="bg"></div>
<div class="lightbox"><img src="images/web_1.jpg" width="80%"></div>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS知识点汇总----------------------------持续更新，-欢迎大家补充分享
- 整理了一下Asp.net源码常见问题（完善中...），欢迎大家补充修正(最后更新于06-01)！
- .NET面试题大全_持续更新，欢迎大家提意见、拍砖 (持续维护中...)
- shell特殊用途小命令集合——持续更新。。。求跟帖，大家一起分享
- 工作中常用的JS函数整理分享（欢迎大家补充）
- 把遇到过的对.Net线程的一些问题和误解集中起来和大家分享,也希望大家能一起补充,热烈欢迎讨论（引）
- sql语法，有机会更新，欢迎大家补充
- java世界的相等（未完待续，持续更新，欢迎补充指正）
- 本博客我没有持续更新了，欢迎大家到我的独立博客去：http://denganliang.com
- 精品android源码汇总。。欢迎关注，持续更新。
- [源码、文档、分享] iOS/iPhone学习系列、代码教程----~~~持续更新中~~~
- MySql 命令，语法（持续更新中…..欢迎大家在下面留言）
- 帮朋友招开发工程师，欢迎大家关注，持续更新！
- [源码、文档、分享] iOS/iPhone学习系列、代码教程----~~~持续更新中~~~
- Windows CE驱动开发常用宏定义(随时更新,欢迎大家来补充!)
- 前端笔试，前端面试——各种小姿势（持续更新，欢迎补充！）
- [置顶] 安卓开发常用工具类整理，楼主亲测可用贴（持续更新），如有补充欢迎跟帖
- UNICODE下字符转换（持续更新，欢迎补充）