你应该知道的25个非常有用的CSS技巧

朴灿烈づ我的快乐病毒、 2022-06-10 06:37 221阅读 0赞

在我们的前端CSS编码当中，经常要设置特殊的字体效果，边框圆角等等，还要考虑兼容性的问题， CSS网页布局，说难，其实很简单。说它容易，往往有很多问题困扰着新手，在中介绍了非常多的技巧，这些小技巧与知识能事半功倍的给大家以帮助，经验丰富的CSS程序员通常都知道这一点，但初学者不要错过了！重要的CSS规则

这里有25个非常有用的CSS技巧，将帮助你解决让你棘手的CSS代码问题。你可以直接使用到你现在的项目当中

## 1。更改文本突出显示颜色（Change Text Highlight Color） ##

#### 进一步阅读 ####

[兼容IE与firefox的css 线性渐变（linear-gradient）][IE_firefox_css _linear-gradient]  
[前端开发性能推荐-如何进行CSS代码减肥][-_CSS]

[每个网页设计师应该知道的10条CSS规则][10_CSS]

[让IE浏览器支持RGBA颜色][IE_RGBA]

[web开发经验推荐-新网站项目中的8个有用片段][web_-_8]

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

![复制代码][copycode.gif]

1 ::selection{ /* Safari and Opera */
    2  background:#c3effd;
    3  color:#000;
    4 }
    5 ::-moz-selection{ /* Firefox */
    6  background:#c3effd;
    7  color:#000;
    8 }

![复制代码][copycode.gif]

## 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 new window） ##

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

![复制代码][copycode.gif]

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";
    }

![复制代码][copycode.gif]

## 8。风格有序li列表（Style Your Ordered List） ##

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

![复制代码][copycode.gif]

ol {
     font: italic 1em Georgia, Times, serif;
     color: #999999;
    }
    ol p {
     font: normal .8em Arial, Helvetica, sans-serif;
     color: #000000;
    }

![复制代码][copycode.gif]

## 9。使用CSS的首字下沉（Drop Caps Using CSS） ##

首字下沉，使用CSS，  
你可以创建一个下沉效果，如在报纸或杂志的使用：第一个字母伪元素。

![复制代码][copycode.gif]

p:first-letter{
    display:block;
    margin:5px 0 0 5px;
    float:left;
    color:#FF3366;
    font-size:3.0em;
    font-family:Georgia;
    }

![复制代码][copycode.gif]

## 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） ##

![复制代码][copycode.gif]

<form method="post" action="#"><label for="username">Username</label>
      <input type="text" name="username" id="username">
     
    <label for="password">Username</label>
      <input type="password" name="pass" id="password">
     
    <input type="submit" value="Submit"></form>

![复制代码][copycode.gif]

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代码不一致导致的兼容性问题

![复制代码][copycode.gif]

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;
    }

![复制代码][copycode.gif]

[内容详情点击打开链接][Link 1]

[IE_firefox_css _linear-gradient]: http://www.cnblogs.com/58top/archive/2012/10/16/2726959.html
[-_CSS]: http://www.cnblogs.com/58top/archive/2012/10/13/css-to-less.html
[10_CSS]: http://www.cnblogs.com/58top/archive/2012/07/31/2616323.html
[IE_RGBA]: http://www.cnblogs.com/58top/archive/2012/10/10/2719118.html
[web_-_8]: http://www.cnblogs.com/58top/archive/2012/10/25/8-code-snippets-templates-for-new-website-projects.html
[copycode.gif]: /images/20220610/0ced3e3ea9f64da4bdc3bdaaed6fb0e9.png
[Link 1]: http://www.cnblogs.com/58top/archive/2012/10/27/25-incredibly-useful-css-tricks-you.html