15个实用的CSS代码开发片段
jopen 11年前
CSS 概述
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
在这篇文章中我们介绍15个CSS片段，将解决许多最常用的，有时，折腾的CSS开发任务。
1. Stylish Template
• /* • Document : ${name} • Created on : ${date}, ${time} • Author : ${user} • Description: • Purpose of the stylesheet follows. • */ • • /* html5doctor.com Reset Stylesheet • v1.6.1 • Last Updated: 2010-09-17 • Author: Richard Clark - http://richclarkdesign.com 推ter: @rich_clark • */ • html,body,body div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{border:0;font-size:100%;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle} • • /* Minimal base styles • More Info: https://github.com/paulirish/html5-boilerplate/blob/362d0b7/css/style.css • */ • html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;overflow-y:scroll} • a:link{-webkit-tap-highlight-color:#FF5E99} • a:hover,a:active{outline:none} • a,a:active,a:visited{color:#607890} • a:hover{color:#036} • ul,ol{margin-left:2em} • ol{list-style-type:decimal} • nav ul,nav li{list-style:none;list-style-image:none;margin:0} • small{font-size:85%} • b,strong,th{font-weight:700} • td{vertical-align:top} • sub,sup{font-size:75%;line-height:0;position:relative} • sup{top:-.5em} • sub{bottom:-.25em} • pre{padding:15px;white-space:pre-wrap;word-wrap:break-word} • .ie6 legend,.ie7 legend{margin-left:-7px} • button,input,select,textarea{font-family:sans-serif;font-size:100%;margin:0;overflow:visible;vertical-align:baseline;width:auto} • textarea{overflow:auto;vertical-align:text-top} • label,input[type=button],input[type=submit],input[type=image],button{cursor:pointer} • input::-moz-focus-inner,button::-moz-focus-inner{border:0;padding:0} • input:invalid,textarea:invalid{-moz-box-shadow:0 0 5px red;-webkit-box-shadow:0 0 5px red;border-radius:1px;box-shadow:0 0 5px red} • .no-boxshadow input:invalid,.no-boxshadow textarea:invalid{background-color:#f0dddd} • .ie7 img{-ms-interpolation-mode:bicubic} • • /* ------------------------- Backgrounds */ • /*body {background:url("../images/im_bg.gif") left top repeat;}*/ • • /* ------------------------- Generic */ • body { • /*color:#ffffff;*/ • } • .clear {clear:both;} • img { /* Needed for mobile */ • display:block; • margin-left:auto; • margin-right:auto; • width:100%; • } • • /* ------------------------- Typography */ • strong {font-weight:bold;} • p {} • h1 {} • h2 {} • h3 {} • h4 {} • h5 {} • h6 {} • address {} • pre, code {font-family: monospace;} • • /* Links */ • a, a:visited, a:active {} • a:hover {} • • /* ------------------------- Forms */ • input {} • select {} • label {} • • /* ------------------------- Lists */ • • /* ------------------------- Layout */ • • • /* ------------------------- Popups */ • • /* ------------------------- Media Queries */ • • /* ---------------------------------------------------------------------------- */ • /* MEDIA QUERIES -------------------------------------------------------------- */ • /* ---------------------------------------------------------------------------- */ • • /** • * Print styles. • * • * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/ • */ • @media print { • * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; • -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */ • a, a:visited { color: #444 !important; text-decoration: underline; } • a[href]:after { content: " (" attr(href) ")"; } • abbr[title]:after { content: " (" attr(title) ")"; } • .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ • pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } • thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ • tr, img { page-break-inside: avoid; } • img { max-width: 100% !important; } • @page { margin: 0.5cm; } • p, h2, h3 { orphans: 3; widows: 3; } • h2, h3{ page-break-after: avoid; } • } • • /* Smartphones (portrait) ----------- */ • @media only screen • and (max-width : 320px) { • /* Styles */ • • } • • /* Smartphones (landscape) ----------- */ • @media only screen • and (min-width : 321px) • and (max-width : 480px) { • /* Styles */ • • } • • /* iPads (portrait) ----------- */ • @media only screen • and (min-width : 481px) • and (max-width : 768px) { • /* Styles */ • • } • • /* iPads (landscape) ----------- */ • @media only screen • and (min-width : 769px) • and (max-width : 1024px) { • /* Styles */ • • } • • /* Larger screens ----------- */ • @media only screen • and (min-width : 1024px) { • /* Styles */ • • }
2. Center an Image Vertically and Horizontally in a Container
1. The markup: 2. 3.</pre> <div class="wraptocenter"><img alt="..." src="..." /></div> <pre> 4. 5. The CSS: 6. 7.</pre> <style type="text/css"><!-- 8. .wraptocenter { 9. display: table-cell; 10. text-align: center; 11. vertical-align: middle; 12. width: ...; 13. height: ...; 14. } 15. .wraptocenter * { 16. vertical-align: middle; 17. } 18. /*\*//*/ 19. .wraptocenter { 20. display: block; 21. } 22. .wraptocenter span { 23. display: inline-block; 24. height: 100%; 25. width: 1px; 26. } 27. /**/ 28. --></style> <pre> 29. <!--[if lt IE 8]> <style> 30. .wraptocenter span { 31. display: inline-block; 32. height: 100%; 33. } 34. </style> <![endif]-->
3. Media Queries for All Major Devices
/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ }
4. List of Web Safe Fonts
• font-family: Arial, Helvetica, sans-serif; • font-family: 'Arial Black', Gadget, sans-serif; • font-family: 'Bookman Old Style', serif; • font-family: 'Comic Sans MS', cursive; • font-family: Courier, monospace; • font-family: 'Courier New', Courier, monospace; • font-family: Garamond, serif; • font-family: Georgia, serif; • font-family: Impact, Charcoal, sans-serif; • font-family: 'Lucida Console', Monaco, monospace; • font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; • font-family: 'MS Sans Serif', Geneva, sans-serif; • font-family: 'MS Serif', 'New York', sans-serif; • font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; • font-family: Symbol, sans-serif; • font-family: Tahoma, Geneva, sans-serif; • font-family: 'Times New Roman', Times, serif; • font-family: 'Trebuchet MS', Helvetica, sans-serif; • font-family: Verdana, Geneva, sans-serif; • font-family: Webdings, sans-serif; • font-family: Wingdings, 'Zapf Dingbats', sans-serif;
5. Pure CSS Text Gradients
1. /* CSS text gradients */ 2. h2[data-text] { 3. position: relative; 4. } 5. h2[data-text]::after { 6. content: attr(data-text); 7. z-index: 10; 8. color: #e3e3e3; 9. position: absolute; 10. top: 0; 11. left: 0; 12. -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)),
6. How to Make Bootstrap Dropdown Menu Expand on Hover
ul.nav li.dropdown:hover ul.dropdown-menu{ display: block; } /* if you want to hide the arrow */ a.menu:after, .dropdown-toggle:after { content: none; }
7. Eric Mayer CSS Reset
1. /* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 3. License: none (public domain) 4. */ 5. 6. html, body, div, span, applet, object, iframe, 7. h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8. a, abbr, acronym, address, big, cite, code, 9. del, dfn, em, img, ins, kbd, q, s, samp, 10. small, strike, strong, sub, sup, tt, var, 11. b, u, i, center, 12. dl, dt, dd, ol, ul, li, 13. fieldset, form, label, legend, 14. table, caption, tbody, tfoot, thead, tr, th, td, 15. article, aside, canvas, details, embed, 16. figure, figcaption, footer, header, hgroup, 17. menu, nav, output, ruby, section, summary, 18. time, mark, audio, video { 19. margin: 0; 20. padding: 0; 21. border: 0; 22. font-size: 100%; 23. font: inherit; 24. vertical-align: baseline; 25. } 26. /* HTML5 display-role reset for older browsers */ 27. article, aside, details, figcaption, figure, 28. footer, header, hgroup, menu, nav, section { 29. display: block; 30. } 31. body { 32. line-height: 1; 33. } 34. ol, ul { 35. list-style: none; 36. } 37. blockquote, q { 38. quotes: none; 39. } 40. blockquote:before, blockquote:after, 41. q:before, q:after { 42. content: ''; 43. content: none; 44. } 45. table { 46. border-collapse: collapse; 47. border-spacing: 0; 48. }
8. Change the Color of Dot in an Undered List
ul li { color: black; list-style-type: none; } ul li:before { color: red; float: left; margin: 0 0 0 -0.89em; font-size: 2em; content: '\2022';
9. CSS Sticky Fixed Footer
1. #footer { 2. position:fixed; 3. left:0px; 4. bottom:0px; 5. height:30px; 6. width:100%; 7. background:#999; 8. } 9. /* IE 6 */ 10. * html #footer { 11. position:absolute; 12. 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'); 13. }
10. CSS Blockquote Template
blockquote { background: #f9f9f9; border-left: 10px solid #ccc; margin: 1.5em 10px; padding: 0.5em 10px; quotes: "\201C""\201D""\2018""\2019"; } blockquote:before { color: #ccc; content: open-quote; font-size: 4em; line-height: 0.1em; margin-right: 0.25em; vertical-align: -0.4em; } blockquote p { display: inline; }
11. CSS Hooks User Submitted Posts
@charset "UTF-8"; /* User Submitted Posts - CSS Stylesheet http://perishablepress.com/user-submitted-posts/ Notes: complete list of CSS hooks for the submission form @ http://m0n.co/e This is a complete CSS skeleton of all elements and hooks in the submission form. Use what you need and then delete any empties to lighten the file. */ div#user-submitted-posts {} div#user-submitted-posts form {} div#user-submitted-posts fieldset {} div#user-submitted-posts fieldset label {} div#user-submitted-posts fieldset input {} /* excludes submit button */ div#user-submitted-posts input {} div#user-submitted-posts label {} div#user-submitted-posts textarea {} div#user-submitted-posts select {} div#user-submitted-posts option {} .usp-input {} .usp-textarea {} form#usp_form {} fieldset.usp-name {} fieldset.usp-url {} fieldset.usp-title {} fieldset.usp-tags {} fieldset.usp-category {} fieldset.usp-content {} fieldset.usp-captcha {} div#user-submitted-posts fieldset.usp-captcha input {} fieldset.usp-images {} fieldset.usp-images label {} div#user-submitted-posts input.usp-clone {} div#usp-upload-message {} div#user-submitted-image {} a#usp_add-another {} fieldset#coldform_verify {} div#usp-submit {} div#usp-error-message {} div#usp-success-message {} div.usp-input-error {} div.usp-input-error span {} div.usp_text-editor {} .usp-rich-textarea {}
12. General Media Queries
view plaincopy to clipboardprint? 1. /* Smartphones (portrait and landscape) ----------- */ 2. @media only screen 3. and (min-device-width : 320px) and (max-device-width : 480px) { 4. /* Styles */ 5. } 6. 7. /* Smartphones (landscape) ----------- */ 8. @media only screen and (min-width : 321px) { 9. /* Styles */ 10. } 11. 12. /* Smartphones (portrait) ----------- */ 13. @media only screen and (max-width : 320px) { 14. /* Styles */ 15. } 16. 17. /* iPads (portrait and landscape) ----------- */ 18. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 19. /* Styles */ 20. } 21. 22. /* iPads (landscape) ----------- */ 23. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { 24. /* Styles */ 25. } 26. 27. /* iPads (portrait) ----------- */ 28. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 29. /* Styles */ 30. } 31. 32. /* Desktops and laptops ----------- */ 33. @media only screen and (min-width : 1224px) { 34. /* Styles */ 35. } 36. 37. /* Large screens ----------- */ 38. @media only screen and (min-width : 1824px) { 39. /* Styles */ 40. } 41. 42. /* iPhone 4 ----------- */ 43. @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) { 44. /* Styles */ 45. }
13. Web Font Stacks
1. /* The Times New Roman-based serif stack: */ 2. font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif; 3. /* A modern Georgia-based serif stack:*/ 4. font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; 5. /*A more traditional Garamond-based serif stack:*/ 6. font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; 7. /*The Helvetica/Arial-based sans serif stack:*/ 8. font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; 9. /*The Verdana-based sans serif stack:*/ 10. font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif; 11. /*The Trebuchet-based sans serif stack:*/ 12. font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif; 13. /*The heavier “Impact” sans serif stack:*/ 14. font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif; 15. /*The monospace stack:*/ 16. font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace
14. Comment in CSS
body { font-size: 62.5% /* 1em = 10px */ }
15. CSS3 Mixins
1. /***** 2. SCSS CSS 3 Property Maxin v 0.1 3. 4. by Dele O 5. *******/ 6. 7. @mixin rounded($radius: 10px) { 8. border-radius: $radius; 9. -moz-border-radius: $radius; 10. -webkit-border-radius: $radius; 11. } 12. 13. 14. @mixin roundedSides($topLeft, $topRight, $bottomRight, $bottomLeft) { 15. -moz-border-radius-topleft: $topLeft; 16. -moz-border-radius-topright: $topRight; 17. -moz-border-radius-bottomright: $bottomRight; 18. -moz-border-radius-bottomleft: $bottomLeft; 19. border-top-left-radius:$topLeft; 20. border-top-right-radius: $topRight; 21. border-bottom-right-radius: $bottomRight; 22. border-bottom-left-radius: $bottomLeft; 23. } 24. 25. 26. @mixin shadow( $off-y, $off-x, $blur, $color){ 27. -moz-box-shadow: $off-y $off-x $blur $color; /* FF3.5+ */ 28. -webkit-box-shadow: $off-y $off-x $blur $color; /* Saf3.0+, Chrome */ 29. box-shadow: $off-y $off-x $blur $color; /* Opera 10.5, IE9 */ 30. } 31. 32. 33. 34. @mixin gradient($baseColor, $toColor){ 35. background-color:$baseColor; 36. background-image: -moz-linear-gradient(top, $baseColor, $toColor); /* FF3.6 */ 37. background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, $baseColor),color-stop(1, $toColor)); /* Saf4+, Chrome */ 38. background-image: linear-gradient(top,$baseColor, $toColor); 39. filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='$baseColor', EndColorStr='$toColor'); /* IE6�IE9 */ 40. } 41. 42. 43. @mixin trasition($property, $duration:0.3s, $function: ease-out){ 44. -moz-transition: $property $durations $function; /* FF3.7+ */ 45. -o-transition: $property $durations $function; /* Opera 10.5 */ 46. -webkit-transition: $property $durations $function; /* Saf3.2+, Chrome */ 47. transition: $property $durations $function; 48. } 49. 50. 51. @mixin transform($scale, $rotate, $trans-x, $trans-y, $skew-x, $skew-y){ 52. -moz-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y); 53. -webkit-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y); 54. -o-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y); 55. -ms-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y); 56. transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y); 57. 58. }