15個實用的CSS代碼開發片段
CSS 概述
- CSS 指層疊樣式表 (Cascading Style Sheets)
- 樣式定義如何顯示 HTML 元素
- 樣式通常存儲在樣式表中
- 把樣式添加到 HTML 4.0 中，是為了解決內容與表現分離的問題
- 外部樣式表可以極大提高工作效率
- 外部樣式表通常存儲在 CSS 文件中
- 多個樣式定義可層疊為一 </ul>
在這篇文章中我們介紹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'); /* IE6a??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. }
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！