====== Формирование таблицы стилей ======

<code css>
/* Общий вид */
элемент {
/* Свойства с единственным значением */
    свойство: значение;

    /* Свойства с множеством значений */
    свойстов2: значение1 значение2 ...;
}

/* Пример для body */
body {
    color: #111;  /* Устанавливаем почти черный цвет для шрифта */
}
</code>

====== Свойства ======

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

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


===== Префикс =====

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

<code css>
width
</code>

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

<code css>
max-width
</code>

===== Постфикс =====

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

<code css>
padding
</code>

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

<code css>
padding-left
</code>

===== Список некоторых свойств =====

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

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

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

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

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

====== Значения свойств ======

===== Размеры =====

==== Применяются на данный момент ====

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

==== Считаются устаревшими ====

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

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

===== Цвета =====

==== По названию цвета ====

==== По hex-значению (16-ричное значение) ====

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

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

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

==== RGB ====

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

<code css>
color: rgb(0, 255, 128);
</code>

==== RGBA ====

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

<code css>
color: rgba(0, 0, 0, 0.25);
</code>

==== HSL ====

FIXME

==== HSLA ====

FIXME

====== Обращение к элементу или элементам ======

===== По id элемента =====

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

<code css>
#id-name {
    ...
}
</code>

===== По классу =====

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

<code css>
.class-name {
    ...
}
</code>

====== Наследование и другие приемы ======

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

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

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

<code css>
.test1 .test2 {
    ...
}
</code>