快速构建您的网站-一些有用的css片段

11-26 次

标签 CSS3教程 css片段

本教程将带给你一些你可能曾经见过或未见过的css片段，来帮助你快速的构建网站样式。

事实上，你是不是经常需要检查一些属性和css语法的兼容性？你是不是经常想办法解决代码重复性的问题？我们将来解决这些问题，同时展示一些非常有用的css混合属性。

速记类（SHORTHAND CLASSES）

先从速记类开始，通过这些类我们很快的完成某件事情而不用通过很长的选择器选中元素再完成同样的事情。

最简单的例子是想要一个元素左浮动或右浮动。你可以通过给这些元素id或class，再通过选择器选中它们，再使其浮动，或者简单的使用速记类来完成这个工作。

.float-left /* Or whatever name you like */ {
    float: left;
}
 
.float-right /* Or whatever name you like */ {
    float: right;
}

你需要做的就是简单的在这些元素上添加class float-left或float-right。下面的显示和隐藏的速记类：

.hide {
    display: none;
}
 
.show {
    display: block;
}

这些速记类也能够加快你的javascript的开发，你如果想隐藏某个元素，只需要用js切换其样式为.hide即可。

设计相关的CSS片段（DESIGN-RELATED SNIPPETS）

我们从每一个项目都需要用到的css样式开始：字体样式。如何创建漂亮的字体，设置行高和设置字体大小都是棘手的事情。我们通过下面的例子来看看：

