轩枫阁

首页 / Web前端 / CSS / 20个实用的CSS技巧代码

20个实用的CSS技巧代码

大家非常的清楚CSS是我们Web制作中不可或缺的一部分。HTML提供了Web制作的结构,但他不能让我们实现美丽的页面制作,此时我们需要CSS的帮助。CSS虽然能帮我们完善Web制作的效果,但其在不同的浏览器下是有不可预知的效果,为了让你的CSS能解决这些不一致下,今天给大家介绍25个CSS技巧代码,我相信这些对你肯定有很大的作用。

一、使用text-indent来隐藏文本

这个常用在图片替换文本中,最常见的就是使用使用图片来替换Logo,这个是非常有用的,使用“text-indent”我们可以达到图片替换文本的效果,而且方便搜索引擎的优化,还能支持阅读器阅读网页内容:

当然,这个只是使用“text-indent”替换文本的一种效果,其实他还有更多的方法。

二、根据文件格式设置链接图标

这个技巧主要是针对用户体验,让用户能很清楚点击的链接是有关于什么方面的内容,比如说,点击某个链接会到跳到站外。换句话说使用属性选择器器,给不同的链接设置不同的图标,让用户很轻松的明白相应的链接是有关于什么方面的内容:

三、在IE浏览器中删除textarea的滚动条

IE浏览器中textarea默认就有滚动条出现,为了达到所有浏览器默认下一致的效果,其实我们可以使用代码让他达到一致的效果:

四、段落首字下沉

有杂志排版中我们常看到第一个段落的首字下沉的效果,其实这种效果实现是相当的容易:

五、所有浏览器下的CSS透明度

元素透明度时常是个恼人的问题,下面这种方式可以实现所有浏览器下的透明度设置:

但是使用opacity会影响其后代元素的透明度,我们可以考虑使用:

 

六、Reset Css

Eric Meyer的重置CSS几乎已经成为标准,用来重置浏览器的默认样式:

但这样的重置样式并非适合每一个人,我就在此基础上精减了部分代码,因为我发现我们有很多标签是不怎么使用的:

 

七、图片预加载

图片预加载有时是非常有用的,这样当某个元素需要时,他就已经被加载了,此时就不会有任何延误或闪烁的现像:

八、基本的CSS Sprite按钮

CSS Sprite我想大家一定是非常熟悉,我们时常在按钮或链接中使用CSS Sprites,用来提搞用户的体验。比如说,我们有一个按钮,当用户鼠标在按钮上时需要显示另一种背景,那么我们就可以使用这样的技术:

九、Google Font API

Google Font给我们提供一个新的字体设置:

十、浏览器的专用hack

浏览器的兼容问题向来都是很烦的事情,特别是在IE下的兼容问题。但有时我们为了达到一致的效果,不得不使用浏览器的兼容:

 

十一、固定页脚

固定页脚在屏幕的底部,在现代浏览器来说是一件非常容易的事情,但是在IE6下还是需要特殊的处理:

十二、翻转图片

翻转图像随着CSS3的transform越来越实用,不需要重新加载图片,就可以实现一个图片的旋转。常见的是一个三角型效果,我们想让他在不同状态展示不同的风格:

十三、clearfix

clearfix主要是使用他来清除浮动,只需要添加这个类名无需加上任何HTML标记,就可以达到清除浮动的效果:

十四、圆角

随着CSS3的属性的出现,我们制作圆角效果就不需要在像以前那样的辛苦了,可以使用CSS3的border-radius来实现,只是在IE-6-8下无法实现,我们来看现代浏览器下如何制作圆角:

十五、!important

!important有时可以帮我们做很多事,他可以覆盖任何相同的样式,换句话说他可以改为样式的权重:

 

十六、@font-face

@font-face也是CSS3的属性之一,他能在所有浏览器下运行。最大的作用就是让用户没有字体的浏览下也能支持网页字体,具体使用:

十七、页面水平居中

如何使一个网站的页面水平居中显示,我想这个不用我说大家也知道,因为大家肯定使用过多次了。

十八、最小高度min-height

在IE6浏览器下是不支持最小高度这个属性的,为了解决这个问题,我们可以使用下面这样的代码来处理:

十九、垂直居中

水平居中处理起来相当的简单的,但是垂直居中处理起来还是相当的烦,特别是要兼容IE的浏览器情况下:

 

二十、::selection

有很多朋友肯定不知道这个属性的作用。它可以改变选择的文本的背景色和前景色,突出你的浏览器中的选择文本效果:

 

转载自:W3CPLUS

本文标题:20个实用的CSS技巧代码 - 轩枫阁

转载请务必注明出处,欢迎分享

如果觉得我的文章对您有用,请随意打赏
赞  赏
赞赏作者 轩枫-ivan
¥ 6.66
换个金额 使用微信扫一扫赞赏
  • 6.66
  • 8.88
  • 16.8
  • 2.33
  • 52.0
  • 20.0
  • 自定义
  • 10.0
425/453
427/453

相关文章

文章评论

  • 非常感谢啊!

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]