10个css常用技巧

1、H1-H5默认样式

h1,h2,h3,h4,h5{ color: #005a9c;}h1{ font-size: 2.6em; line-height: 2.45em;}h2{ font-size: 2.1em; line-height: 1.9em;}h3{ font-size: 1.8em; line-height: 1.65em;}h4{ font-size: 1.65em; line-height: 1.4em;}h5{ font-size: 1.4em; line-height: 1.25em;}

2、CSS3对话气泡

.chat-bubble { background-color: #ededed; border: 2px solid #666; font-size: 35px; line-height: 1.3em; margin: 10px auto; padding: 10px; position: relative; text-align: center; width: 300px; -moz-border-radius: 20px; -webkit-border-radius: 20px; -moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px #888; font-family: 'Bangers', arial, serif; }.chat-bubble-arrow-border { border-color: #666 transparent transparent transparent; border-style: solid; border-width: 20px; height: 0; width: 0; position: absolute; bottom: -42px; left: 30px;}.chat-bubble-arrow { border-color: #ededed transparent transparent transparent; border-style: solid; border-width: 20px; height: 0; width: 0; position: absolute; bottom: -39px; left: 30px;}

3、在可点击的项目上强制手型

a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer { cursor: pointer;}

4、强制换行

pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */}

5、基于文件类型的链接样式

/* external links */a[href^='http://'] { padding-right: 13px; background: url('external.gif') no-repeat center right;}/* emails */a[href^='mailto:'] { padding-right: 20px; background: url('email.png') no-repeat center right;}/* pdfs */a[href$='.pdf'] { padding-right: 18px; background: url('acrobat.png') no-repeat center right;}

6、CSS3 鲜艳的输入

input[type=text], textarea { -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none; padding: 3px 0px 3px 3px; margin: 5px 1px 3px 0px; border: 1px solid #ddd;}input[type=text]:focus, textarea:focus { box-shadow: 0 0 5px rgba(81, 203, 238, 1); padding: 3px 0px 3px 3px; margin: 5px 1px 3px 0px; border: 1px solid rgba(81, 203, 238, 1);}

7、跨浏览器设置最小高度

#container { min-height: 550px; height: auto !important; height: 550px;}

8、CSS固定页脚

#footer { position: fixed; left: 0px; bottom: 0px; height: 30px; width: 100%; background: #444;}/* IE 6 */* html #footer { position: absolute; top: expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');}

9、CSS3 列文本

#columns-3 { text-align: justify; -moz-column-count: 3; -moz-column-gap: 12px; -moz-column-rule: 1px solid #c4c8cc; -webkit-column-count: 3; -webkit-column-gap: 12px; -webkit-column-rule: 1px solid #c4c8cc;}

10、固定宽度的居中布局

#page-wrap { width: 800px; margin: 0 auto;}