CSS. Отказ от табличной вёрстки сайта

Какие преимущества даёт CSS. Почему для стилизации сайта лучше использовать CSS, нежели HTML теги форматирования текста и объектов. Как скомпоновать код в документе стилей. Поговорим об «обтекании» объектов.

Итак, как я уже говорил в статье CSS. Введение про табличную вёртску, для стилизации вашего сайта лучше использовать таблицы стилей ( CSS). Они дадут более идеальные настройки расположения, вида и свойств вашего контента. Если при табличной вёрстке вы работали с целым сайтом сразу, то при вёрстке с помощью CSS мы будем рассматривать каждый элемент сайта отдельно. И также отдельно можем их настраивать на свой лад и вкус.

Свойство position

Во-первых, расположить блок контента можно где угодно. Как Нам нужно и где нам нужно. У данного свойства есть несколько значений, в частности :

Absolute — точка отсчёта позиции контента начинается от заданной главной точки блока-родителя, например, верхний левый угол;
Fixed — позиция блока становиться фиксированной и никак не сдвигается при прокрутке страницы сайта;
Relative — позиция объекта указывается относительно его первоначальной точки;
Static — никаких изменений в отображении элементов на странице;
Inherit — с помощью данного значения объект перенимает все свойства блока-родителя.

Давайте рассмотрим случай, когда нам нужно, чтобы какой-либо объект был обтекаем текстом. Для этого нужно использовать свойство:

Float

C помощью данного свойства достаточно просто указать с какой стороны текст или другие объекты будут обтекать ваш блок контента.

Значения которые необходимо указать:
— left — обтекание с левой стороны объекта запрещено;
— right — обтекание с правой стороны объекта запрещено;
— both — обтекание с правой и левой сторон запрещено.

Так-с, а теперь давайте поговорим о том, чтобы сократить количество кода в CSS — документе, если несколько объектов имеют одинаковые свойства и значения этих свойств. В CSS есть специальное решение! Достаточно просто написать объекты через запятую и это позволит использовать одинаковые параметры для всех «участников перечисления»

.a, .b, .c {
 float:left;
 }

Таким образом все эти объекты будут обтекать только справа.

Пробуйте разные варианты расположения блоков на вашем сайте для изменения его внешнего вида .