高效CSS.pdf

高效的 可维护的, 组件化的 【译】 你对CSS了解多少? “ 如何写出更加高效 的CSS呢? ” 让我们来看看 4个关键点 高效的CSS 可维护的CSS 组件化的CSS hack-free CSS 书写高效CSS 使用外联样式替代行间 样式或者内嵌样式. 不推荐使用行间样式:: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN /TR/html4/strict.dtd html lang=en head meta http-equiv=content-type content=text titlePage title/title /head body p style=color: red ... /p /body /html 不推荐使用内嵌样式:: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN /TR/html4/strict.dtd html lang=en head meta http-equiv=content-type content=text titlePage title/title style type=text/css media=screen p { color: red; } /style /head body ... /body /html 推荐使用外联样式:: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN /TR/html4/strict.dtd html lang=en head meta http-equiv=content-type content=text titlePage title/title link rel=stylesheet href=name.css type=text/css media=screen / /head body ... /body /html 为了兼容老版本的浏览器，建议使 用link引入外部样式表的方来代替 @import导入样式的方式. 译者注： @import是CSS2.1提出的所以老的浏览器不支持，点击查看 @import的兼容性。@import和link在使用上会有一些区别， 利用二者之间的差异，可以在实际运用中进行权衡。 关于@import和link方式的比较有几篇文章可以拓展阅读： @import vs link、don’t use @import 、 Flash of Unstyled Content (FOUC) . 不推荐@import导入方式:: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN /TR/html4/strict.dtd html lang=en head meta http-equiv=content-type content=text titlePage title/title style type=text/css media=screen @import url(styles.css); /style /head body ... /body /html 推荐引入外部样式表方式:: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01/