20个实用的CSS技巧代码

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

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

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

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

			h1 {
				text-indent:-9999px;
				margin:0 auto;
				width:400px;
				height:100px;
				background:transparent url("images/logo.jpg") no-repeat scroll;
			}
		

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

扩展阅读:

  1. 十种图片替换文本CSS方法
  2. Fahrner Image Replacement
  3. Revised Image Replacement
  4. A new image replacement technique
  5. Dynamic Text Replacement
  6. Using background-image to replace text
  7. CSS Hack: text-indent: -10000px;
  8. CSS text-indent: An Excellent Trick To Style Your HTML Form

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

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

			a[href^="http:"] {
					display:inline-block;
					padding-right:14px;
					background:transparent url(/Images/ExternalLink.gif) center right no-repeat;
			}
			a[href^="mailto:"] {
					display:inline-block;
					padding-left:20px;
					line-height:18px;
					background:transparent url(/Images/MailTo.gif) center left no-repeat;
			}
			a[href$='.pdf'] {
					display:inline-block;
					padding-left:20px;
					line-height:18px;
					background:transparent url(/Images/PDFIcon.gif) center left no-repeat;
			}
			a[href$='.swf'], a[href$='.fla'], a[href$='.swd'] {
					display:inline-block;
					padding-left:20px;
					line-height:18px;
					background:transparent url(/Images/FlashIcon.gif) center left no-repeat;
			}
			a[href$='.xls'], a[href$='.csv'], a[href$='.xlt'], a[href$='.xlw'] {
					display:inline-block;
					padding-left:20px;
					line-height:18px;
					background:transparent url(/Images/ExcelIcon.gif) center left no-repeat;
			}
			a[href$='.ppt'], a[href$='.pps'] {
					display:inline-block;
					padding-left:20px;
					line-height:18px;
					background:transparent url(/Images/PowerPointIcon.gif) center left no-repeat;
			}
			a[href$='.doc'], a[href$='.rtf'], a[href$='.txt'], a[href$='.wps'] {
					display:inline-block;
					padding-left:20px;
					line-height:18px;
					background:transparent url(/Images/WordDocIcon.gif) center left no-repeat;
			}
			a[href$='.zip'], a[href$='.gzip'], a[href$='.rar'] {
					display:inline-block;
					padding-left:20px;
					line-height:18px;
					background:transparent url(/Images/ZIPIcon.gif) center left no-repeat;
			}
		

扩展阅读:

  1. 八个制作Linking(链接)的技巧
  2. Auto-matic Link Icons
  3. CSS 3 attribute selectors

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

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

			textarea{
				overflow:auto;
			}	
		

扩展阅读:

  1. Remove Scrollbar from Textarea in IE
  2. CSS Remove Textarea Scrollbar

四、段落首字下沉

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

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

扩展阅读:

  1. CSS Drop Cap Effect
  2. Drop Caps
  3. Drop Caps with CSS
  4. Creating drop caps using css
  5. CSS Drop Caps

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

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

		.transparent {
      zoom: 1;
      filter: alpha(opacity=50);
      opacity: 0.5;
		}
	

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

		.transparent {
			/* Fallback for web browsers that doesn't support RGBa */
			background: rgb(0, 0, 0);
			/* RGBa with 0.6 opacity */
			background: rgba(0, 0, 0, 0.6);
			/* For IE 5.5 - 7*/
			filter:progid:DXImageTransform.Microsoft.g
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css/20-incredibly-useful-CSS-snippets-for-developers

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部