Някои CSS свойства

За форматиране на текст

• font-family: Tahoma, Verdana, sans-serif;

• font-size: 14px

  0,725em

  0,725rem

  5vw

  100%;

• font-style: normal

  italic

  oblique

  initial

  inherit;

• font-weight: normal

  bold

  bolder

  lighter

  number

  initial

  inherit;

• text-decoration: underline

  none

  … ;

• text-transform: none

  capitalize

  uppercase

  lowercase

  initial

  Inherit;

• text-align: left

  right

  center

  justify

  initial

  inherit;

• color: red

  #ff0000

  rgb(255,0,0);

• font: italic bold 15px Arial, sans-serif;

Фонове

• background-color: #bbb;
• background-image: url(“myimage.gif”);

• background-position: center top

  …;

• background-repeat: repeat

  repeat-x

  repeat-y

  no-repeat

  initial

  inherit;

• background-size: auto

  length

  cover

  contain

  initial

  inherit;

• background-image: radial-gradient(red, blue);
• background: lightpink url(“myimage.gif”) no-repeat center top;

Водещи символи

• list-style-type: disc

  circle

  square;

• list-style-image: url(‘myimage.gif’);

• list-style-type: decimal

  decimal-leading-zero

  lower-alpha

  upper-alpha

  lower-latin

  upper-roman

  none

  ….;

• list-style-position: inside

  outside

  initial

  inherit;

Рамки

• border-color: blue;
• border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;
  border-radius: 15px; /* закръгление на ъглите на рамката */

• border-collapse: separate

  collapse

  initial

  inherit; /* полезно при таблици */

• border: 3px solid lightpink; /* рамката е непрекъсната линия, розова и с дебелина 3px */

Размери и подравнявания

• width: auto

  value

  initial

  inherit; /* px, %, em, rem, vw… */

• height: auto

  value

  initial

  inherit; /* px, %, em, rem, vh… */

• min-width: 300px;
• min-height: 100px;

• float: none

  left

  right

  initial

  inherit;

• text-align: center; /* центриране на текст */
• margin: 10px auto; /* центриране на контейнер */

Отстояния

• margin: 10px 20px 30px 40px; /* външно отстояние, разписва се по часовниковата стрелка: top right bottom left */
• padding: 5px 10px 20px 15px; /* вътрешно отстояние, top right bottom left */
• padding: 5px 10px 20px; /* top right/left bottom */
• padding: 5px 10px; /* top/bottom left/right */
• padding: 20px; /* top/bottom/left/right */