CSS的50个代码片段

1.css全局

1. 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{
2. margin:0;
3. padding:0;
4. border:0;
5. font-size:100%;
6. font:inherit;
7. vertical-align:baseline;
8. outline:none;
9. -webkit-box-sizing:border-box;
10. -moz-box-sizing:border-box;
11. box-sizing:border-box;
12. }
13. html{height:101%;}
14. body{font-size:62.5%;line-height:1;font-family:Arial,Tahoma,sans-serif;}
16. article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
17. ol,ul{list-style:none;}
19. blockquote,q{quotes:none;}
20. blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
21. strong{font-weight:bold;}
23. table{border-collapse:collapse;border-spacing:0;}
24. img{border:0;max-width:100%;}
26. p{font-size:1.2em;line-height:1.0em;color:#333;}

2. 经典的 CSS Clearfix

1. .clearfix:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
2. .clearfix{display:inline-block;}
4. html[xmlns].clearfix{display:block;}
5. *html.clearfix{height:1%;}

这个clearfix代码被很多聪明的开发者用于网站. 它应用于一个用于保存浮动元素的盒子模型上. 这将确保里面的任何内容都以拉伸方式出现而不是浮动出现.

3. 2011 更新的 Clearfix

1. .clearfix:before,.container:after{content:"";display:table;}
2. .clearfix:after{clear:both;}
4. /*IE6/7*/
5. .clearfix{zoom:1;}
6. 这里就不说这个新版本和经典版本之间的主要差差异了.它们两个都可以有效的清除你的浮动元素,而且都支持流行的浏览器甚至是InternetExplorer6-8.

4. 跨浏览器的透明度

1. .transparent{
2. filter:alpha(opacity=50);/*internetexplorer*/
3. -khtml-opacity:0.5;/*khtml,oldsafari*/
4. -moz-opacity:0.5;/*mozilla,netscape*/
5. opacity:0.5;/*fx,safari,Opera*/
6. }
7. 一些新的CSS3属性我们可能认为它适用于任何地方.实际上不行,我们还得稍微调整下,透明度就是个例子.加上这个filter属性来保证它能在IE游览器里正常运行.

5. CSS 块引用模版

1. blockquote{
2. background:#f9f9f9;
3. border-left:10pxsolid#ccc;
4. margin:1.5em10px;
5. padding:.5em10px;
6. quotes:"/201C""/201D""/2018""/2019";
7. }
8. blockquote:before{
9. color:#ccc;
10. content:open-quote;
11. font-size:4em;
12. line-height:.1em;
13. margin-right:.25em;
14. vertical-align:-.4em;
15. }
16. blockquotep{
17. display:inline;
18. }

不是所有的人都必须在他们的网站上使用blockquotes. 但是我认为这是一个很好的元素用于分离引用或是优化博客和网页上的重复内容. 上面的代码为你的blockquotes提供一个默认样式,这样你的内容就不会看起来单调乏味.

6. 个性的圆角

1. #container{
2. -webkit-border-radius:4px3px6px10px;
3. -moz-border-radius:4px3px6px10px;
4. -o-border-radius:4px3px6px10px;
5. border-radius:4px3px6px10px;
6. }
8. /*alternativesyntaxbrokenintoeachline*/
9. #container{
10. -webkit-border-top-left-radius:4px;
11. -webkit-border-top-right-radius:3px;
12. -webkit-border-bottom-right-radius:6px;
13. -webkit-border-bottom-left-radius:10px;
15. -moz-border-radius-topleft:4px;
16. -moz-border-radius-topright:3px;
17. -moz-border-radius-bottomright:6px;
18. -moz-border-radius-bottomleft:10px;
19. }

大多数开发者都熟悉CSS3的圆角属性. 但是你知道如何为每个角设定不同的值吗? 上面的代码帮你搞定这个问题! 上面的两个版本都为你实现了这个效果,仔细研究下吧.

7.一般媒体查询

