为开发人员分享 30 个有用的 CSS 片段

CSS 是我们使用的功能强大且最常用的网络语言。它兼容新老浏览器，兼容跨度确实够广，从微软的IE到火狐再到谷歌Chrome。在设计时，我们总是希望创建一个更有创意、更时尚的网站。无论我们创建什么样的网站，都必须掌握一些CSS代码。可以说，这就是核心。掌握这样的CSS代码是前端布局的基础。这不再是问题，也不是圆角、工具提示、浏览器黑客等问题。 CSS 是我们使用的功能强大且最常用的网络语言。它兼容新老浏览器，兼容跨度确实够广，从微软的IE到火狐再到谷歌Chrome。在设计时，我们总是希望创建一个更有创意、更时尚的网站。无论我们创建什么样的网站，都必须掌握一些CSS代码。可以说，这就是核心。掌握这样的CSS代码是前端布局的基础。这不再是问题，也不是圆角、工具提示、浏览器黑客等问题。 在今天的文章中，我分享了我收集的 30 个 CSS 代码片段。无论你是网络经验丰富的设计师还是新手，他们都值得学习； CSS 重置 作者：Eric Meyerhtml、body、div、span、applet、object、iframe、h1、h2、h3、h4、h5、h6、p、块引用、pre、a、缩写、首字母缩略词、地址、大、引用、代码、del、dfn、 em、字体、img、ins、kbd、q、s、samp、小、删除线、强、sub、sup、tt、var、b、u、i、center、dl、dt、dd、ol、ul、li、字段集、表单、标签、图例、表格、标题、tbody、tfoot、thead、tr、th、td {      边距：0；填充：0；边框：0；大纲：0；字体大小：100%；垂直对齐：基线；背景：透明； }    正文 {      行高：1； }    ol, ul {      列表样式：无； }    块引用，q {      引号：无； }    块引用：之前， 块引用：之后，  q：之前， q：之后 {      内容：'';内容：无； }      ：焦点 {      大纲：0； }      ins {      文本修饰：无； }    del {      文本修饰：换行； }      表 {      边框折叠：折叠；边框间距：0； } 根据文件格式显示不同的链接样式a[href^="http://"]{      右内边距：20px；背景：url(external.gif) 无重复中心右侧； }      a[href^="mailto:"]{      padding-right: 20px;背景：url(email.png) 无重复中心右侧； }      a[href$=".pdf"]{      右内边距：20px；背景：url(pdf.png) 无重复中心右侧； } 在IE浏览器中删除textarea的滚动条 文本区域{      溢出：自动； } 浏览器特定的 hacks * html .yourclass { }      *+html .yourclass{ }      html>body .yourclass { }      html>body .yourclass { }      html:first-child .yourclass { }      html[xmlns*=""] body:last-child . yourclass { }      body:nth-of-type(1) .yourclass { }      body:first-of-type .yourclass {  }      @media screen 和 (-webkit-min-device-pixel-ratio:0) {   .yourclass  { }  } 清除修复.clearfix:after { 可见性: 隐藏;显示：块；字体大小：0；内容： ” ”;明确：两者；高度：0； } .clearfix { 显示：内联块； } * html .clearfix { 高度：1%; } .clearfix { 显示：块； } 固定宽度并居中 .wrapper { 宽度：960px;保证金：0 自动； } 圆角——边框半径 .round{ -moz-border-radius: 10px; -webkit边框半径：10px；边框半径：10px； -khtml-边框半径：10px； } 伪元素为文本的第一个字母添加特殊样式 p:第一个字母{ 显示: 块;边距：5px 0 0 5px；向左飘浮;颜色：#000；字体大小：60px；字体系列：格鲁吉亚； } 使用@fontface @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?') 格式('eot'), url('myfont-webfont.woff') 格式('woff'), url('myfont-webfont.ttf') 格式(' truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); } 跨浏览器内联块li {          宽度：200px；最小高度：250px；边框：1px 实心#000；显示：-moz-inline-stack；显示：内联块；垂直对齐：顶部；边距：5 像素；缩放：1； *显示：内嵌； _高度：250 像素； } 固定页脚 #footer {     位置：固定；左：0px；底部：0px；高度：30px；宽度：100%；背景：#999； }      * html #footer {     位置：绝对；顶部：表达式（（0-（footer.offsetHeight）+（document.documentElement.clientHeight？？document.documentElement.clientHeight：document.body.clientHeight）+（ignoreMe = document.documentElement.scrollTop？？document.documentElement.scrollTop：文档。 body.scrollTop))+'px'); } 更改区域内容的大小 #内容{     宽度：100%；保证金：0；浮动：无； } CSS3 Media Queries（这个不常用主要用于智能设备的判断显示不同的媒体）@仅限媒体屏幕和（最小设备宽度：320 像素）和（最大设备宽度：480 像素）{    }       @仅限媒体屏幕和（最小宽度：321 像素）{    }       @仅限媒体屏幕和（最大宽度： 320px) {    }       @media only 屏幕  和（最小设备宽度：768px）  和（最大设备宽度：1024px） {    }       @media 仅屏幕  和（最小设备宽度：768px）  和（max-device-宽度 : 1024px)  和（方向：横向） {    }       @media only 屏幕  和（最小设备宽度： 768px）  和 （最大设备宽度 : 1024px）  和 （方向： 纵向） {    }       @media only 屏幕  和（最小宽度：1224px）{    }       @media 仅屏幕和（最小宽度：1824px）{    }       @media 仅屏幕和（-webkit-min-device-pixel-ratio：1.5），仅屏幕和（min-device-像素比：1.5){    } 多背景图片#multiple-images { 背景： url(image_1.png) 左上不重复， url(image_2.png) 左下不重复， url(image_3.png) 右下不重复; } 多列 #columns-3 { 文本对齐：对齐； -moz-列数：3； -moz-列间隙：12px； -moz-column-rule：1px实体#c4c8cc； -webkit 列数：3； -webkit-列间隙：12px； -webkit-column-rule：1px实体#c4c8cc； } IE 中的最小高度 .box { 最小高度：500px;高度：自动！重要；高度：500px； } 突出显示文本样式 ::选择{颜色：#000000;背景颜色：#FF0000； } ::-moz-selection { 颜色：#000000;背景：#FF0000； } 盒子阴影 框阴影：0px 3px 3px rgba(0,0,0,0.2); -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 3px 3px rgba (0,0,0,0.2); 占位符文本样式 ::-webkit-input-placeholder { 颜色：#ccc;字体样式：斜体 } :-moz-placeholder { 颜色：#ccc;字体样式：斜体 } CSS3 3D文字效果H1 {文本阴影：0 1px 0 #ccc，0 2px 0#c9c9c9，0 3px 0 #bbb，0 4px 0#b9b9b9，0 5px 0 #aaa，0 6px 1px RGBA (0,0,0,.1) , 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2) , 0 5px 10px rgba } WebKit 的边框半径校正 -webkit-background-clip：填充框； XBrowser 的边框半径 (CSS3PIE) .roundbox { -moz-border-radius:8px; -webkit-边框-半径：8px； -khtml-边框-半径：8px；边框半径：8px；行为： url(/www.sychzs.cn); } 更好的兼容IE浏览器 CSS3工具提示（这个很实用，看我网站的导航工具提示效果）一个{    颜色：#900；文本装饰：无； }      a:hover {    颜色：红色；职位：相对； }      a[title]:hover:after {    内容：attr(title);内边距：4 像素 8 像素；颜色：#333；位置：绝对；左：0；顶部：100%；空白：nowrap； z 索引：20 像素； -moz-边框-半径：5px； -webkit-border-radius: 5px;边框半径：5px； -moz-box-shadow：0px 0px 4px #222； -webkit-box-shadow：0px 0px 4px #222；框阴影：0px 0px 4px #222；背景图像：-moz-线性渐变（顶部，#eeeeee，#cccccc）；背景图像：-webkit-gradient（线性，左上，左下，颜色停止（0，#eeeeee），颜色停止（1，#cccccc））； } CSS3背景大小body { 背景：#000 url(http://www.sychzs.cn/2009/10/frida-kahlo-1.jpg) 中心中心固定不重复； -moz-背景大小：封面；背景大小：封面； } @media 仅限所有和 (最大宽度: 1024px) 和 (最大高度: 768px) { body { -moz-background-size: 1024px 768px;背景大小：1024px 768px； } } 跨浏览器CSS页面卷曲阴影.page-curl {  位置：相对；背景：#ffffff；背景：-moz-线性渐变（顶部，#ffffff 0%，#e5e5e5 100%）；背景：-webkit-gradient（线性，左上，左下，颜色停止（0％，#ffffff），颜色停止（100％，#e5e5e5））；过滤器：progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0); -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); }     .page-curl:after {  z-index: -1;位置：绝对；背景：透明；宽度：70%；身高：55%；内容： '';右：10 像素；底部：10 像素； -webkit-transform：倾斜（15度）旋转（5度）； -webkit-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3); -moz-transform：倾斜（15度）旋转（5度）； -moz-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3); }     .page-curl:before {  z-index: -2;位置：绝对；背景：透明；宽度：70%；身高：55%；内容： '';左：10 像素；底部：10pX; -webkit-transform：倾斜（-15度）旋转（-5度）； -webkit-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3); -moz-变换：倾斜（-15度）旋转（-5度）； -moz-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3); CSS3 模糊文本 .blur { 颜色：透明；文本阴影：0 0 5px rgba(0,0,0,0.5); } 修复 IE6/7 margin/padding 双倍行距错误 ul li { 浮动：右；右边距：10px； *显示：内嵌； _显示：内联； } 伪类的链接顺序 a:link {颜色: 蓝色;} a:visited {颜色: 紫色;} a:hover {颜色: 红色;} a:active {颜色: 黄色;} 用于响应式布局的 HTML Meta 标记 原文链接：http://www.sychzs.cn/58top/archive/2012/11/26/30-useful-css-snippets-for-developers.html