15个CSS技巧和窍门

特别声明:如果您喜欢小站的内容,可以点击年卡¥199.00元(原价: ¥598元)季卡¥78.00元(原价: ¥168元)月卡¥28.00元(原价: ¥68元)进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

前面我也发了几节内容收集了一些CSS的小技巧,比如说《20个CSS实战技巧》、《7个不能遗忘的CSS样式》和《13个CSS技巧》等,今天我又搜集了15个CSS的小技巧和窍门,或许和前面的部分有累同,但希望这些小技巧能帮您在平时的工作中带来些许的帮助。

一、避免CSS Hack使用条件样式

css样式是不是很难学习呢?其实并不是这样的,真正难处理的是保证所有浏览器的一致性,可是在平时制作中,我们不免碰到一些兼容的问题。大家提意使用CSS的Hack来处理。我持有一种不同意见,我们应该避免使用CSS的Hack,除非没有其他办法解决的情况之下。因为,我们将无法知道这些CSS的Hack将什么时候不能使用。我认为最常用的方法应该使用条件样式来处理这些兼容的问题,我们可以使用if语句来对不同的版本使用不同的样式:

		<!--[if gt IE 7]>
	    <link rel="stylesheet" type="text/css" href="ie8-and-up.css">
		<![endif]-->
	

上面我只是展示了其中一种写法而以,具体有关于如何创建所需的条件样式,大家可以点击本站的《浏览器兼容之旅的第一站:如何创建条件样式》。

二、使用群组选择器

如果我们多个元素使用的样式完全相同,或者部分相同,我们就可以采用群组选择器来操作。这将是一个很好的办法,可以节省几个字节,也减少了你的编辑工作量,如:

不建议采用的写法

		h1 {
			font-family:arial;
			margin:0.5em 0;
			padding:0;
		}
		
		h2 {
			font-family:arial;
			margin:0.5em 0;
			padding:0;
		}
		
		h3 {
			font-family:arial;
			margin:0.5em 0;
			padding:0;
		}		
	

建议采用的方法:

		h1,h2, h3 {
		font-family:arial;
		margin:0.5em 0;
		padding:0; 
		}
	

有关于这方面的介绍大家可以点击W3CCSS 选择器

三、元素居中

有关于元素的居中问题,我们一起讨论过很多次了。但很多同学常在IE下碰到不能水平居中的问题,这里我给出一个技巧,这样你将不在会为这个不能居中而烦了:

HTML Markup

		<body>
			<div class="container">居中的内容</div>
		</body>
	

CSS Code

		body {
		    text-align:center;  /* for ie   */
		}

		.container {
		    width:800px;
		    margin:0 auto; 
		    text-align:left;/*重置内容左对齐*/
		}
	

现代浏览器居中很简单,给容器定一个固定宽度,并将左右margin都设置成“auto”就OK了,这里我们针对IE浏览器的怪异模式在“body”中设置一个文本中间对齐,然后在容器中重新设置回来文本左对齐。有关于居中的问题,大家还可以参阅《CSS制作水平垂直居中对齐》了解有关于元素的水平垂直居中对齐的几种制作方法,大家要是感兴趣还可以阅读《CSS制作图片水平垂直居中》学习一下有关于图片的水平垂直居中的制作方法。

四、CSS定位

我这里所说的CSS定位是有关于CSS的相对定位(relative)和绝对定位(absolute)之间的关系。前段时间也有好几位网友向我问起他们的关系,其实简单一点来说:相对定位的元素是元素相对于其本身定位,同时他会占有元素以前所在位置的空间;而绝对定位是会完全脱离文档流,并且其定位是相对于离元素最近的祖元素是否设置了相对定位关系。下面是一个简单的例子:#box在容器#container中,而且#box是相对于#container进行绝对定位,并且距容器左边是200px ,顶部是50px:

HTML Markup

		<div id="container">
			<div id="box">box</div>
		</div>
	

CSS Code

		#container {
		    position: relative;
		    width:500; height:300;
		}

		#box {
		    position: absolute;
		    left: 200px;
		    top: 50px;
		}
	

如果大家对这个还不是了解的话,我建议你仔细阅读一下《Document Flow and CSS Positioning》、《CSS Layout》和《Absolute vs. Relative - Explaining CSS Positioning》等教程。

