10个节约开发时间的CSS技巧

《10个节约开发时间的CSS技巧》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、CSS已经成为网页前段设计一个非常重要的部分，由于写CSS时需要考虑的问题非常多，老手们创建新页面是通常会沿用以前的CSS框架。但是新手没有自己的框架，这篇文章可以给新手们一些启示。1.简单的纯CSSTooltip通过这些代码，你可以做出简单的Tooltip。这是CSS代码：1234567891011121314151617a:hover{background:#ffffff;/*要兼容IE6的话必须添加背景色*/text-decoration:none;}a.tooltipspan{display:none;padding:2px3px;margin-left:8px;width:

2、130px;}a.tooltip:hoverspan{display:inline;position:absolute;background:#ffffff;border:1pxsolid#cccccc;color:#6c6c6c;}HTML代码如下：1EasyTooltipThisisaExamplebyimbolo.com..效果如图。2.重设基本样式为了统一不同浏览器对各种HTML标签的默认样式的渲染，我们必须从新定义各种标签的样式，这样能对以后的开发带来方便。重新定义各种HTML标签只需要在

3、CSS的开头加入以下代码。html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td

4、{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:none;} /*元素获得焦点时的样式!*/:focus{outline:0;} /*特殊文本的样式!*/ins{text-de

5、coration:none;}del{text-decoration:line-through;} /*细线表格样式*/table{border-collapse:collapse;CSS已经成为网页前段设计一个非常重要的部分，由于写CSS时需要考虑的问题非常多，老手们创建新页面是通常会沿用以前的CSS框架。但是新手没有自己的框架，这篇文章可以给新手们一些启示。1.简单的纯CSSTooltip通过这些代码，你可以做出简单的Tooltip。这是CSS代码：1234567891011121314151617a:hover{background:#ffffff;/*要兼容IE6的话必须添加

6、背景色*/text-decoration:none;}a.tooltipspan{display:none;padding:2px3px;margin-left:8px;width:130px;}a.tooltip:hoverspan{display:inline;position:absolute;background:#ffffff;border:1pxsolid#cccccc;color:#6c6c6c;}HTML代码如下：1EasyTooltipThisisaExamplebyimbolo.com.

7、.效果如图。2.重设基本样式为了统一不同浏览器对各种HTML标签的默认样式的渲染，我们必须从新定义各种标签的样式，这样能对以后的开发带来方便。重新定义各种HTML标签只需要在CSS的开头加入以下代码。html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,fon