.content {
    font: 1em/1.4 Segoe, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
 
.title {
    font: 1.7em/1.2 Baskerville, "Baskerville old face", "Hoefler Text", Garamond, "Times New Roman", serif;
}
 
.code {
    font: 0.8em/1.6 Monaco, Mono-Space, monospace;
}

上面的几行代码做了不少事情：

首先，它改变了content的默认字体样式，将这个样式应用到根元素上，它下面的所有子元素通过级联关系都能应用到这个样式。
第二，为title元素设置了更大的字体尺寸和字体样式。
第二，它给代码元素(内联或块级元素)一些别的字体和更小的字体尺寸。

上面的代码看起来十分笨拙，但是当你添加新的元素又不想指定别的字体样式时，它能为你节约大量的时间。

现在来看一些更实际的类：disabled。当你想要一个元素不可用的时候，将其透明度降到0.5%，并是鼠标滑过它时不显示小手。

.disabled {
    pointer-events: none;
    opacity: 0.5;
}

一个最好的例子是表单的提交按钮，当用户没有将表单填写正确的时候提交按钮显示为disabled，当用户正确的填写了表单，通过javascript将disabled类去掉，提交按钮就变为可用了。

另一个例子是给表格隔行变色的斑马线效果。

table tr:nth-child(even) {
    background: rgba(0,0,0,0.1);
}

最后一个代码片段可以大大的提高你的页面超链接的效果：

a {
    text-decoration: none;
    color: #08C;
    transition: all 0.3s ease-out;
    position: relative;
    padding: .5em;
    margin: -.5em;
}
 
a:hover { color: #0AF; }

上面的代码做了4件事情：

去除了默认的超链接下划线。
将超链接的颜色改为好看的蓝色。
为超链接的hover添加了一些动画效果（当然在实际使用中还需要添加各个厂商的前缀）。
使用了 this awesome technique from Joshua Hibbert来增加鼠标的点击范围。这样做的好处是利于手机等移动设备的导航。

开发相关的CSS片段（DEVELOPMENT-RELATED SNIPPETS）

在上面的一节中，我们看到了一些用于页面设计方面的css代码片段。如果你使用了那些代码，你的设计看起来将会更简洁合理。在这一节中，我们来看看开发相关的css代码片段。

先来看第一个例子，你一定曾经多次看到过这个css代码片段，相关文档可以参考encouraged people to use it 。

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

box-sizing属性是做什么用的呢？它是用来改变用于计算元素的宽度和高度的默认盒模型。默认的盒模型是设置为“content-box”，意思是他的宽带中不包含任何的padding和borders 。当我们使用响应式的页面设计时，这种设置显得十分不好，所以我们使用一个干净的盒模型：border-box。

一个很好的例子是使用这种盒模型将可以使某项元素设置100%的宽带的横向的padding。默认的box-size是将宽带设置为100%加上边框的宽度，但是border-box将把边框的宽度包含在100%宽度之内。如果你想了解更多关于盒模型的资料，可以参考W3C的 CSS Basic User Interface Module Level 3 (CSS3 UI) 。

如果你想知道浏览器对box-sizing的支持，所有现代浏览器、手机移动设备都支持box-sizing，除了IE7和IE7之前的IE浏览器。

注意：如果你想在伪元素上使用box-size，那么在声明中要包含那些伪元素。

下面让我们来看看另一个实用的css片段：clearfix。当一个元素仅仅是包含在一个浮动元素中，它将被收缩到最小。要阻止这种行为，你必须为其设置“clearfix”。

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
 
.clearfix:after {
    clear: both;
}
 
/* IE6/7 support */
.clearfix {
    *zoom: 1;
}

注意：在Opera浏览器中有一个bug，当文档中存在contenteditable属性时clearfix将失去作用，为了修补这个bug，其中一个方法是将content的值设为引号中间带个空格。

注意：这里使用display: table而不是display: block,这样做的好处是，对使用了包含top-margins的元素的伪元素十分友好。

下面让我们来看一些更深入的东西。

.visuallyhidden {
    position: absolute;
    width: 1px; /* Setting this to 0 make it invisible for VoiceOver */
    height: 1px; /* Setting this to 0 make it invisible for VoiceOver */
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;    
}

这个“visually hidden”类是从HTML5BoilerPlate project来的。你可能会问，为什么不使用display: none？

如果设置了display: none，那么元素对于屏幕和搜索引擎来说都是不可见的。这两种设置是不同的，这一点非常重要。当你用slideToggle()方法显示或隐藏一个tabs选项卡的时候，千万不要使用display: none，因为这样做将使tabs元素对于屏幕和搜索引擎爬虫都不可见。正确的做法是给它上面的那个类。

为了更深入了解，建议你阅读CSS-Tricks的 Places It’s Tempting To Use Display: None; But Don’t

当我们在讨论隐藏元素的时候，我们来研究一下图片替换技术，众所周知，图片替换技术是：

编写一个元素
给它一个背景图像
隐藏文本

你以前常用的方法可能是：position: absolute; left: -9999px;。这种写法是可以的，但是它使浏览器的渲染时间加长了，因为要创建10000px的宽度。这里提供了一个新方法来实现这种效果。这个方法来自于Scott Kellum 。

.ir {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

这是一段大师级的代码。它所做的事情仅仅是将文本移出了盒模型。

下面来看一下两段长字符串方面的css代码片段。一个是预防字符串被容器截断（例如很长的URL），它来自于 forcing the break ，另一个是当字符串很长时使用省略号在容器末端截断字符串。

.break {
    -ms-word-break: break-all;
    word-break: break-all;
 
    word-break: break-word;
 
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}
.ellipsis {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    -ms-text-overflow: ellipsis; /* Required for IE8 */
    -o-text-overflow: ellipsis; /* Required for Opera */
    text-overflow: ellipsis;
}

第一个代码片段(.break)可以在Internet Explorer 8+、Firefox、Safari和Chrome下工作。在Opera下它不能正常发挥作用。

第二个代码片段(.ellipsis)可以在 Explorer 8+、Safari、Opera和Chrome下正常工作。在Firefox下它不能正常发挥作用。但是亦有方法可以修补firefox的bug:a way to do it with some XML and the -moz-binding property。

注意：为.ellipsis类设置你需要的宽度。

最后我们来看一下如何在<pre>块中截断文本。

pre {
    white-space: pre-wrap;       /* Chrome & Safari */
    white-space: -moz-pre-wrap;  /* Mozilla since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

这个css片段来自于article from Tyler Longren，但是作者没有提及Opera 8+方面的内容。通过查阅Opera supports the word-wrap property，可以确定它在Opera 8+也能很好的工作。

其它CSS代码片段（MISCELLANEOUS）

先来看看有关打印方面的css片段。也许你不关心你的网站在打印方面的内容，但是不少网站有这方面的需求。

@media print {
    * {
        background: none !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
 
        /* Images, vectors and such */
        filter: Gray();                          /* IE4-8: depreciated */
        filter: url('desaturate.svg#grayscale'); /* SVG version for IE10, Firefox, Safari 5 and Opera */
        -webkit-filter: grayscale(100%);         /* Chrome + Safari 6 */
        -moz-filter: grayscale(100%);            /* Future proof */
        -ms-filter: grayscale(100%);             /* Future proof */
        -o-filter: grayscale(100%);              /* Future proof */
        filter: grayscale(100%);                 /* Future proof or polyfilled */
    }
 
    a {
        text-decoration: underline;
    }
 
    a[href]:after {
        content: " (" attr(href) ")"; 
    }
 
    a[href="#"],
    a[href="javascript:"] {
        content: "";
    }
}

这里需要注意一些事情，先从颜色开始说起。

前4句代码把文字颜色都设置为黑色，并去掉背景图像和阴影。
filter 部分关注图片内容，IE浏览器使用旧的filter属性，Chrome浏览器支持新的css3 filter属性和SVG。
特别提出的是有一个没有使用前缀语法的javascript脚本可以在ie6中使用： polyfill for CSS filters。

如果一切都是黑白显示，那么如何区分锚文本那？

一个可用的方法是未锚文本添加下划线。
如果锚文本有一个href属性，那么可以在其后直接显示链接文本。

注意：HTML5BoilerPlate提供了一个十分好看的打印样式：a very powerful print style sheet 。

接下来让我们来看看视网膜屏幕（retina displays）相关的内容。Retina Display技术，即我们常提到的视网膜成像显示技术，它被广泛应用在部分苹果设备中的一项屏幕显示技术，最早应用在苹果iPhone 4的屏幕上，这项技术为iPhone 4的屏幕带来极清晰的显示效果。

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2), /* Looks like a bug, so may want to add: */
only screen and (   -moz-min-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
    /* Your retina specific stuff here */
}

这部分最后的内容来谈谈CSS诊断方面的代码片段。可能你还从未听说过CSS诊断，CSS诊断是提供一段代码来检验你想验证代码段。这里有一些很好的CSS诊断代码片段，它们分别来自于 Eric Meyer 和 Neil Grosskopf 。

/* Empty Elements */
.debug div:empty, .debug span:empty,.debug li:empty,.debug p:empty,.debug td:empty,.debug th:empty { 
    padding: 20px; 
    border: 5px dotted yellow !important;
}
 
/* Empty Attributes */
.debug *[alt=""], .debug *[title=""], .debug *[class=""], .debug *[id=""], .debug a[href=""] { 
    border: 5px solid yellow !important;
}
 
/* Deprecated Elements */
.debug applet, .debug basefont, .debug center, .debug dir, .debug font, .debug isindex, .debug menu, .debug s, .debug strike, .debug u {
    border: 5px dotted red !important;
}
 
/* Deprecated Attributes */
.debug *[background], .debug *[bgcolor], .debug *[clear], .debug *[color], .debug *[compact], .debug *[noshade], .debug *[nowrap], .debug *[size], .debug *[start],.debug *[bottommargin], .debug *[leftmargin], .debug *[rightmargin], .debug *[topmargin], .debug *[marginheight], .debug *[marginwidth], .debug *[alink], .debug *[link], .debug *[text], .debug *[vlink],.debug *[align], .debug *[valign],.debug *[hspace], .debug *[vspace],.debug *[height], .debug *[width],.debug ul[type], .debug ol[type], .debug li[type] {
    border: 5px solid red !important;
}
 
/* Proposed Deprecated Elements */
.debug input[type="button"], .debug big, .debug tt {
    border: 5px dotted #33FF00 !important;
}
 
/* Proposed Deprecated Attributes */
.debug *[border], .debug table[cellpadding], .debug table[cellspacing] { 
    border: 5px solid #33FF00 !important;
}

你可以添加.debug类到你的文档根目录上（通常是html），你可以看到一些元素被用边框标记出来，接下来你可以根据自己的需要去完成工作。

注意：这样做并不能保证你获得一个有用的标记，为了保证有效的标记，请使用 W3C validator 。

MIXINS (CSS预处理器)

一个CSS预处理器（CSS preprocessor）允许你使用variables、mixins、functions、operations、nesting和importing等等。通常我们都使用LESS、Sass或Stylus。

在这里我们只讨论mixins。mixins很像是变量，但它全是class。mixins最好的地方是它可以使用函数和拥有参数。

让我们从一个简单的例子开始，使用mixin为所有前缀的transform赋值。

.transform(@string) {
    -webkit-transform:  @string;
    -moz-transform:     @string;
    -ms-transform:      @string;
    -o-transform:       @string;
    transform:          @string;
}

我们可以使用mixin 为各种transform赋不同的值。

.rotate(@deg) {
    -webkit-transform:  rotate(@deg);
    -moz-transform:     rotate(@deg);
    -ms-transform:      rotate(@deg);
    -o-transform:       rotate(@deg);
    transform:          rotate(@deg);
}
 
.scale(@factor) {
    -webkit-transform:  scale(@factor);
    -moz-transform:     scale(@factor);
    -ms-transform:      scale(@factor);
    -o-transform:       scale(@factor);
    transform:          scale(@factor);
}
 
.translate (@x, @y) {
    -webkit-transform:  translate(@x, @y);
    -moz-transform:     translate(@x, @y);
    -ms-transform:      translate(@x, @y);
    -o-transform:       translate(@x, @y);
    transform:          translate(@x, @y);
}

这种书写方式唯一不同的地方是写不同厂商的前缀。

还可以像下面这样写：

.transition(@string: all 0.3s ease-out) {
    -webkit-transition: @string;
    -moz-transition:    @string;
    -ms-transition:     @string;
    -o-transition:      @string;
    transition:         @string;
}

上面的写法为transition提供了一个默认值all 0.3s ease-out，这样，我们在使用transition的时候可以不赋任何值。像下面这样使用：

.my-element {
    .transition;
}
/* Output CSS */
.my-element {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

下面的例子是为box-sizing提供一个默认参数。

.box-sizing(@value: border-box) {
    -webkit-box-sizing: @value;
    -moz-box-sizing:    @value;
    -box-sizing:        @value;
}
*, *:before, *:after {
    .box-sizing;
}
/* Output CSS */
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

我们的大多数时候都是使用CSS3来关联预处理器，但你也可以使用css2.1来关联它，看下面的代码：

.placement(@top, @right, @bottom, @left) {
    top: @top;
    right: @right;
    bottom: @bottom;
    left: @left;
}
.my-element {
    position: absolute;
    .placement(0, 0, 0, 0);
}
/* Output CSS */
.my-element {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

我们甚至可以关联位置（position）属性：

.placement(@type, @top, @right, @bottom, @left) {
    position: @type;
    top: @top;
    right: @right;
    bottom: @bottom;
    left: @left;
}
.my-element {
    .placement(absolute, 0, 0, 0, 0);
}
/* Output CSS */
.my-element {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

最后来分享一个非常有用的mixin mixing。CSS2.1和CSS3之间有一个令人非常郁闷的问题：rem和px的转换。

Rem的全名是"root em"，它的行为类似于"em"，但它从属于根元素而不是他的父元素。除了Opera Mini和IE6、IE7外的所有现代浏览器都支持rem。对于不支持rem的浏览器，我们需要为它们提供一个兼容处理：

.font-size($pxValue){
    @remValue: (@pxValue / 10);
    font-size: ~"@{pxValue}px";
    font-size: ~"@{remValue}rem";
}
html { font-size: 62.5%; }
.my-element {
    .font-size(13px);
}
/* Output CSS */
.my-element {
    font-size: 13px;   /* Internet Explorer 6/7/8 + Opera Mini */
    font-size: 1.3rem; /* Other browsers */
}

通常你可以设置font-size的单位为像素，上面的代码可以使你同时拥有像素和rem。

本教程的所有CSS代码片段和LESS文件你可以点击这里下载。