css代码规范有哪些，css教程css代码css

1. 垂直对齐如果你使用CSS，你如何垂直对齐容器中的元素呢？CSS3 Transforms 可以让你优雅地解决这个困惑。

.verticalcenter{position:relative;top:50%;-webkit-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);} 使用此技巧可以将单个文本转换为文本。当您从行移动到段落再到框时，它们会垂直对齐。此时，浏览器对Transforms 的支持很棘手。 Chrome 4、Opera 10、Safari 3、Firefox 3 和Internet Explorer 9 均支持此属性。 2. 将元素拉伸到窗口的高度。在某些情况下，您可能希望将元素拉伸到窗口的高度。调整基本元素允许您仅调整容器的大小。因此，要创建一个拉伸到窗口高度的元素，您需要拉伸顶层。元素：html 和body:

html, body { height: 100%;} 然后将100% 应用于任何元素的高度。

p { height: 100%;} 3. 根据文件格式使用不同的样式您可能希望某些链接看起来与其他链接不同，以帮助您了解它们的去向。以下代码片段在文本链接之前添加一个图标，为每个资源使用不同的图标或图像。

a[href^=\'http://\']{padding-right: 20px;background: url(external.gif) no-repeat center right;}/* 电子邮件*/a[href^=\'mailto:\']{padding- right: 20px;background: url(email.png) 不重复居中；}/* pdfs */a[href$=\'.pdf\']{padding-right: 20px;background: url(pdf.png) 不重复center right;} 4. 使用灰度创建跨浏览器图像灰度可以看起来简约而优雅，并且可以给您的网站带来深沉的色调。此示例向SVG 图像添加灰度过滤。

出于跨浏览器的目的，使用过滤器属性。

img { filter: url(filters.svg#grayscale); /* Firefox 3.5 或更高版本*/filter: grey; /* IE6-9 */-webkit-filter: greyscale(1); /* Google Chrome、Safari 6 或更高版本、Opera 15 或更高版本* /}5. 背景渐变动画CSS 最吸引人的功能之一就是能够添加动画效果。除了渐变之外，您还可以向背景颜色、透明度和元素大小添加动画。目前无法对渐变进行动画处理，但下面的代码可能有用。更改背景的位置，使其看起来像动画。

按钮{背景图像：线性渐变（5187c4，#1c2f45）;背景尺寸：自动200;背景位置： 0 100;过渡：背景位置0.5秒；}按钮：悬停{背景位置： 0 0;}6.CSS：自动调整表格列宽对于表格来说，调整列宽就更麻烦了。然后，您可以使用以下技巧：将white-space: nowrap; 添加到td 元素以正确换行文本。

td {white-space: nowrap;} 7. 仅在一侧或两侧显示框阴影如果您想要框阴影，请尝试此技巧在任一侧添加阴影。要实现此目的，首先定义一个具有特定宽度和高度的框，然后正确定位：after 伪类。下面是实现底部阴影的代码：

.box-shadow {背景颜色： #FF8020; width: 160px; height: 90px; margin-top: -45px; margin-left: -80px; Position:绝对； top: 50%; left: 50%;}.box-shadow:after { content: \' \ '; width: 150px; height: 1px; margin-top: 88px; margin-left: -75px; display: 块；position: 绝对； left: 50%; z-index: -1; -webkit-box-shadow: 0px 0px 8px 2px #0 00 000; - moz -box-shadow: 0px 0px 8px 2px #000000; box-shadow: 0px 0px 8px 2px #000000;} 8. 包裹长文本如果您遇到比其自身容器长的文本，这个技巧会派上用场。在此示例中，默认情况下，无论容器的宽度如何，文本都会水平填充。

您可以使用简单的CSS 代码调整容器内的文本。

pre {white-space: pre-line; word-wrap: Break-word;} 效果是：

9. 创建模糊文本你想模糊你的文本吗？你可以使用颜色透明度和文本阴影来实现

.blurry-text { color:传统； text-shadow: 0 0 5px rgba(0,0,0,0.5);} 10.使用CSS动画实现省略号动画。此剪辑对于创建简单的加载省略号动画非常有用。即使不使用gif 图像也很方便。

.loading:after { Overflow: hide; display: inline-block;vertical-align:bottom; Anime: ellipsis 2sfinity; content: \'\2026\'; /* 省略号字符的ASCII 代码*/}@keyframes ellipsis { from { width: 2px; } to { width: 15px; }} 11.重置样式

html、body、p、span、applet、对象、iframe、h1、p、h3、h4、h5、h6、p、块引用、pre、a、缩写、首字母缩略词、地址、大、引用、代码、del、dfn 、 em、img、ins、kbd、q、s、samp、小、strike、strong、sub、sup、tt、var、b、u、i、center、dl、dt、dd、ol、ul、li、fieldset、表单、标签、图例、表格、标题、tbody、tfoot、thehead、tr、th、td、文章、旁白、画布、详细信息、嵌入、图表、figcaption、页脚、页眉、hgroup、菜单、导航、输出、ruby、部分、摘要、时间、标记、音频、视频{ margin: 0; padding: 0; border: 0; font-size: 100%; font: 继承； 垂直对齐： 基线； 轮廓： 无； -webkit-box-sizing: border-box; - moz -box-sizing: border-box; box-sizing: border-box;}html { height: 101%; }body { font-size: 62.5%; line-height: 1; font-family: Arial、Tahoma、sans serif；旁白，详细信息、figcaption、图、页脚、页眉、hgroup、菜单、导航、部分{ display: block; }ol, ul { list-style: none; }blockquote, q {quotes: none; }blockquote:before, blockquote:after, q:before, q:after { content: '' ; content: 无； }strong { font-weight: 粗体； } table { border-collapse: 折叠； border-spacing: 0; }img { border: 0; max-width: 100%; }p { font-size: 1.2em; line-height: 1.0 em; color: #333; }12. 典型CSS 透明浮动

.clearfix:after { content: \'.\'; display: 块； clear: 两者； Visibility: 隐藏； line-height: 0; height: 0; }.clearfix { display: 内联块； }html[xmlns] .clearfix { display: 块； }* html .clearfix { height: 1%; }13.新版本清除浮动（2011）

.clearfix:before,container:after { content: \'\'; display: table; }.clearfix:after {clear: Both; }/* IE 6/7 */.clearfix {zoom: 1; }14.跨浏览器透明度

.transparent { filter: alpha(opacity=50); /* Internet Explorer */-khtml-opacity: 0.5; /* khtml、旧版safari */-moz-opacity: 0.5; /* mozilla、netscape */opacity: 0.5; /* fx 、Safari、Opera */}15. CSS 参考模板

blockquote {background: #f9f9f9; border-left: 10px Solid #ccc; margin: 1.5em 10px; padding:5em 10px;quotes: \'\201C\'\'\201D\'\'\2018\'\'\2019\'; }blockquote:before { color: #ccc; content: open-quote; font-size: 4em; line-height:1em; margin-right:25em;vertical-align: -.4em;}blockquote p { display: inline;} 16. 个性化圆角

#container { -webkit-border-radius: 4px 3px 6px 10px; -moz-border-radius: 4px 3px 6px 10px; -o-border-radius: 4px 3px 6px 10px; border-radius: 4px 3px 6px 10 px;}/* 替代语法每行分割成*/#container { -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 6px; -webkit-border-底部- -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 6px; -moz-border-radius-bottomleft: 10px;} 17. 有关媒体的一般查询

/* 智能手机（纵向和横向） ---------- */@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* 样式*/}/* 智能手机（横向） ---------- */@media only screen (min-width : 321px) { /* Style */}/* 智能手机（纵向） -- -- -- - ---- */@Media only Screen and (最大宽度： 320px) { /* Style */}/* iPad (纵向和横向) ----------- */@Media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* 样式*/}/* iPad（横向） ----------- */@ 仅媒体屏幕和(最小设备宽度： 768px) 和(最大设备宽度： 1024px) 和(方向： 横向) { /* 样式*/}/* iPad (纵向) ------ -- -- - * /@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : Portrait) { /* style */}/* 桌面和换行Top --- -- - ----- */@media only 屏幕(min-width : 1224px) { /* 样式*/}/* 大屏幕----------- * /@media only 屏幕(min-width : 1824px) { /* 样式*/}/* iPhone 4 ----------- */@media 仅屏幕(-webkit-min- device-pixel-ratio:1.5 ), 仅屏幕和( min-device-pixel-ratio:1.5) { /* style */} 18. 现代字体堆栈

/* 基于Times New Roman 的衬线*/font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;/* 现代佐治亚州-基于衬线*/font-family: Constantia, \'Lucida Bright\', Lucidabright, \'Lucida Serif\', Lucida, \'DejaVu Serif,\' \'Bitstream Vera Serif\' , \'Liberation Serif\' , Georgia , serif;/*更传统的基于Garamond 的衬线*/font-family: \'Palatino Linotype\', Palatino, Palladio, \'URW Palladio L\', \'Book Antiqua\ ', Baskerville,' 'Bookman Old Style' 、“Bitstream Charter”、“Nimbus Roman No9 L”、Garamond、“Apple Garamond”、“ITC Garamond Narrow”、“新世纪教科书”、“世纪教科书”、“世纪教科书L\”、Georgia、衬线体； /*基于Helvetica/Arial 的无衬线字体*/font-family: Frutiger、“Frutiger Linotype”、Univers、Calibri、“Gill Sans”、“Gill Sans MT”、“Myriad Pro”、Myriad、“DejaVu Sans Condensed” , 'Liberation Sans', 'Nimbus Sans L', Tahoma,Geneva, \'Helvetica Neue\', Helvetica, Arial, sans-serif;/*基于Verdana 的无衬线字体*/font -family: Corbel, \'Lucida Grande ', \'Lucida Sans Unicode\', \'Lucida Sans\', \'DejaVu Sans\', \'Bitstream Vera Sans\', \'Liberation Sans\', Verdana, \'Verdana Ref\', sans- serif;/*基于Trebuchet 的无衬线字体*/font- family: 'Segoe UI', Candara, 'Bitstream Vera Sans', 'DejaVu Sans', 'Bitstream Vera Sans', 'Trebuchet MS ”, Verdana, “Verdana Ref”, sans -serif;/*较重的“Impact”无衬线*/font-family: Impact、Hettenschweiler、“Franklin Gothic Bold”、Charcoal、“Helvetica Incerat”、“Bitstream Vera 'Sans Bold'、'Arial Black'、Sans Serif; /*等宽字体*/font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono' , "Bitstream Vera Sans Mono", "Liberation Mono", “Nimbus Mono L”，摩纳哥，“Courier New”，Courier，等宽；19.自定义文本选择

}20.隐藏Logo的H1

h1 { text-indent: -9999px; margin: 0 auto; width: 320px; height: 85px; background: 透明url(\'images/logo.png\') 不重复滚动；} 21. 偏光图像边框

img.polaroid { background:#000; /*将其更改为背景图片或将其删除*/border:solid #fff; border-width:6px 6px 20px 6px; box-shadow:1px 1px 5px #333; /* 标准模糊5 像素.增加它会增加深度。 */-webkit-box-shadow:1px 1px 5px #333; -moz-box-shadow:1px 1px 5px #333; height:200px; /*设置为图像的高度或所需的p*/width:200px;所需的p*/} 22. 锚点链接伪类

a:link { color: blue; }a:visited { color: Purple; }a:hover { color: red; }a:active { color: Yellow; } 23. 奇怪的CSS 参考

.has-pullquote:before { /* 重置指标。 */padding: 0; border: none; /* 内容*/content: attr(data-pullquote); /* 将模块化的基于比例的边距拉到右侧。 */float: right; width: 320px; margin: 12px -140px 24px 36px; /* 基线校正*/position:relative; top: 5px; /* 排版（30px 行高等于25% 行距增量） */font-size: 23px; line- height: 30px;}.pullquote -adelle:before { font-family: \'adelle-1\', \'adelle-2\'; font-weight: 100; top: 10px ! important;}.pullquote-helvetica:before { font-family: \'Helvetica Neue\', Arial, sans serif; font-weight: 粗体； top: 7px !important;}.pullquote-facit:before { font-family: \'facitweb-1\', \'facitweb-2\', Helvetica, Arial , sans- serif; font-weight:bold; top: 7px !important;}24. CSS3：全屏背景

html {background: url('images/bg.jpg') 无重复