五、文本转换

这个技巧可以说不是技巧,但有时使用是非常方便的,这个所谓的文本转换其实就是CSS中的text-transform属性,他具有三个值:uppercase(将所有字母转换为大写字母)、capitalize(所有单词第一个字母大写)、lowercase(所有字母小写),具体应用如下所示:

		h1 {
		    text-transform:uppercase;
		}
		h2 {
		    text-transform:capitalize;
		}
		p {
		    text-transform:lowercase;
		}
	

如果你还没有真正使用过这个属性,你不仿现在动手试试,想更了这个属性的使用,你可以点击阅读W3chools.comtext-transform

六、删除链接和文本输入框高亮下的这外边框

这个问题常发生在链接和文本输入框止面,你点击后会有一个点划线状的四边形,特别是在Mac机下面,有时我们使用图片替换链接时,采用了“-999em”,那么你点击链接,会有一个长长的边框至浏览器边上,这样直接影响了站点的美观,那么要解决这样的问题,我们需要使用outline来设置:

		a, input {
		    outline:none;
		}
	

有关于a元素中是否设置“outline:none”适当,大家可以点击《a { outline: none; }—— Don't do it!》,里面进行过详细的讨论,大家也可以点击Chris Coyier的《Removing The Dotted Outline》,告诉我们如何移出这个虚线框的方法。

七、隐藏文本内容

这个隐藏文本常用在图片替代文字的时候,不过现在做seo优化也使用这种方法来实现搜索引擎对关键字的寻找,我认为比较好的方法是使用“text-indent”来实现:

		a {
		    text-indent:-999em;
		    outline:none;
		    background: url(button.jpg) no-repeat 0 0;
		    width:100px; 
				height:50px;
		    display:block;
		}
	

八、保持一致的sup和sub

常常使用sup和sub时,在各浏览器中会有不一致的渲染效果,今天我发现了一个比较好的处理方法:

		sup,
		sub {
		    height: 0;
		    line-height: 1;
		    vertical-align: baseline;
		    _vertical-align: bottom;
		    position: relative;

		}

		sup {
		    bottom: 1ex;
		}

		sub {
		    top: .5ex;
		}
	

有关于具体的解说,大家可以点击Keep consistent line spacing with sup and sub

九、设置跨浏览器的透明问题

大家平时都有制作元素透明的问题,常用的是opacity方法:

		.opacity { 
		    filter:alpha(opacity=50);    /* ie  */
		    -moz-opacity:0.5;    /* old mozilla browser like netscape  */
		    -khtml-opacity: 0.5;    /* for really really old safari */ 
		    opacity: 0.5;    /* css standard, currently it works in most modern browsers like firefox,  */
		}
	

可是这种方法会造成其子元素也跟随变成透明,随后css3提出一个rgba:

		.rgba{
			background: rgba(255,255,255,0.5);
		}
	

可这种方法又不能实现跨浏览器的支持,今天在Sofish大神那学习了一种跨浏览器的兼容方法:

		/*
		 * filter 渐变滤镜详细用法,参见这里
		 * StartColorStr 和 EndColorStr:
		 *    #4c000000 是 30% 透明度的 #000000 的意思
		 *    组成: # + 透明度 + 颜色
		 *    算法: Math.floor(0.6 * 255).toString(16);
		 */
		.rgba{
		    background:rgba(0, 0, 0, 0.3);
		    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#4c000000', EndColorStr='#4c000000');
		}
	

其实这种方法就是rgba的扩展,早在《CSS3 RGBA》一文中我也有提到过,只是没有Sofish大神那样理解透,如果你想了解的更清楚,就点击Sofish大神写的《背景半透明最佳实践》教程。

十、IE6下png透明问题

有关于IE6下的PNG透明问题,都是老生常谈的问题了,以前在《Drupal7中解决IE6的png透明问题》一文中介绍了使用DD_belatedPNG来解决透明问题,但时常碰到一些Js冲突问题,今天我在给大家介绍一种另外的解决办法:

		.png_hack{
		  background-image: url(../img/the_image.png) !important;
		  background-image: none;
		  filter: none !important;
		  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/the_image.png');
		}
	

有关这方面的具体介绍,大家感兴趣可以点击Twinhelix.comIE PNG Fix 2.0 Alpha 4

