Отступы (margin)

Может определить величину отступа вокруг всего элемента или для каждой стороны в отдельности.

Свойства:

margin - определяет величину отступов.

Значения задаются любыми способами измерения принятыми в CSS.

В одной строке можно указать 4 размера одновременно, они будут действовать для каждой стороны в последовательности: (верхний правый нижний левый).

Также можно указать величину отступа только для одной стороны.

Примеры:

margin: 10px;  //  Отступ от всех сторон элемента 10 пикселей

margin: 5px 10px 15px 20px;  //  верхний правый ниж ... Читать дальше »

Позиционирование

Дает возможность размещения элементов не по расположению их в коде, а конкретными координатами относительно родительского контейнера или всей страницы.

Свойства:

position - устанавливает откуда брать точки отсчета при позиционировании.

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

Примеры:

position: absolute;  //  Отсчет берется относительно всей страницы

position: relative;  //  Отсчет берется относительно родительского контейнера

position: fixed;  //  Элемент не меняет своего по ... Читать дальше »

Поля (padding)

Может определить величину полей внутри всего элемента или для каждой стороны в отдельности.

Свойства:

padding - определяет величину полей.

Значения задаются любыми способами измерения принятыми в CSS.

В одной строке можно указать 4 размера одновременно, они будут действовать для каждой стороны в последовательности: (верхний правый нижний левый).

Также можно указать величину поля только для одной стороны.

Примеры:

padding: 10px;  //  Поле со всех сторон элемента 10 пикселей

padding: 5px 10px 15px 20px;  //  верхний правый нижний левый ... Читать дальше »

Прозрачность (opacity)

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

Свойства:

opacity - значения указываются числами от 0.0 до 1.0

Значение 0.0 определяет полную прозрачность элемента.

Пример:

opacity: 0.5;  //  прозрачность элемента ровно на половину

Рамки (border)

С помощью этого параметра можно установить стиль, цвет и толщину рамок вокруг элемента, будь то изображение или отдельные блоки.

Свойства:

border-width - определяет ширину рамки.

Значения устанавливаются в пикселях.

Пример:

border-width: 3px;  //  Ширина рамки 3 пикселя

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

Пример:

border-width: 1px 2px 3px 4px;- в данном случае ширина сторон будет такая:

Верхняя - 1 пиксе ... Читать дальше »

Списки (list-style)

Атрибут позволяет определить стиль маркера, его расположение или изображение, которое будет использовано вместо маркера.

Свойства:

list-style-image - указывает адрес изображения, которое будет использоваться вместо маркера.

Пример:

list-style-image: url(images/list.gif);

list-style-type - определяет вид маркера.

Примеры:

list-style-type: disc;  //  Закрашеный кружок

list-style-type: cir ... Читать дальше »

Таблицы

Здесь описаны свойства, которые изменяют отображение ячеек и их рамок стандартных HTML таблиц.

Свойства:

border-collapse - определяет способ отображения рамок вокруг ячеек таблицы.

Примеры:

border-collapse: collapse;  //  Между ячеек отображается только одна линия

border-collapse: separate;  //  Вокруг ячеек отображается собственная рамка

border-spacing - определяет расстояние между ячейками.

Если значение одно - расстояние вокруг каждой стороны одинаковое, есл ... Читать дальше »

Текст (text)

С текстом в CSS можно производить множество различных трансформаций. Устанавливать нужное расстояние между символами, высоту строки, выравнивание текста по всевозможным границам, делать его подчеркнутым, перечеркнутым или мигающим. Устанавливать величину отступа первой строки для абзаца, и в то же время последующие строки будут выввыводится без отступа, преобразовывать прописные буквы в заглавные, не меняя их высоты и т.д...

Свойства:

text-align - определяет выравнивание текста по горизонтали.

Примеры:

text-align: left;  //  Выравнивание по левому краю

text-align: right;  //  Выравнивание по пр ... Читать дальше »

Фон (background)

Является основным указателем фона как для отдельного блока, так и для всей страницы в целом. С его помощью можно указать цвет фона, фоновое изображение, также можно определить расположение фонового изображения в блоке, фиксировать его, или же позволить прокручиваться в месте с содержимым блока.

Свойства:

background-color - указывает цвет фона.

Значение можно указывать шестнадцатеричным числом:

background-color: #FFOOOO;

или названием цвета:

background-color: red;

В обоих примерах цвет фона будет одинаковый (красный).

Следует заметить, что по второму п ... Читать дальше »

Форматирование

Здесь описаны свойства, позволяющие установить ширину и высоту элемента, расположение элемента относительно родительского контейнера, запретить полное или частичное обтекание элемента другими или полностью скрыть его из вида.

Свойства:

width - определяет ширину элемента.

Значение указывается всеми величинами, принятыми в CSS.

Пример:

... Читать дальше »

Цвет (color)

Определяет цвет текста, ссылок, также цвет текста в отдельных тегах, которым присвоен этот элемент и прописан в стилевом файле.

Свойства:

color - определяет непосредственно сам цвет.

Значение можно прописывать в шестнадцатеричном значении, названием цвета или десятичными числами.

Пример:

color: #FFOOOO;  // цвет указан в шестнадцатери ... Читать дальше »

Шрифт (font)

С помощью данного свойства можно установить множество различных атрибутов шрифта. Выбрать непосредственно сам шрифт, определить размер шрифта, стиль шрифта, жирность, также можно сделать заглавные буквы размером в строчные.

Свойства:

font-family - определяет тип шрифта.

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