What are the common skills of css
Editor to share with you what the common skills of css are, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!
1. Triangle list bullets
Ul {margin: 0.75em 0; padding: 01em; list-style: none;} li:before {content: "; border-color: transparent # 111; border-style: solid; border-width: 0.35em 0 0.35em 0.45mm; display: block; height: 0; width: 0; left:-1em; top: 0.9em; position: relative;}
2. Shadow of external CSS3 box
# 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);}
3. Shadow of internal CSS3 box
# mydiv {- moz-box-shadow: inset 2px 0 4px # 000;-webkit-box-shadow: inset 2px 0 4px # 000; box-shadow: inset 2px 0 4px # 000;}
4. CSS3 zebra crossing
Tbody tr:nth-child (odd) {background-color: # ccc;}
5. Force the vertical scroll bar to appear
Html {height: 101%}
6. The content is vertically centered
.container {min-height: 6.5em; display: table-cell; vertical-align: middle;}
7. CSS3: full screen background
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;}
8. Anchor link pseudo-class
A:link {color: blue;} a:visited {color: purple;} a:hover {color: red;} a:active {color: yellow;}
9. Hide H1 for logo
H2 {text-indent:-9999px; margin: 0 auto; width: 320px; height: 85px; background: transparent url ("images/logo.png") no-repeat scroll;}
10. Custom text selection
:: selection {background: # e2eae2;}::-moz-selection {background: # e2eae2;}::-webkit-selection {background: # e2eae2;}
11. Transparency across browsers
Filter: alpha (opacity=50); / * internet explorer * /-khtml-opacity: 0.5; / * khtml, old safari * /-moz-opacity: 0.5; / * mozilla, netscape * / opacity: 0.5; / * fx, safari, opera * /}
12. New version clear float (2011)
.clearfix: before, .container: after {content: "; display: table;}. Clearfix:after {clear: both;} / * IE 6 clearfix 7 * / .clearfix {zoom: 1;}
13. Typical CSS cleanup float
.clearfix: after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} .clearfix {display: inline-block;} html [xmlns] .clearfix {display: block;} * html .clearfix {height: 1%;}
14. Create fuzzy text
Want to blur the text? Can be implemented using color transparency and text-shadow
.blurry-text {color: transparent; text-shadow: 0 5px rgba;}
15. CSS: table column width is self-applicable
For tables, it is more painful when it comes to adjusting column widths. Then, here is a technique that can be used: adding white-space: nowrap; to the td element makes the text wrap correctly
Td {white-space: nowrap;} these are all the contents of this article entitled "what are the Common skills of css?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
