/* Общий вид */
элемент {
/* Свойства с единственным значением */
    свойство: значение;
 
    /* Свойства с множеством значений */
    свойстов2: значение1 значение2 ...;
}
 
/* Пример для body */
body {
    color: #111;  /* Устанавливаем почти черный цвет для шрифта */
}

Свойств в CSS очень много, тем более в CSS3, поэтому затронем только те, которые могут потребоваться в начале.

Чтобы не было недопониманий: очень хотелось бы сократить текст шпаргалки, поэтому определим понятия корневого свойства, префикса и постфикса для свойств. Префикс и постфикс имеют в себе знак -

За корневое свойство для префикса берем width, которое меняет ширину элемента. Выглядит оно так:

width

Префикс - то, что находится до корневого свойства (к примеру, max-), значит полный вид свойства будет выглядеть так:

max-width

За корневое свойство для постфикса берем padding. Изначально имеет вид:

padding

Постфикс - то, что находится после корневого свойства (к примеру, -left), а значит имеет полный вид:

padding-left

• width и height - задают размеры элемента по ширине и высоте соответственно. Префиксы:
  • min- - как не трудно догадаться, минимальный размер элемента;
  • max- - максимальный размер элемента;

У любого видимого элемента HTML присутствуют:

               Внешний отступ
 ------------------------------------------
 |            Внутренний отступ           |
 | |------------------------------------| |
 | |             Сам элемент            | | <-- Рамка
 | |------------------------------------| |
 |                                        |
 ------------------------------------------

Причем, эти отступы присутствуют со всех 4 сторон элемента: слева, сверху, справа, снизу.

• margin - внешний отступ от рамки элемента. Принимает от 1 до 4 значений размера. Постфиксы, принимают по 1 значению размера:
  • -left - отступ слева;
  • -top - отступ сверху;
  • -right - отступ справа;
  • -bottom - отступ снизу;
• border - задает размер, тип и цвет рамки вокруг элемента. Постфиксы такие же, как и margin, но принимают обязательно 3 значения: <размер> <тип_линии> <цвет_линии>;
• padding - внутренний отступ от рамки элемента. Принимает от 1 до 4 значений размера. Постфиксы такие же, как и margin.
• box-sizing - свойство указывает, относительно чего задавать размер элемента. Свойство принимает значения:
  • 
• border-box - размер задается относительно рамки;
• background - задает цвет или изображение заднего фона элемента:
  • -color - цвет;
  • -image - изображение, имя файла указывается функцией url(«img.png»). Если свойство задано, то становятся доступны постфиксы еще постфиксы (без -image);
  • -repeat - указывает, как будет повторяться изображение:
    • no-repeat - не повторять изображение ни по каким осям;
    • repeat-x - повторяет изображение (если его размер меньше ширины родительского элемента) по горизонтали;
    • repeat-y - пщвторяет изображение (если его размер меньше высоты родительского элемента) по вертикали;
  • -position - позиция изображения;
  • -size - размер изображения;
• color - цвет переднего плана (текста);
• font - свойство для шрифтов:
  • -family - ;
  • -size - размер шрифта;
  • -weight - начертание шрифта;
• display - ;
• position - ;
• overflow - как отображать дочерние элементы, если они имеют размер больше родительского (если родительский элемент имеет фиксированную ширину и высоте):
  • -x - по X оси (ширине);
  • -y - по Y оси (высоте);
• z-index - «поднимает» элемент над всеми остальными. Большее значение - выше, меньшее - ниже.

• px - в пикселях;
• vw и vh - размер в процентах относительно размера окна браузера;
• % - размер в процентах относительно родительского элемента или шрифта (в случае шрифтов очень схоже поведение с em);
• em - относительная единица, высчитывается относительно высоте текущего размера шрифта, где 1em - 100% от размера текущего шрифта;
  • ex - относительная единица, высчитывается относительно высоте символа x текущего размера шрифта;
  • ch - относительная единица, высчитывается относительно высоте символа 0 текущего размера шрифта;
• rem - .

Данные размеры счиатются устаревшими по той причине, что их размер фиксированно высчитывается относительно размеру пикселя и н

• pt - в типографских пунктах (4/3 px), считается устаревшим;
• pc - в типографской пике (16 px), аналогично пунктам - устаревшее;
• cm - в сантиметрах, устаревшее (38 px);
• mm - в милиметрах, устаревшее;
• in - в дюймах, устаревшее;

Цвет задается цифрой в шестнадцатиричном формате (hex)

#rgb,
#rrggbb,
#rrrgggbbb
     где r, g и b - число от 0 до 9, A, B, C, D, E, F;
     r - значение светлоты красного цвета,
     g - значение светлоты зеленого,
     b - значение светлоты синего.

Путем смешивания красного, зеленого и синего цветов, светлоты (яркости) каждого из них, можно получить и другие цвета.

Цвет задается в формате RGB (red - красный, green - зеленый, blue - синий), где эти цвета смешиваются и дают определенные оттенки. Значение каждого аргумента задается числом в диапазоне от 0 до 255.

color: rgb(0, 255, 128);

Принцип примерно такой же, как и у RGB, только добавлен альфа-канал (прозрачность). Значение прозрачности в диапазоне от 0 до 1 (0 - полностью прозрачный, 1 - непрозрачный).

color: rgba(0, 0, 0, 0.25);

...
  <div id="id-name"></div>;
...

#id-name {
    ...
}

...
  <div class="class-name"></div>
...

.class-name {
    ...
}

...
<div class="test1">
    <div class="test2">
        ...
    </div>
</div>
 
<div class="test1">
    ...
</div>
 
<div class="test2">
    ...
</div>
...

.test1 .test2 {
    ...
}