1. /*Smartphones(portraitandlandscape)-----------*/
2. @mediaonlyscreen
3. and(min-device-width:320px)and(max-device-width:480px){
4. /*Styles*/
5. }
7. /*Smartphones(landscape)-----------*/
8. @mediaonlyscreenand(min-width:321px){
9. /*Styles*/
10. }
12. /*Smartphones(portrait)-----------*/
13. @mediaonlyscreenand(max-width:320px){
14. /*Styles*/
15. }
17. /*ipads(portraitandlandscape)-----------*/
18. @mediaonlyscreenand(min-device-width:768px)and(max-device-width:1024px){
19. /*Styles*/
20. }
22. /*iPads(landscape)-----------*/
23. @mediaonlyscreenand(min-device-width:768px)and(max-device-width:1024px)and(orientation:landscape){
24. /*Styles*/
25. }
27. /*iPads(portrait)-----------*/
28. @mediaonlyscreenand(min-device-width:768px)and(max-device-width:1024px)and(orientation:portrait){
29. /*Styles*/
30. }
32. /*Desktopsandlaptops-----------*/
33. @mediaonlyscreenand(min-width:1224px){
34. /*Styles*/
35. }
37. /*Largescreens-----------*/
38. @mediaonlyscreenand(min-width:1824px){
39. /*Styles*/
40. }
42. /*iPhone4-----------*/
43. @mediaonlyscreenand(-webkit-min-device-pixel-ratio:1.5),onlyscreenand(min-device-pixel-ratio:1.5){
44. /*Styles*/
45. }
47. 这是一个很棒的模版，你能在CSS-Tricks找到其它零碎的媒体查询。不管怎样我已经把他们的例子全拷下来了，那里面包括了成吨的实际的移动设备。这些代码甚至能针对视网膜屏设备，使用最小设备像素比例。

8. 现代字体栈

1. /*TimesNewRoman-basedserif*/
2. font-family:Cambria,"HoeflerText",Utopia,"LiberationSerif","NimbusRomanNo9LRegular",Times,"TimesNewRoman",serif;
4. /*AmodernGeorgia-basedserif*/
5. font-family:Constantia,"LucidaBright",Lucidabright,"LucidaSerif",Lucida,"DejaVuSerif,""BitstreamVeraSerif","LiberationSerif",Georgia,serif;
7. /*AmoretraditionalGaramond-basedserif*/
8. font-family:"PalatinoLinotype",Palatino,Palladio,"URWPalladioL","BookAntiqua",Baskerville,"BookmanOldStyle","BitstreamCharter","NimbusRomanNo9L",Garamond,"AppleGaramond","ITCGaramondNarrow","NewCenturySchoolbook","CenturySchoolbook","CenturySchoolbookL",Georgia,serif;
10. /*TheHelvetica/Arial-basedsansserif*/
11. font-family:Frutiger,"FrutigerLinotype",Univers,Calibri,"GillSans","GillSansMT","MyriadPro",Myriad,"DejaVuSansCondensed","LiberationSans","NimbusSansL",Tahoma,Geneva,"HelveticaNeue",Helvetica,Arial,sans-serif;
13. /*TheVerdana-basedsansserif*/
14. font-family:Corbel,"LucidaGrande","LucidaSansUnicode","LucidaSans","DejaVuSans","BitstreamVeraSans","LiberationSans",Verdana,"VerdanaRef",sans-serif;
16. /*TheTrebuchet-basedsansserif*/
17. font-family:"SegoeUI",Candara,"BitstreamVeraSans","DejaVuSans","BitstreamVeraSans","TrebuchetMS",Verdana,"VerdanaRef",sans-serif;
19. /*Theheavier"Impact"sansserif*/
20. font-family:Impact,Haettenschweiler,"FranklinGothicBold",Charcoal,"HelveticaInserat","BitstreamVeraSansBold","ArialBlack",sans-serif;
22. /*Themonospace*/
23. font-family:Consolas,"AndaleMonoWT","AndaleMono","LucidaConsole","LucidaSansTypewriter","DejaVuSansMono","BitstreamVeraSansMono","LiberationMono","NimbusMonoL",Monaco,"CourierNew",Courier,monospace;

你很难为设计一个新的页面头脑风暴式的想出自己的CSS字体栈。我希望这一小片代码能减轻一些折磨，并给你一些可以着手开始的模版。如果你想找更多的例子，查看一下CSS 字体栈 ，这是我最喜欢的资源之一。

9. 自定义文本选择