Някои 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 */