7个不能遗忘的CSS样式

发布于 大漠

今天要给大家介绍七个CSS样式片段,我认为这几个片段对我们项目的制作帮助还是蛮大的,如果你认真看完这篇教程后,我想你会喜欢这几个CSS样式,而且我相信你会马上运用到你即将要制作的下一个项目中,或者说会马上运用到你现在制作的项目中。在具体介绍之前先要告诉大家,这个几CSS样式片段是David WalshPaul IrishHTML5 Boilerplate项目中挖掘出来的。如果大家看到要是对HTML5 Boilerplate感兴趣的话,你可以直接从GitHub下载HTML5 Boilerplate整个项目,阅读其源代码。因为Paul IrishHTML5 Boilerplate提供了一套非常有用的CSS、JavaScript、图像和HTML文件,可以帮助您很好的了解HTML5的Web应用程序。

下面我主要在这篇教程中给大定呈现的是David Walsh整理出来的七个很有价值的CSS样式片段,至少我认为是很有价值,当然我也希望您看后也会说很有价值。啰嗦话不多说了,直奔主题吧。

一、HTML标签

html标签起什么作用,我就不多说了,大家在清楚不过了。不过我要说的是,很多开发人员都不怎么设置html标签的样式,但html标签其实又是一个重点之一,所以我建议在你的项目中考虑在html标签中设置下面的样式:

		html {
			font-size: 100%; /*==用来防止IE和Opera浏览器下的Bug==*/
			overflow-x: hidden;/*==隐藏水平滚动条==*/
			overflow-y:scroll;/*==保证所有浏览器下都显示垂直滚动条,防止没有滚动条的页面有移动效果==*/
			-webkit-tap-highlight-color: transparent;/*==Add vertical scrollbar  Keeps page centered in all browsers regardless of content height==*/
			/*==Define maximum text display as 100% to document Corrects text displayed oddly after orientation change in handheld browsers ==*/
			-webkit-text-size-adjust: 100%;
			-ms-text-size-adjust: 100%;
			height: 100%;/*==在IE下body的百分高度需要在html设置此值==*/
		}
	

这个CSS片段具体解释大家可以参考注释部分,其亮点之处是用来控制浏览器的滚动条,特别是垂直方向的滚动条,在我们平时的Web页面制作中时常碰到当一个页面不够一屏显示时会出显页面移效果,欲解决这个问题,看上面的代码。另外一个就是Webkit内核浏览器中Google Chrome不支持12px以下的字体,此处我们一起解决。或许这个技巧大家已经运用到项目中来了:)。

二、::selection

::selection他是CSS3的一个产物,我在《CSS ::Selection》专门介绍过::selection的使用方法(David Walsh也有着重介绍CSS Selection Styling),但这次我还是需要重点在指出一回:

		::-moz-selection {
			background: #fe57a1;
			color: #fff;
			text-shadow: none;
		}
		::selection{
			background: #fe57a1;
			color: #fff;
			text-shadow: none;
		}
	

这个技巧很有特色,它可以帮你改变你选择中元素的文本的高亮背景和前景色,让你的网站具有一个独一无二高亮色,上面代码中的颜色值可以设置成你自己喜欢的色值。不过这种方法只适合现代浏览器,在IE6-8下是没有效果的,具体原因不用我在说了。

三、img -ms-interpolation-mode: bicubic;

图片的缩放在IE7以及IE6下是件很恐怖的事情,将严重影响您的图片质量,欲解决,记得在img标签上加上下面的代码:

		img {
			-ms-interpolation-mode: bicubic;
		}
	

这是一种很神奇的技巧,我早在《浏览器兼容之旅的第四站:IE常见Bug——part2》一文中有提到过,并且将其列为IE的bug。而且CSS Tricks的《IE Fix: Bicubic Scaling for Images》和Devthought中《Tip: High quality CSS thumbnails in IE7》都有进行过详细介绍。

四、显示隐藏元素

在Web中时常用到图片代替文字,特别在logo用图片来代替。换句话说就是:视觉隐藏的文字,同时还允许屏幕阅读器读取它,是非常重要的。问题是,我已经看到了很多种不同的方法实现方法,这样做的,很难知道哪一种方式比另一种更好。 HTML5的样板的建议是:

		/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
	.visuallyhidden { 
		border: 0; 
		clip: rect(0 0 0 0); 
		height: 1px; 
		margin: -1px; 
		overflow: hidden; 
		padding: 0; 
		position: absolute; 
		width: 1px; 
	}

	/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
	.visuallyhidden.focusable:active, 
	.visuallyhidden.focusable:focus { 
		clip: auto; 
		height: auto; 
		margin: 0; 
		overflow: visible; 
		position: static; 
		width: auto; 
	}
	

这种解决方法最早是由Jonathan Snook提出来的,如果大家感兴趣的话可以阅读Jonathan Snook的《Hiding Content for Accessibility》一文,我想你会受益非浅。

五、svg:not(:root)

IE9有一个最大的亮点,就是支持SVG。当然使用时大家要注意一个是:

		svg:not(:root){overflow:hidden;}
	

六、@media print img max-width

即使你不希望使用任何screen的媒体特性,但是Paul IrishHTML5 Boilerplate的打印样式还是值得大家学习和借鉴的,我想大家和我一样,当在设置打印样式时常不会考虑图片的样式,最起码我自己是没有考虑到的:

		@media print {
			img { max-width: 100% !important; }
		}
	

上面代码确保你的图片不会溢出你的容器设置。

七、@media print widows

在屏幕和纸上window内容是好难看的,神奇的是只需要在段落和标题标签上这样设置就解决了

		@media print {
			p, h2, h3 { orphans: 3; widows: 3; }
		}
	

这两种小技巧是有关于“媒体特性”上的应用,有关于更多的媒体应用大家可以阅读本站前面的教程《CSS3 Media Queries》。

正如你可以看到,Paul IrishHTML5 Boilerplate是一个CSS的好东西,你可以随时放入任何新的或现有的项目中。即使你不想使用Paul IrishHTML5 Boilerplate内包含的任何文件,但里面仍然有很多强大的CSS技巧供你使用,你可以考虑是否使用上面所说的CSS的技巧。在结束这次教程之前再次感谢Paul Irish给我们带来这么好的模板文件——HTML5 Boilerplate;同时也要非常感谢David WalshPaul IrishHTML5 Boilerplate整理出这么多个适合的CSS技巧——《Style Scavenger: 7 CSS Snippets to Borrow from HTML5 Boilerplate》。如果你和我一样喜欢这些技巧,那就早点使用到你的项目中吧,如果你有更好的CSS技巧和我们一起分享,可以随时在下面的评论中给我们留言。

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

Zoom With Nike