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

What are the practical CSS code fragments? I believe many inexperienced people don't know what to do about it. Therefore, this article summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

CSS is a commonly used language in web development, but sometimes it is very uncomfortable to use it. A CSS may not behave exactly the same in different browsers. So you have to spend a lot of time debugging.

Fortunately, you can find a lot of good CSS code snippets on the Internet, which can effectively help you solve general or design problems. Here we have collected 30 CSS code snippets to help you debug.

Code

1. Chris Poteet's CSS browser reset code

This code can effectively help you solve cross-browser problems. Although IE6 is not supported, you can give up this kind of browser with less than 1% share in the United States.

/ * Reset Default Browser Styles-Place first in the listing of external style sheets for cascading. -Be sure to explicitly set margin/padding styles. -Styles are not reset that have to do with display (block, inline) are not reset. By: Chris Poteet & various influences * / * {vertical-align: baseline; font-family: inherit; font-style: inherit; font-size: 100%; border: none; padding: 0; margin: 0;} body {padding: 5px;} H1, H2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {margin: 20px 0;} li, dd, blockquote {margin-left: 40px;} dt {font-weight: bold } table {border-collapse: collapse; border-spacing: 0;}

2. Eric Meyer's CSS Reset

Eric's CSS code snippet is probably one of the most popular. It even supports Blueprint CSS Framework.