十一、防止换行

这是一个CSS的小技巧,或许有些同学不知道,其实他是很强大的,能让文本在一行中显示,不换行:

		element {
		   white-space: nowrap;
		   word-break: keep-all;
		 }
	

相关介绍可以参阅本站的《CSS3 Word-wrap》或者quirksmode介绿的《white-space

十二、CSS制作的3D的Button效果

使用CSS制作3D效果的button,主要依靠的是button的边框色的配置:

		a {
		display: block;
		border: 1px solid;
		border-color: #aaa #000 #000 #aaa;
		width: 8em;
		background: #fc0;
		}

		a:hover	{
		position: relative;
		top: 1px;
		left: 1px;
		border-color: #000 #aaa #aaa #000;
		}
	

十三、链接的顺序

链接的样式设置,其顺序是非常的关键,对于新同学来说,可能常碰到,怎么没有效果呢,其实你只要遵循下面的顺序,一切皆有了:

		a:link {
		    color: #000;
		    text-decoration: underline
		}
		a:visited {
		    color: #666;
		}
		a:hover {
		    color: #333;
		    text-decoration: none;
		}
		a:active {
		    color: #333;
		    text-decoration: none;
		}
	

其实这有一个法则,大家都称之为“爱恨法则”——LoVe——HAte也就是:Link——Visited——Hover——active。详细一点的介绍大家可以参考《CSS Links》和《Link Styles》。

十四、CSS的简写

这一点主要是罗列了一些CSS中能简写的规则样式:

		/* MARGIN */
		h1 {margin:1em 0 2em 0.5em;}

		h1 {margin-top:1em;
		    margin-right:0;
		    margin-bottom:2em;
		    margin-left:0.5em;
		}

		/* BORDER */
		h1 {border:1px solid #000;}

		h1 {border-width:1px;
		    border-style:solid;
		    border-color:#000;
		}

		/* BORDER WIDTH */
		h1 {border-width:1px 2px 3px 4px;}

		h1 {border-top-width:1px;
		    border-right-width:2px;
		    border-bottom-width:3px;
		    border-left-width:4px;
		}

		/* BACKGROUND */
		div {background:#f00 url(background.gif) no-repeat fixed 0 0;}

		div {background-color:#f00;
		     background-image:url(background.gif);
		     background-repeat:no-repeat;
		     background-attachment:fixed;
		     background-position:0 0;
		}

		/* FONT */
		h1 {font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;}

		h1 {font-style:italic;
		    font-variant:small-caps;
		    font-weight:bold;
		    font-size:1em;
		    line-height:140%;
		    font-family:"Lucida Grande",sans-serif;
		}

		/* LIST STYLE */
		ul {list-style:square inside url(image.gif);}

		ul {list-style-type:square;
		    list-style-position:inside;
		    list-style-image:url(image.gif);
		}

		/* OUTLINE */
		h1 {outline:#f00 solid 2px;}

		h1 {outline-color:#f00;
		    outline-style:solid;
		    outline-width:2px;
		}
	

这些对于一个前端人员来说都是最基础的了,我这里罗列出来是方便新手学习,希望对他们有一定的帮助,而且dustindiaz也提供了一份《CSS Shorthand Guide》,想了解的同学就去看看吧。

十五、打印文档的强制作分页符

最后一点但并不是最重要的一点,我想给大家说的是打印样式中如何设置强制分页符,这个使用相对来说,但要创建一个好的打印样式,有时还是少不了他们的:

		h1{
		    page-break-before:always;
		}

		h2{
		    page-break-after:avoid;
		}

		h2{
		    page-break-inside:always;
		}
	

想了解更多这方面的知识,大家可以点击W3C CSS Print Reference或者CSS3 stardard

今天主要是和大家一起学习了一些CSS的小技巧和窍门,其中有很多是很基础的东西,也有很多是大有常用到的知识,我主要把他们罗列到一起方便大家的查找和学习,希望对大家有所帮助,如果您有一些CSS的小技巧或小窍门,记得与大家一起分享。

如需转载烦请注明出处:W3CPLUS

Air Jordan XXXI Low

如需转载,烦请注明出处:https://www.w3cplus.com/blog/181.html

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

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