你应该知道的25个很是有用的CSS技巧

　　在咱们的前端CSS编码当中，常常要设置特殊的字体效果，边框圆角等等，还要考虑兼容性的问题， CSS网页布局，说难，其实很简单。

　　说它容易，每每有不少问题困扰着新手，在中介绍了很是多的技巧，这些小技巧与知识能事半功倍的给你们以帮助，经验丰富的CSS程序员一般都知道这一点，但初学者不要错过了!

　　这里有25个很是有用的CSS技巧，将帮助你解决让你棘手的CSS代码问题。你能够直接使用到你如今的项目当中

　　1。更改文本突出显示颜色(Change Text Highlight Color)

　　您可能不知道!使用CSS，你能够控制颜色测试，至少对符合标准的浏览器，如Safari或Firefox。

　　

::selection{ /* Safari and Opera */

　　background:#c3effd;

　　color:#000;

　　}

　　::-moz-selection{ /* Firefox */

　　background:#c3effd;

　　color:#000;

　　}

 

　　2。防止Firefox的滚动条跳转(Prevent Firefox Scrollbar Jump)

　　火狐一般隐藏垂直滚动条的内容若是尺寸小于可见的窗口，但解决这个问题，您可使用这个简单的CSS技巧。

　　

html{ overflow-y:scroll; }

　　3。打印分页符(Print Page Breaks)

　　虽然大多数的互联网用户更愿意在网上阅读的内容，但一些用户可能想打印文章。使用CSS，你能够控制内容的分页符，把这个类加入到任何你想下页打印的标签。

.page-break{ page-break-before:always; }

　　4. Using !important

　　经验丰富的CSS程序员一般都知道这一点，但初学者不要错过了!重要的CSS规则。经过加入!你的CSS规则很重要，你能够增长它的优先级比其余后续规则。

　　例如，下面的代码，背景颜色是蓝色的，而不是因为红!

.page { background-color:blue !important; background-color:red;}

　　5。替换文字与图片(Replace Text With Image)

　　这是一个很好的SEO技巧，让你看到一个不错的花哨的图像，而不是简单枯燥的文字，但搜索引擎将只能看到文字。

　　

.header{

　　text-indent:-9999px;

　　background:url('someimage.jpg') no-repeat;

　　height: 100px; /*dimensions equal to image size*/

　　width:500px;

　　}

 

　　6。跨浏览器的最低高度(让IE支持min-height)

　　Internet Explorer不理解min-height属性，但这里的CSS技巧来完成，在IE浏览器。

　　

#container{

　　height:auto !important;/*all browsers except ie6 will respect the !important flag*/

　　min-height:500px;

　　height:500px;/*Should have the same value as the min height above*/

　　}

 

　　7。在新窗口中突出显示要打开的连接(Highlight links that open in a newwindow)

　　CSS代码高亮显示连接，在新窗口中打开连接会弹出一个新的选项卡或窗口，

　a[target="_blank"]:before,

　　a[target="new"]:before {

　　margin:0 5px 0 0;

　　padding:1px;

　　outline:1px solid #333;

　　color:#333;

　　background:#ff9;

　　font:12px "Zapf Dingbats";

　　content: "\279C";

　　}

 

　　8。风格有序li列表(Style Your Ordered List)

　　样式的数字的有序列表，每一个列表项的内容以不一样的方式比。

ol {

　　font: italic 1em Georgia, Times, serif;

　　color: #999999;

　　}

　　ol p {

　　font: normal .8em Arial, Helvetica, sans-serif;

　　color: #000000;

　　}

 

　　9。使用CSS的首字下沉(Drop Caps Using CSS)

　　首字下沉，使用CSS，

　　你能够建立一个下沉效果，如在报纸或杂志的使用：第一个字母伪元素。

　　p:first-letter{

　　display:block;

　　margin:5px 0 0 5px;

　　float:left;

　　color:#FF3366;

　　font-size:3.0em;

　　font-family:Georgia;

　　}

 

　　10。跨浏览器的不透明度(Cross Browser Opacity)

　　虽然CSS3标准包括Opacity属性，但不是每一个浏览器都支持它跨浏览器的透明度，这里的CSS技巧

transparent_class {

　　filter:alpha(opacity=50);

　　-moz-opacity:0.5;

　　-khtml-opacity: 0.5;

　　opacity: 0.5;

　　}

 

　　11。line-height的垂直居中(Vertical centering with line-height)

　　若是您使用的是固定高度容器和垂直居中的文本，使用line-height属性，完美地作到这一点。

　

　line-height:30px;

 

　　12 固定宽度且居中(Center Fixed Width layout)

　　若是您使用固定宽度的布局，你应该中心的布局，

body{

　　width:1000px;

　　margin:0 auto;

　　}

 