/ * http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) * / html, body, div, span, applet, object, iframe, H1, H2, h3, h4, h5, h6, 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;} / * HTML5 display-role reset for older browsers * / article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;} body {line-height: 1;} ol, ul {list-style: none;} blockquote, Q {quotes: none } blockquote:before, blockquote:after, q:before, q:after {content:'; content: none;} table {border-collapse: collapse; border-spacing: 0;}

3. How to Create Multiple Borders in CSS3

A very cool way to create box shadows, allowing you to create multiple borders

Box-shadow: 000 2px # 000, 000 3px # 999, 000 9px # fa0, 000 10px # 666, 000 16px # fd0, 000 18px # 000

4. Tucked Corners

The CSS code allows you to create a very cool Gravatar home page effect.

Div.tucked-corners {background: # f6f6f6; height: 380px; margin: 50px auto; padding: 10px; position: relative; width: 580px;-webkit-box-shadow: 0 1px 7px hsla (0pc0p0p0px0p.2);-moz-box-shadow: 01px 7px hsla (0meme0p0p0px0px0px0px0px0px0px0px0px0px0px0px0px580px.0px.0px.0px.0px.0px.0px.0px.0px.0px.0px.0px.0px.f6f6f6f6f6f6f6f6; height: 380px; margin: 10px; position: relative; width: 580px Box-shadow: 0 1px 7px hsla (0 1px 7px hsla 0% 10px hsla);} span.tucked-corners {background: # c4453c; display: block; height: 380px; position: relative; width: 580px;-webkit-box-shadow: inset 00 10px hsla -moz-box-shadow: inset 0 0 10px hsla (0 box-shadow 0% content 0% 25); box-shadow: inset 0 0 10px hsla (0% recorder 0% Power.25);} / * Top Corner Effect * / .top-corners:after, .top-corners:before {background: # e6e6e6; content:'; height: 50px Position: absolute; top:-25px; width: 100px; z-index: 10;-webkit-box-shadow: 0 6px 9px-8px hsla (0 6px 9px 0% 8px hsla 0% 8px hsla);-moz-box-shadow: 0 6px 9px-8px hsla (0 6px 9px-8px hsla) }. Top-corners:after {left:-50px;-webkit-transform: rotate (- 45deg);-moz-transform: rotate (- 45deg);-ms-transform: rotate (- 45deg);-o-transform: rotate (- 45deg); transform: rotate (- 45deg) }. Top-corners:before {right:-50px;-webkit-transform: rotate (45deg);-moz-transform: rotate (45deg);-ms-transform: rotate (45deg);-o-transform: rotate (45deg); transform: rotate (45deg) } / * Bottom Corner Effect * / .bottom-corners:after, .bottom-corners:before {background: # e6e6e6; content:'; height: 50px; position: absolute; bottom:-25px; width: 100px;-webkit-box-shadow: 0 6px 9px-8px hsla -moz-box-shadow: 0 6px 9px-8px hsla (0 6px 9px 0% 135deg 0% 135deg); box-shadow: 0 6px 9px-8px hsla (0 recorder 0% 5);} .bottom-corners:after {left:-50px;-webkit-transform: rotate (- 135deg);-moz-transform: rotate (- 135deg) -ms-transform: rotate (- 135deg);-o-transform: rotate (- 135deg); transform: rotate (- 135deg);} .bottom-corners:before {right:-50px;-webkit-transform: rotate (135deg);-moz-transform: rotate (135deg);-ms-transform: rotate (135deg) -o-transform: rotate (135deg); transform: rotate (135deg);}

5. IPad-Specific CSS

Modify the general ipad screen layout

Media only screen and (device-width: 768px) {/ * For general iPad layouts * /} @ media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {/ * For portrait layouts only * / @ media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {/ * For landscape layouts only * /}

6. Style links depending on file format

Modify the style of external links, email links, pdf links

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

7. Drop Caps

Great cross-browser code to help you make the first letter of each paragraph more

.firstcharacter {float: left; color: # 903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia;}

Obviously CSS3 is OK, but IE9 is not supported.

P:first-child:first-letter {float: left; color: # 903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia;}

8. CSS Sticky Footer

CSS implements the top sticky footer effect, which supports all major browsers, including chrome and IE8

CSS:

/ * Sticky Footer Solution by Steve Hatcher http://stever.ca http://www.cssstickyfooter.com * / * {margin:0;padding:0;} / * must declare 0 margins on everything, also for main layout components use padding, not vertical margins (top and bottom) to add spacing, else those margins get added to total height and your footer gets pushed down a bit more, creating vertical scroll bars in the browser * / html, body {height: 100%;} # wrap {min-height: 100% } # main {overflow:auto; padding-bottom: 150px;} / * must be same height as the footer * / # footer {position: relative; margin-top:- 150px; / * negative value of footer height * / height: 150px; clear:both;} / * Opera Fix*/ body:before {/ * thanks to Maleika (Kohoutec) * / content: "; height:100%; float:left; width:0; margin-top:-32767px / * thank you Erik J-negate effect of float*/} / * IMPORTANT You also need to include this conditional style in the of your HTML file to feed this style to IE 6 and lower and 8 and higher. , /

HTML:

9. Image Replacement Technique

Practical picture to replace the effect of text page elements.

A.replacement {background: url (dotted-border.png) no-repeat; height: 44px; width: 316px; display: block; text-indent:-9999px; overflow: hidden; / * Add this line to the image replacement method*/}

10. Set body font-size to 62.5% for Easier em Conversion

If you want a more flexible layout, you should use em instead of pixel or points. By setting your font 62.5%, you can easily set the text by setting em to pixel's 1x10.

Body {font-size: 62.5%; / * font-size 1em = 10px * /} p {font-size: 1.2em; / * 1.2em = 12px * /}

11. Vertically Align Text

If you set the line-height to be the same height as the parent element, it is easy to center the text vertically

Div {width:100px; height:100px;} div p {line-height:100px;}

12. How to Create 3D Text With CSS3

Using the text-shadow property, you can create 3D text using only CSS3

P.threeD {text-shadow:-1px 1px 0 # ddd,-2px 2px 0 # c8c8c8,-3px 3px 0 # ccc,-4px 4px 0 # b8b8b8,-4px 4px 0 # bbb, 0px 1px 1px rgba -1px 5px 5px rgba,-2px 8px 8px rgba,-2px 13px 13px rgba }

13. Wrapping Long URLs and Text Content with CSS

This code will help you make a line of text not too long and will automatically wrap according to the width of the content.

Pre {white-space: pre; / * CSS 2. 0 * / white-space: pre-wrap; / * CSS 2. 1 * / white-space: pre-line; / * CSS 3. 0 * / white-space:-pre-wrap; / * Opera 4-6 * / white-space:-Opera 7 * / white-space:-moz-pre-wrap / * Mozilla * / white-space:-hp-pre-wrap; / * HP Printers * / word-wrap: break-word; / * IE 5 + * /}

14. Fancy Ampersand

Make your "&" symbol more beautiful.

.amp {font-family: Baskerville, 'Goudy Old Style', Palatino,' Book Antiqua', serif; font-style: italic; font-weight: normal;}

15. Pull Quotes for Improved Reading

To make your reference more obvious, float the reference to the left or right, and surround the content

Pullbacks {width: 300px; float: right; margin: 5px; font-family: Georgia, "Times New Roman", Times, serif; font: italic bold # ff0000;}

16. Rounded Borders Around Images

Using CSS3, you can easily generate picture fillets.

Img {- webkit-border-radius: 25px;-moz-border-radius: 25px; border-radius: 25px;}

17. Image Preloader

A small picture is loaded first in the picture load, which prompts the user to preload the picture.

Img {background: url (img/preloader.gif) no-repeat 50% 50%;}

18. CSS3 Opacity

Using the opacity attribute to help you see the elements transparently, you can create a layered texture background

Div.L1 {background:#036; opacity:0.2; height:20px;} div.L2 {background:#036; opacity:0.4; height:20px;} div.L3 {background:#036; opacity:0.6; height:20px;} div.L4 {background:#036; opacity:0.8; height:20px;} div.L5 {background:#036; opacity:1.0; height:20px;}

19. Highlight links that open in a new window

This code allows you to clearly distinguish the link opened by new windows / tabs by displaying different styles.

A [target= "_ blank"]: before, a [target= "new"]: before {margin:0 5px 0; padding:1px; outline:1px solid # 333; color:#333; background:#ff9; font:12px "Zapf Dingbats"; content: "\ 279C";}

20. The New Bulletproof @ Font-Face Syntax

Cross-browser CSS code snippet to help you define font face

@ font-face {font-family: 'MyFontFamily'; src: url (' myfont-webfont.eot?#iefix') format ('embedded-opentype'), url (' myfont-webfont.woff') format ('woff'), url (' myfont-webfont.ttf') format ('truetype'), url (' myfont-webfont.svg#svgFontName') format ('svg');}

21. Flip an Image

Flip the CSS code snippet of the picture. It's especially suitable for you to flip the icon.

Img {- moz-transform: scaleX (- 1);-o-transform: scaleX (- 1);-webkit-transform: scaleX (- 1); transform: scaleX (- 1); filter: FlipH;-ms-filter: "FlipH";}

twenty-two。 Email Link With An Image

A quick way to automatically add an email picture to your email link

A [href ^ = "mailto:"] {background: url (images/email.png) no-repeat right top; padding-right:10px;}

23. Beautiful Blockquotes

Beautify your quotation

Blockquote {background:#f9f9f9; border-left:10px solid # ccc; margin:1.5em 10px; padding:.5em 10px; quotes: "\ 201C"\ 201D"\ 2018"\ 2019";} blockquote:before {color:#ccc; content:open-quote; font-size:4em; line-height:.1em; margin-right:.25em; vertical-align:-.4em } blockquote p {display:inline;}

24. Browser CSS hacks

A lot of CSS hack helps you make your website look the same in all browsers

/ * Selector Hacks * / * IE6 and below * / * html # uno {color: red} / * IE7 * / *: first-child+html # dos {color: red} / * IE7, FF, Saf, Opera * / html > body # tres {color: red} / * IE8, FF, Saf, Opera (Everything but IE6, 7) * / html > / * / body # cuatro {color: red} / * Opera 9.27 and below Safari 2 * / html:first-child # cinco {color: red} / * Safari 2-3 * / html [xmlns*= ""] body:last-child # seis {color: red} / * safari 3, chrome 1, opera9+, ff 3.5 + * / body:nth-of-type (1) # siete {color: red} / * safari 3, chrome 1, opera9+, ff 3.5 + * / body:first-of-type # ocho {color: red} / * saf3+ Chrome1+ * / @ media screen and (- webkit-min-device-pixel-ratio:0) {# diez {color: red}} / * iPhone / mobile webkit * / @ media screen and (max-device-width: 480px) {# veintiseis {color: red}} / * Safari 2-3.1 * / html [xmlns*= "]: root # trece {color: red} / * Safari 2-3.1 Opera 9.25 * / * | html [xmlns*= "] # catorce {color: red} / * Everything but IE6-8 * /: root * > # quince {color: red} / * IE7 * / * + html # dieciocho {color: red} / * Firefox only. 1 + * / # veinticuatro, x:-moz-any-link {color: red} / * Firefox 3.0 + * / # veinticinco, x:-moz-any-link, x:default {color: red} / * FF 3.5 + * / body:not (:-moz-handler-blocked) # cuarenta {color: red } / * Attribute Hacks * / * IE6 * / # once {_ color: blue} / * IE6, IE7 * / # doce {* color: blue; / * or # color: blue * /} / * Everything but IE6 * / # diecisiete {color/**/: blue} / * IE6, IE7, IE8 * / # diecinueve {color: blue\ 9 } / * IE7, IE8 * / # veinte {color/*\ * * /: blue\ 9;} / * IE6, IE7-- acts as an! important * / # veintesiete {color: blue! ie;} / * string after! Can be anything * / * IE8, IE9 * / # anotherone {color: blue\ 0Universe;} / * must go at the END of all rules * /

25. How To Change The Default Text Selection Color on your Blog

Change the color of highlighted text

:: selection {background: # ffb7b7; / * Safari * / color: # ffffff;}::-moz-selection {background: # ffb7b7; / * Firefox * / color: # ffffff;}

twenty-six。 Clearfix

.clearfix: after {visibility: hidden; display: block; font-size: 0; content: ""; clear: both; height: 0;} .clearfix {display: inline-block;} / * start commented backslash hack\ * / * html .clearfix {height: 1%;} .clearfix {display: block;} / * close commented backslash hack * /

twenty-seven。 Hide Logo Text With Text Indent

Make your logo SEO friendly. Ensure that logo text is not displayed

H1 {text-indent:-9999px; margin:0 auto; width:400px; height:100px; background:transparent url ("images/logo.jpg") no-repeat scroll;}

twenty-eight。 Reset all Text Colors and Background Colors

Reset all background and text colors.

* {color: black! important; background-color: white! important; background-image: none! important;}

twenty-nine。 Multiple Background Images

Use multi-background pictures

# multiple-images {background: url (image_1.png) top left no-repeat, url (image_2.png) bottom left no-repeat, url (image_3.png) bottom right no-repeat;}

thirty。 Linear Gradient

Allows you to create a linear gradient for the background, which does not support some old browsers

Background:-webkit-gradient (linear, left top, left bottom, from (# 74b8d7), to (# 437fbc)); background:-moz-linear-gradient (top, # 74b8d7, # 437fbc); filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#74b8d7', endColorstr='#437fbc'); after reading the above, have you mastered any practical CSS code snippets? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

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.