A very practical tutorial on code snippet methods for CSS
This article introduces the "very practical CSS code snippet method tutorial" related knowledge, in the actual case operation process, many people will encounter such a dilemma, then let the editor lead you to learn how to deal with these situations! I hope you can read it carefully and be able to achieve something!
CSS reset
This is the basic and common CSS code snippet for CSS browser reset
Html, body, div, span, applet, object, iframe, h2, h3, h4, h5, h6, h7, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, 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, article, aside, canvas, details, embed Figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0 Padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline: none;-webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;} html {height: 101%;} body {font-size: 62.5%; line-height: 1 Font-family: Arial, Tahoma, sans-serif;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;} ol, ul {list-style: none;} blockquote, Q {quotes: none;} blockquote:before, blockquote:after, q:before, q:after {content:'; content: none;} strong {font-weight: bold } table {border-collapse: collapse; border-spacing: 0;} img {border: 0; max-width: 100%;} p {font-size: 1.2em; line-height: 1.0mm; color: # 333;}
Cross-browser transparency settin
{- ms-filter: "progid:DXImageTransform.Microsoft.Alpha (Opacity=50)"; / * IE 8 * / filter: alpha (opacity=50); / * IE 5-7 * /-moz-opacity: 0.5 Netscape * /-khtml-opacity: 0.5 Netscape * / opacity: 0.5 * Good browsers * /}
Regular media query
/ * Smartphones (portrait and landscape)-* / @ media only screen and (min-device-width: 320px) and (max-device-width: 480px) {} / * Smartphones (landscape)-* / @ media only screen and (min-width: 321px) {} / * Smartphones (portrait)-* / @ media Only screen and (max-width: 320px) {} / * iPads (portrait and landscape)-* / @ media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {} / * iPads (landscape)-* / @ media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and ( Orientation: landscape) {} / * iPads (portrait)-* / @ media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {} / * Desktops and laptops-* / @ media only screen and (min-width: 1224px) {} / * Large screens- -- * / @ media only screen and (min-width: 1824px) {} / * iPhone 4-* / @ media only screen and (- webkit-min-device-pixel-ratio:1.5) Only screen and (min-device-pixel-ratio:1.5) {}
Custom selected text
:: selection {background: # 51a351;}::-moz-selection {background: # 51a351;}::-webkit-selection {background: # 51a351;}
Full screen background with CSS3
Html {background: url ('images/bg.jpg') no-repeat center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover; background-size: cover;}
Force vertical scroll bar
Html {height: 101%}
The first letter of the text is capitalized
P:first-letter {display: block; margin: 4px 004px; float: left; color: # ff3366; font-size: 5.3em; font-family: Georgia, Times New Roman, serif;}
Internal and external shadow
# mydiv {- moz-box-shadow: inset 2px 0 4px # 000;-webkit-box-shadow: inset 2px 0 4px # 000; box-shadow: inset 2px 0 4px # 000;} # mydiv {- webkit-box-shadow: 0 2px 2px-2px rgba (0,0,0,0.52);-moz-box-shadow: 0 2px 2px-2px rgba (0,0,0,0.52) Box-shadow: 0 2px 2px-2px rgba (0,0,0,0.52);}
Voice bubble
.speech-bubble {position: relative; background: # 00aabb; border-radius: .4em;} .speech-bubble:after {content:'; position: absolute; bottom: 0; left: 50%; width: 0; height: 0; border: 30px solid transparent; border-top-color: # 00aabb; border-bottom: 0; border-left: 0; margin-left:-15px Margin-bottom:-30px;}
Custom input styl
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 5px rgba (81,203,238,1); padding: 3px 0px 3px 3px; margin: 5px 1px 3px 0px; border: 1px solid rgba (81,203,238,1);} "very practical CSS snippet method tutorial" ends here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!
