The basic set of CSS properties




This article will list a set of CSS properties required in each project.

As always, all as described in the article can be viewed at Demo, and download the file.

 

Reset CSS

Is a set of properties to allow HTML elements to the same species in all browsers.

  1. html, body, div, span, applet, object, iframe,
  2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  3. a, abbr, acronym, address, big, cite, code,
  4. del, dfn, em, img, ins, kbd, q, s, samp,
  5. small, strike, strong, sub, sup, tt, var,
  6. dl, dt, dd, ol, ul, li,
  7. fieldset, form, label, legend,
  8. table, caption, tbody, tfoot, thead, tr, th, td,
  9. article, aside, canvas, details, embed,
  10. figure, figcaption, footer, header, hgroup,
  11. menu, nav, output, ruby, section, summary,
  12. time, mark, audio, video {
  13. margin: 0;
  14. padding: 0;
  15. border: 0;
  16. font-size: 100%;
  17. font: inherit;
  18. vertical-align: baseline;
  19. }
  20. /* HTML5 display-role reset for older browsers */
  21. article, aside, details, figcaption, figure,
  22. footer, header, hgroup, menu, nav, section {
  23. display: block;
  24. }
  25. body {
  26. line-height: 1;
  27. font-family: 'Verdana', sans-serif;
  28. font-weight: 300;
  29. overflow-y: scroll;
  30. }
  31. blockquote, q {
  32. quotes: none;
  33. }
  34. blockquote:before, blockquote:after,
  35. q:before, q:after {
  36. content: "";
  37. content: none;
  38. }
  39. table {
  40. border-collapse: collapse;
  41. border-spacing: 0;
  42. }
  43. a {
  44. text-decoration: none;
  45. }
  46. a:active,
  47. a:hover,
  48. *:focus {
  49. outline: 0;
  50. }
  51. button,
  52. html input[type="button"],
  53. input[type="reset"],
  54. input[type="submit"] {
  55. -webkit-appearance: button;
  56. cursor: pointer;
  57. }
  58. html, body {
  59. height: 100%;
  60. min-height: 100%;
  61. margin: 0;
  62. padding: 0;
  63. }

 

The base template page with the correct behavior of the footer

I tried many different patterns, over time, came to the following. I use it in every project. See Demo.

  1. html,
  2. body {
  3. min-height: 100%;
  4. height: 100%;
  5. width: 100%;
  6. margin: 0;
  7. padding: 0;
  8. }
  9. #wrapper {
  10. min-height: 100%;
  11. width: 100%;
  12. margin-bottom: -50px;
  13. }
  14. #header {
  15. height: 50px;
  16. width: 100%;
  17. background-color: green;
  18. }
  19. #content {
  20. min-height: 100%;
  21. width: 100%;
  22. padding-bottom: 50px;
  23. }
  24. #footer {
  25. width: 100%;
  26. height: 50px;
  27. background-color: gray;
  28. }

 

ClearFix

I'm not a proponent of using CSS properties float and clear, because most pages can be created without them. But when you have to use them, to reset the float, with clear: both I use the following class:

  1. /**
  2.  * For modern browsers
  3.  * 1. The space content is one way to avoid an Opera bug when the
  4.  * contenteditable attribute is included anywhere else in the document.
  5.  * Otherwise it causes space to appear at the top and bottom of elements
  6.  * that are clearfixed.
  7.  * 2. The use of `table` rather than `block` is only necessary if using
  8.  * `:before` to contain the top-margins of child elements.
  9.  */
  10. .cf:before,
  11. .cf:after {
  12. content: " "; /* 1 */
  13. display: table; /* 2 */
  14. }
  15.  
  16. .cf:after {
  17. clear: both;
  18. }
  19.  
  20. /**
  21.  * For IE 6/7 only
  22.  * Include this rule to trigger hasLayout and contain floats.
  23.  */
  24. .cf {
  25. *zoom: 1;
  26. }

 

Forbid the user to highlight the items or text on the page

Often this action is performed on menu items or buttons on the interface. For this I use the following class:

  1. .not-selectable {
  2. user-select: none;
  3. -webkit-user-select: none;
  4. -khtml-user-select: none;
  5. -moz-user-select: none;
  6. -ms-user-select: none;
  7. -o-user-select: none;
  8. }

Live demo
Download ZIP







Found comments - 4






Кирилл August 17, 2018
Почему здесь нет border-box: box-sizing?
Козлов Андрей August 04, 2016
Спасибо, поправил :-)
Кирилл August 03, 2016
Опечатка в тексте, где заголовок ClearFix в тексте "Я не сторонниХ использования..."
Кирилл February 09, 2016
Спасибо, особенно за последний запрет
Current text is converted to a smiley
:) :( :0 :@ :# :$ :? :] :[ :} :{ :k :p :x :| :Q :O :S :D :X :C :-) :-( :-0 :-# :-$ :-? :-] :-[ :-} :-{ :-o :-p :-x :-| :-Q :-O :-S :-D :-X :-C :-* :-r :-t :-i :-s :-j :-k :-l :-z :-\ :-/ :-I :-J :-K :-L :-Z ;) ;] ;} ;-) ;-] ;-} =) =( =0 =@ =# =$ =? =] =[ =} ={ =o =p =x =| =Q =O =S =D =X =C
:)

Designer avatar

Gender
Hairs/Hats Mouth
Eyes Glasses
Result