Shulou(Shulou.com)06/03 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.