Creare un template CSS

In questo semplice tutorial vi mostreremo una raccolta di regole CSS che potrete usare come template per tutti i vostri progetti. Trovate incluso il reset HTML5 e alcuni trucchi per i dispositivi mobile tra cui le media queries.

  1.  
  2. /*
  3.   Document : ${name}
  4.   Created on : ${date}, ${time}
  5.   Author : ${user}
  6.   Description:
  7.   Purpose of the stylesheet follows.
  8. */
  9.  
  10. /* html5doctor.com Reset Stylesheet
  11. v1.6.1
  12. Last Updated: 2010-09-17
  13. Author: Richard Clark - http://richclarkdesign.com Twitter: @rich_clark
  14. */
  15. html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}
  16.  
  17. /* ------------------------- Backgrounds */
  18. /*body {background:url("../images/im_bg.gif") left top repeat;}*/
  19.  
  20. /* ------------------------- Generic */
  21. body {
  22. /*color:#ffffff;*/
  23. }
  24. .clear {clear:both;}
  25. img { /* Needed for mobile */
  26. display:block;
  27. margin-left:auto;
  28. margin-right:auto;
  29. width:100%;
  30. }
  31.  
  32. /* ------------------------- Tyography */
  33. strong {font-weight:bold;}
  34. p {}
  35. h1 {}
  36. h2 {}
  37. h3 {}
  38. h4 {}
  39. h5 {}
  40. h6 {}
  41. address {}
  42. pre, code {font-family: monospace;}
  43.  
  44. /* Links */
  45. a, a:visted, a:active {}
  46. a:hover {}
  47.  
  48. /* ------------------------- Forms */
  49. input {}
  50. select {}
  51. label {}
  52.  
  53. /* ------------------------- Lists */
  54.  
  55. /* ------------------------- Layout */
  56.  
  57. /* ------------------------- Popups */
  58.  
  59. /* ------------------------- Media Queries */
  60.  
  61. /* Smartphones (portrait and landscape) ----------- */
  62. @media only screen
  63. and (min-device-width : 320px)
  64. and (max-device-width : 480px) {
  65. /* Styles */
  66. }
  67.  
  68. /* Smartphones (landscape) ----------- */
  69. @media only screen
  70. and (min-width : 321px) {
  71. /* Styles */
  72. }
  73.  
  74. /* Smartphones (portrait) ----------- */
  75. @media only screen
  76. and (max-width : 320px) {
  77. /* Styles */
  78. }
  79.  
  80. /* iPads (portrait and landscape) ----------- */
  81. @media only screen
  82. and (min-device-width : 768px)
  83. and (max-device-width : 1024px) {
  84. /* Styles */
  85. }
  86.  
  87. /* iPads (landscape) ----------- */
  88. @media only screen
  89. and (min-device-width : 768px)
  90. and (max-device-width : 1024px)
  91. and (orientation : landscape) {
  92. /* Styles */
  93. }
  94.  
  95. /* iPads (portrait) ----------- */
  96. @media only screen
  97. and (min-device-width : 768px)
  98. and (max-device-width : 1024px)
  99. and (orientation : portrait) {
  100. /* Styles */
  101. }
  102.  
  103. /* Desktops and laptops ----------- */
  104. @media only screen
  105. and (min-width : 1224px) {
  106. /* Styles */
  107. }
  108.  
  109. /* Large screens ----------- */
  110. @media only screen
  111. and (min-width : 1824px) {
  112. /* Styles */
  113. }
  114.  
  115. /* iPhone 4 ----------- */
  116. @media
  117. only screen and (-webkit-min-device-pixel-ratio : 1.5),
  118. only screen and (min-device-pixel-ratio : 1.5) {
  119. /* Styles */
  120. }
  121.