margin
Свойство margin сокращённое свойство, позволяющее быстро задать следующие параметры: margin-top, margin-right, margin-bottom и/или margin-left. Margin - это внешнее пространство между бордюром и невидимой границей прямоугольника. В примере ниже, это пространство обозначено желтым цветом..
Пример :
p {margin: 2em}
p {margin: 2em 1em}
Возможные значения:
Одно, два, три или четыре следующих значения:
-
ширина (задается в стандартных единицах длины),
-
процент% (задается процент от родительского элемента),
-
auto (расстояние будет рассчитываться браузером автоматически).
Данное свойство предполагает использование от 1 до 4 значений одновременно, что повлечет за собой следующее:
-
Если для свойства margin будет указано одно значение - оно будет применено ко всем сторонам элемента.
-
Если для свойства margin будет указано два значения - первое будет применено для верхней и нижней границ элемента, второе - для левой и правой.
-
Если для свойства margin будет указано три значения - первое будет применено для верхней границы, второе - для правой и левой границ, третье - для нижней границы.
-
Если для свойства margin будет указано четыре значения - первое будет применено для верхней границы, второе - для правой границы, третье - для нижней границы, четвертое - для левой границы.
inherit
Заимствует значение свойства у родительского элемента.
Характеристики.
Применяется: К большинству элементов
Наследуется: Нет
См. также.
-
margin-bottom
-
margin-left
-
margin-right
-
margin-top
Обзор свойств CSS.Основные свойства.
Основные свойства.
Список базовых свойств, которые должен знать даже начинающий веб-мастер:
margin, padding, border, background-color, color, font-family, font-size, float
padding
Свойство padding - сокращённое свойство, предоставляет быстрый способ задать следующие параметры: padding-top, padding-right, padding-bottom и/или padding-left. Padding - это пространство между содержимым элемента и бордюром. В примере ниже это пространство обозначено желтым цветом.
Пример :
p {padding: 2em}
p {padding: 2em 1em}
Возможные значения:
Одно, два, три или четыре следующих значения:
-
ширина (задается в стандартных единицах длины),
-
процент% (задается процент от родительского элемента),
-
auto (расстояние будет рассчитываться браузером автоматически).
Данное свойство предполагает использование от 1 до 4 значений одновременно, что повлечет за собой следующее:
-
Если для свойства padding будет указано одно значение - оно будет применено ко всем сторонам элемента.
-
Если для свойства padding будет указано два значения - первое будет применено для верхней и нижней границ элемента, второе - для левой и правой.
-
Если для свойства padding будет указано три значения - первое будет применено для верхней границы, второе - для правой и левой границ, третье - для нижней границы.
-
Если для свойства padding будет указано четыре значения - первое будет применено для верхней границы, второе - для правой границы, третье - для нижней границы, четвертое - для левой границы.
inherit
Заимствует значение свойства у родительского элемента.
Характеристики.
Применяется: К большинству элементов
Наследуется: Нет
См. также.
-
padding-bottom
-
padding-left
-
padding-right
-
padding-top
border
Свойство border - сокращённое свойство, управляет внешним видом рамки (бордюра) вокруг элемента, позволяя определить в одной строке сразу несколько атрибутов: цвет, стиль и ширину.По сути, border предлагает быстрый вариант указания свойств border-width, border-style и border-color.
Свойство оказывает влияние на все четыре стороны элемента одновременно.
Посмотрите на иллюстрацию:
Рамка обозначена зеленым. Посмотрим пристальнее на "анатомию" элемента:
Обратите внимание - она располагается между внутренними отступами (paddings) и внешним полями (margins).
Пример :
p {border: 2px dotted red}
Этот пример аналогичен следующей записи:
p {
border-top: 2px dotted red;
border-bottom: 2px dotted red;
border-left: 2px dotted red;
border-right: 2px dotted red;
}
Возможные значения:
Значения свойств border-width, border-style и border-color разделенные пробелом, могут располагаться в любом порядке.
inherit
Заимствует значение свойства у родительского элемента.
Характеристики.
Применяется: Ко всем элементам
Наследуется: Нет
См. также.
-
border-width
-
border-style
-
border-color
background-color
Свойство background-color устанавливает цвет фона элемента.Цвет применяется ко всему фону содержимого элемента, и распространяется на его внутренние отступы (paddings). Внешние поля (margins) остаются прозрачными.
Пример :
В данном примере установим желтый цвет фона для элемента заголовка h1.
h1 {
background-color: yellow;
color: black;
border: 3px solid green;
}
Возможные значения:
цвет
Можно напрямую указать цвет фона одним из стандартных способов.
transparent
Устанавливает прозрачный фон.
inherit
Заимствует значение свойства у родительского элемента.
Характеристики.
Значение по умолчанию: transparent
Применяется: К большинству элементов
Наследуется: Нет
См. также.
-
background
-
background-image
-
background-repeat
-
background-attachment
-
background-position
-
color
color
Свойство color устанавливает цвет текста элемента.
За цвет фона отвечает свойство background-color.
Пример :
становим зеленый цвет текста для всех элементов h1:
h1 {color: green}
Результат:
А вот ещё один простой пример, иллюстрирующий, сколько способов указания цвета предоставляет нам CSS. Все строки в примере равнозначны и приводят к одному и тому же результату - цвет текста элемента em становится ярко-зеленым:
em {color: lime}
em {color: rgb(0,255,0)}
em {color: #0f0}
em {color: #00ff00}
em {color: rgb(0%, 100%, 0%)}
Возможные значения:
цвет
Можно напрямую указать цвет фона одним из стандартных способов.
inherit
Заимствует значение свойства у родительского элемента.
Характеристики.
Значение по умолчанию: Зависит от настроек web-браузера
Применяется: К большинству элементов
Наследуется: Да
См. также.
-
background-color
font-family
Свойство font-family позволяет выбрать шрифт для отображения текста.
Можно указать несколько названий шрифтов через запятую, тогда браузер воспользуется первым шрифтом из списка, найденным на компьютере пользователя. Если в имени шрифта есть пробелы, его необходимо заключить в двойные или одинарные кавычки.
p {font-family: Courier, "Courier New", monospace;}
На тот случай, когда ни один из перечисленных в списке шрифтов у клиента не установлен, рекомендуется в конце списка добавлять имя семейства шрифтов, например: serif, sans-serif, monospace, fantasy или cursive.
Пример :
p {font-family: Courier, "Courier New", monospace;}
Если ни Courier, ни Courier New не установлены, браузер самостоятельно подберёт из имеющихся какой-нибудь моноширинный (monospace) шрифт
Возможные значения:
имя шрифта
Имя или имена популярных шрифтов через запятую, например, "Helvetica".
семейство
Одно из семейств шрифтов: serif, sans-serif, monospace, fantasy или cursive.
inherit
Заимствует значение свойства у родительского элемента.
Характеристики.
Значение по умолчанию: Зависит от web-браузера
Применяется: Ко всем элементам
Наследуется: Да
См. также.
-
fontfont-size
-
font-style
-
font-variant
-
font-weight
-
line-height
font-size
Свойство font-size позволяет задать размер шрифта. Хорошей практикой считается указывать относительные размеры шрифта в процентах или em.
Пример :
p {font-size: 1em}
h1 {font-size: 180%}
h2 {font-size: 140%}
.copyright {font-size: x-small}
Возможные значения:
относительный размер
larger или smaller.
именованный размер
Один из возможных размеров: xx-small, x-small, small, medium, large, x-large или xx-large.
Смотрите Как задаются размеры (длина, ширина) в CSS.
размер в процентах
Например, h3 {font-size: 130%}.
inherit
Заимствует значение свойства font-size у родительского элемента.
Характеристики.
Значение по умолчанию: medium
Применяется: Ко всем элементам
Наследуется: Да
См. также.
-
font
-
font-family
-
font-style
-
font-variant
-
font-weight
-
line-height
float
Применение свойства float ведет к двум последствиям:
-
элемент, начинает "липнуть" к правому или левому краю страницы
-
последующие элементы начинают обтекать его
Пример :
img {
float: left;
margin-right: 5px;
}
Возможные значения:
right
Элемент липнет к правому краю, а последующие обтекают его слева.
left
Элемент липнет к левому краю, а последующие обтекают его справа.
none
Значение по умолчанию. Элемент не липнет, а располагается в обычном режиме. Последующие элементы не обтекают его, а располагаются в обычном порядке.
inherit
Заимствует значение свойства у родительского элемента.
Характеристики.
Значение по умолчанию: none
Применяется: Ко всем элементам
Наследуется: Нет
См. также.
-
clear