　　13。在IE浏览器消除垂直textarea的滚动条(Remove vertical textarea scrollbar in IE)

　　IE浏览器中添加一个垂直滚动条的textarea的输入领域，不管在它的内容的高度。您能够用这个简单的CSS技巧来解决这个问题。

textarea{

　　overflow:auto;

　　}

　　14。删除活动的连接边界(Remove active link borders)

　　有些浏览器如Firefox和IE浏览器中添加一个虚线轮廓边界，用户点击连接。

　　这是一个有用的辅助功能，让用户知道其中的连接，他点击或焦点。但有时你须要摆脱这种，在这里你须要使用的CSS。

a:active, a:focus{ outline:none; }

　　15。在IE防止元素消失(Prevent Elements from disappearing in IE)

　　有时IE浏览器的行为在一种特殊的方式，使一些元素消失，从而出现当您尝试进行选择。

　　这是因为一些float元素的IE问题。这能够加入的位置是：相对固定的元素消失。

　　16。属性特定的图标(Attribute-Specific Icons)

　　CSS属性选择器是很是强大的，给你不少选择来控制样式不一样的元素，例如你能够添加一个图标的基础上的href属性的一个标签，让用户知道是否连接点，图像，PDF，DOC文件等。

　a[href$='.doc'] {

　　padding:0 20px 0 0;

　　background:transparent url(/graphics/icons/doc.gif) no-repeat center right;

　　}

　　17。CSS指针光标(CSS Pointer Cursors)

　　最近这一趋势已经遇上了。全部的用户界面元素的用户，能够点击网页上的光标相似的超级连接。这里是CSS技巧，

input[type=submit],label,select,.pointer { cursor:pointer; }

 

　　18。首字大写(Capitalize Text)

　　这招是特别有用的一篇文章的标题显示在网页上的全部大写字母开头的单词。

　　

text-transform: capitalize;

 

　　19。小型大写字母文本(Small Caps Text)

　　这是一个较少使用，但有用的CSS属性。它利用了全部的字母文字，但每一个字的第一个字母，字母的大小是小于的第一个字母。

font-variant:small-caps;

　　20。突出显示的文本输入字段(Highlight Text Input Fields)

　　这个CSS技巧让你突出当前处于焦点的输入字段。在IE中不兼容

　　

input[type=text]:focus, input[type=password]:focus{

　　border:2px solid #000;

　　}

 

　　21。删除图像边框(Remove Image Border)

　　图片超连接一般会获得一个丑陋的蓝色边框，使您的图像超连接看起来可怕。下面代码就可去掉

　　

a img{ border:none; }

 

　　22。表单中使用标签(Tableless Forms Using labels)

　　Username

　　

　　Username

　　

　　

 

　　

p label{

　　width:100px;

　　float:left;

　　margin-right:10px;

　　text-align:right;

　　}

 

　　23。设置一致的基本字体大小(Set a Consistent Base Font Size)

　　

body{ font-size:62.5%; }

 

　　24。突出首字母缩写和缩写标签(Highlight Acronym and Abbr Tags)

　　简称和缩写标签提供有用的信息给用户，浏览器和搜索引擎的首字母缩写词和缩略语，但最重要的Firefox的浏览器，

　　这里的CSS技巧，突出简称和缩写标签在您的网页。

　acronym, abbr{

　　border-bottom:1px dotted #333;

　　cursor:help;

　　}

　　25。CSS重置

　　这一块CSS代码重置适合全部的浏览器以防止你的CSS代码不一致致使的兼容性问题

　　

html, body, div, span, applet, object, iframe,

　　h1, h2, h3, h4, h5, h6, p, blockquote, pre,

　　a, abbr, acronym, address, big, cite, code,

　　del, dfn, em, font, img, ins, kbd, q, s, samp,

　　small, strike, strong, sub, sup, tt, var,

　　b, u, i, center,

　　dl, dt, dd, ol, ul, li,

　　fieldset, form, label, legend,

　　table, caption, tbody, tfoot, thead, tr, th, td {

　　margin: 0;

　　padding: 0;

　　border: 0;

　　outline: 0;

　　font-size: 100%;

　　vertical-align: baseline;

　　background: transparent;

　　}

　　body {

　　line-height: 1;

　　}

　　ol, ul {

　　list-style: none;

　　}

　　blockquote, q {

　　quotes: none;

　　}

　　blockquote:before, blockquote:after,

　　q:before, q:after {

　　content: '';

　　content: none;

　　}

　　/* remember to define focus styles! */

　　:focus {

　　outline: 0;

　　}

　　/* remember to highlight inserts somehow! */

　　ins {

　　text-decoration: none;

　　}

　　del {

　　text-decoration: line-through;

　　}

　　/* tables still need 'cellspacing="0"' in the markup */

　　table {

　　border-collapse: collapse;

　　border-spacing: 0;

　　}