CSS是设计网页样式的基本方法。它看似简单的语法允许我们做很多事情来影响我们作品的视觉层。特别是与CSS3在美国，这门语言变得更加强大。
有很多有用的CSS技术还有可供你利用的诡计。
这是一些有用的CSS代码片段的集合，您可能希望将它们保存在您的工具包中。
1.设置正文字体大小为62.5%，便于em转换
如果你想使用相对单位(新兴市场)的字体大小，声明62.5%的字体大小的属性身体会更容易皈依吗px来新兴市场．通过这样做，转换成新兴市场是分的问题吗px取值为10(例如24px = 2.4em)。
正文{字号:62.5%;/* font-size 1em = 10px */} p {font-size: 1.2em;/* 1.2em = 12px */｝
2.移除WebKit浏览器的大纲
当你专注(:专注)在输入元素，也许您已经注意到Safari添加了一个蓝色边框(还有Chrome，一个黄色的)。
如果你想删除边框轮廓，你可以使用下面的样式规则(这将从文本字段中删除轮廓):
Input [type="text"]:focus {outline: none;｝
请注意大纲用于可访问性目的，以便更容易查看哪个输入字段是活动的。这对于那些有运动障碍不能使用指向点击设备(如鼠标)的人是有益的，因此必须依靠其他方式导航网页，如Tab键。对于使用键盘快捷键进入web表单输入字段的身体健全的用户来说，这个大纲也很有用(他们更容易看到哪个输入当前处于活动状态)。
因此，与其完全去掉大纲，不如考虑对输入字段进行样式化，以表明它是焦点元素。
3.使用CSS转换有趣的悬停效果
对于渐进式增强，可以使用变换属性是许多支持CSS3的浏览器所支持的。
这里有一个放大的技巧一个悬浮元素110%。
A {-moz-transform: scale(1.1);-webkit-transform:规模(1.1);-o-transform:规模(1.1);｝
4.目标不带条件注释的IE6和IE7浏览器
需要针对IE浏览器?这里有一个不需要条件注释的快速方法(注意你的CSS因此不会通过自动验证，如果你知道为什么它不能，这是可以的）.
下面的代码将更改背景颜色的divS取决于用户在什么浏览器下浏览网页。自＊级联到IE7及以下，我们使用＿这样IE6(及以下)的背景颜色就与IE7不同了。
Div {background-color: #999;／*所有的浏览器*/ *background-color: #ccc;/*在属性-前添加一个*IE7及以下版本*/ _background-color: #000;/*在属性-前添加_IE6及以下版本* /}
5.支持所有主流浏览器的透明/不透明
这个例子给出了div元素a不透明度70%。我们需要使用专有的CSS来使它在Internet Explorer上工作(这会使我们的代码在W3C标准下无效)。
div {/*符合标准的浏览器*/透明度:0.7;/*以下内容会被基于标准的浏览器忽略*/-ms-filter:“progid: DXImageTransform.Microsoft.Alpha(不透明度= 70)”;/* ie8 */过滤器:α(不透明度= 70);/*即5-7 */｝
6.使用!important来覆盖正常的CSS优先规则
在CSS中，当两个属性应用于同一个元素时，样式表中较靠后的那个属性将生效。然而，通过使用重要的!在属性值的末尾，可以更改此值。
让我们以这组样式规则为例:
H1{颜色:绿色;} h1{颜色:红色;｝
的h1元素将有一个红色的CSS上面。
如果我们想要在不改变属性声明顺序的情况下改变样式规则的优先级，那么只需执行以下操作:
H1{颜色:绿色重要的!；} h1{颜色:红色;｝
现在,<标题>元素将是绿色的。
7.定心固定大小的元素
这里有一种定宽定高的居中方法div在容器的中心。这可以适用于将文本、图像等放在它们的容器中。
从本质上说，我们做了一些算术，使用绝对定位和空白使固定大小的元素居中。注意，父容器必须有一个位置:相对这样才能工作。
Div{位置:绝对的;上图:50%;左:50%;宽度:400 px;身高:300 px;margin-top: -150 px;/*元素高度的1/2 */margin-left: -200 px;/*元素宽度的1/2 */｝
8.简单的Web字体与谷歌字体API
通过利用CSS的优势，Web字体可以让你走出正常的Web安全字体@font-face规则。然而，目前的浏览器在实现方面并不统一@font-face．更具体地说，web浏览器支持的字体文件类型不同(希望WOFF标准能改变这一点)。
此外，你必须小心你使用的字体，因为他们中的一些可能没有授权用于网络使用。
以回避问题@font-face,谷歌字体API是来拯救你的。
下面是一个使用Cantarell字体的例子<标题>元素，利用谷歌字体API。
如果您想使用谷歌font API中的Cantarell字体，请首先在您的< >头标签如下:
使用的字体h1元素，只需使用字体类型CSS属性。
H1 {font-family:“Cantarell”， Arial，衬线字体;/*使用字体栈，以防万一。* /｝
9.防止文本元素换行
有时，如果文本刚好到达包含它的元素的宽度的末尾，就不希望它被换行到下一行。
下面是一个普通的锚文本在到达父元素宽度末尾时的工作原理:
注意，链接在文本中的空白处换行。如果我们总是希望我们的链接总是在同一行(即防止换行)呢?
简单。我们只需使用空白财产。
A{空格:nowrap;｝
现在，我们的链接不会结束。
10.垂直对齐文本
我们可以使用多种方法来水平对齐文本(例如text-align:中心或Margin: 0 auto)，但垂直对齐文本就有点麻烦了。
但是，对于单行文本，可以使用行高财产。通过设置行高属性设置为与其容器相同的高度时，它将变为垂直居中。
这是一个p元素，该元素在100x100px范围内水平居中div使用text-align:中心：
如你所见，text-align不会垂直居中。为了解决这个问题，我们可以设置行高与容器高度相同div(100 px)。
Div{宽度:100px;身高:100 px;} div p {行高:100 px;｝
注意，这里假设p元素没有空白或填充。
如果在顶部或底部有空白或填充p元素，您需要相应地补偿它们，或者只是简单地设置填充而且保证金到0，让生活更容易。
此外，当有多行文本时(即文本换行时)，这个技巧会变得麻烦，因为文本行之间会有一个空格，相当于行高价值。
轮到你分享了。
在评论中分享你自己最喜欢的CSS技巧和技巧。
