. К каждому такому элементу применяют
свойства CSS:
padding
,
margin
,
border
,
width
и другие. Ширина прямоугольника-блока задаётся свойством
width
, затем каждый элемент оформляется полями, которые очерчиваются с помощью атрибута
border.
Наконец, компонент страницы может иметь внешние поля, или отступы -
margin
, отделяющие его от другого блока.
Синтаксис свойства padding в CSS
Создатели каскадных таблиц стилей предусмотрели несколько вариантов записи атрибута для установки полей. Сделать пустую область внутри блока можно восемью разными способами! Таблица ниже показывает примеры для каждого из варианта и даёт к ним краткие пояснения.
Пример использования
| Пояснение
|
padding: 15
px;
| Если после атрибута следует одно число, это означает, что элемент будет иметь одинаковые поля со всех сторон. Запись px
предполагает, что значение задаётся в пикселях. То есть в итоге блок будет иметь поля по 15 пикселей.
|
padding: 18
px 36
px;
| Первое из двух чисел указывает, что вертикальные поля составят по 18 пикселей, боковые - в два раза больше - 36 пикселей.
|
padding: 6
px 12
px 18
px;
| Среднее число - значение полей по бокам (левого и правого), два других - вертикальные поля. При этом первое число (6 px) относится к верхнему полю, а последнее (18 px) - к нижнему.
|
padding: 6 px 12 px 18 px 36 px;
| Форма записи свойства CSS padding
, в которой присутствуют четыре числа, позволяет задать поля со всех сторон блока. Числовые значения последовательно применяются к верхнему полю и далее по часовой стрелке - к правому, нижнему и левому.
|
padding-left: 14 px;
| Приписка left
говорит сама за себя - поле будет установлено только слева элемента.
|
padding-right: 14 px;
| Аналогично предыдущему варианту записи - поле создастся только справа блока.
|
padding-top: 14 px;
| Запись определяет поле сверху.
|
padding-bottom: 14 px;
| Запись определяет поле снизу.
|
Следует заметить, что по умолчанию в CSS padding равен нулю. Данный атрибут не является наследуемым, то есть его необходимо устанавливать для каждого блока. Помимо привычных и понятных пикселей, ширина пустого пространства вокруг блоков задаётся и в относительных единицах. Например, в примерах выше можно записать 5% - в результате ширина поля просчитается браузером автоматически.
Как использовать свойство?
Итак, формы записи атрибута рассмотрены, но как его использовать на HTML-странице? Первый вариант - более «красивый», когда всё, что касается технологии CSS, не прописывается в HTML, а вынесено в отдельный файл с соответствующим расширением.
Второй вариант - запись непосредственно в тег <style
>. CSS padding
в этом случае задаётся следующим образом:
<
div
style="
padding: 22
px">
Как записать атрибут - выбирает верстальщик. В любом случае необходимо владеть всеми способами применения свойства для определения полей, чтобы при случае воспользоваться им.
Б
локи в CSS представляют собой самостоятельный объект, имеющий форму прямоугольника. Все элементы HTML - документа представляют собой самостоятельные блоки, которые содержат любого рода информацию, будь-то текст или изображение (контент). К примеру: для элемента
содержимым блока является текст , а
для элемента - текст .
Вокруг контента, в блоке, могут быть пустые, не занятые поля (padding)
, что кстати придает содержимому блока более привлекательный вид.
Сразу за полями пролегает граница блока (border)
, которая может иметь заданную толщину, цвет и стиль. Блок может иметь отступы
(margin)
т.е. свободное пространство вокруг границ. Поля, границы и отступы не входят в ширину блока, ширина задается только для его содержимого.
Поля. Свойства MARGIN-TOP, MARGIN-RIGHT,
MARGIN-BOTTOM, MARGIN-LEFT
Эти свойства задают величину полей вокруг блока, значения задаются в любых единицах длины или процентах:
- margin-top
- обозначает ширину верхнего поля;
- margin-right
- обозначает ширину правого поля;
- margin-bottom
- обозначает ширину нижнего поля;
- margin-left
- обозначает ширину левого поля.
Пример правила для абзаца, с полями справа и слева по 25px, будет выглядеть так:
p {
margin-top
: 0px
;
margin-right
: 25px
;
margin-bottom
: 0px
;
margin-left
: 25px
;
}
Свойство MARGIN
Это свойство - стенографическое, которое применяется для сокращенной записи выше перечисленных свойств. Свойство
margin
может иметь количество значений от одного до четырех:
- если задано только одно, то поля со всех сторон блока одинаковые;
- если заданы два значения, то первое обозначает поля сверху и снизу, второе - справа и слева (значения каждой пары равны);
- если задано три значения, то первое обозначает верхнее поле, второе - левое и правое, третье - нижнее;
- если заданы все четыре значения, то соответственно, первое - верх, затем - правое поле, потом нижнее и последнее - левое.
Пишем правило:
p {margin
: 15px 5px 20px
}
В этом примере верхнее поле абзаца будет равно 15px, правое и левое поля по 5px, нижнее поле будет 20px.
Границы. Свойства BORDER-TOP-WIDTH, BORDER-RIGHT-WIDTH, BORDER-BOTTOM-WIDTH, BORDER-LEFT-WIDTH
При помощи CSS можно заключить текст абзаца в рамку, как например это сделано на страницах сайта в виде примеров.
Данные свойства задают только толщину границ блока для верхнего, правого, нижнего и левого сегментов. Значения можно задвать ключевыми словами:
- thin
- тонкая;
- medium
- средней толщины (используется по умолчанию);
- thick
- толстая.
Так же значения можно задавать в любых единицах длины, в процентах значения не задаются. Правило можно записать так:
p {
border-top-wdth
: 1px
;
border-right-wdth
: 2px
;
border-bottom-wdth
: medium
;
border-left-wdth
: thin
;
}
Свойство BORDER-WIDTH
Это стенографическое свойство, значения задаются так же как у свойства . Правило
записанное ниже будет соответствовать записанному выше примеру:
p {border-width
: 1px 2px medium thin
}
Свойство BORDER-COLOR
Это свойство так же стенографическое, с его помощью задается
границ блока, значениями являются:
- ключевое слово (red, yellow, black, blue и т.д.);
- шестнадцатиричный код цвета (00FFFF, 000000, FFFFFF и т.д.);
- десятичный код в RGB (color: rgb (120, 25, 182));
- transparent
- прозрачная граница.
Если необходимо задать разные цвета каждой из четырех границ, то применяются свойства:
- border-top-color
- цвет верхней границы;
- border-right-color
- цвет правой границы;
- border-bottom-color
- цвет нижней границы;
- border-left-color
- цвет левой границы.
Правило для такого примера будет выглядеть так:
p {
border-top-color
: blue
;
border-right-color
: 000000
;
border-bottom-color
: FF0000
;
border-left-color
: rgb (25, 125, 205)
;
}
Свойство BORDER-STYLE
Свойство стенографическое, оно задает тип линий, которыми являются границы блока. Для задания различных типов линий, для границ
блока, используются индивидуальные свойства:
- border-top-style
- тип линии верхней границы;
- border-right-style
- тип линии правой границы;
- border-bottom-style
- тип линии нижней границы;
- border-left-style
- тип линии левой границы.
Значениями свойства являются ключевые слова:
- none
- граница отсутствует (используется по умолчанию);
- dotted
- граница оформлена линией состоящих из точек;
- dashed
- пунктирная линия;
- solid
- сплошная линия;
- double
- двойная сплошная линия;
- groove
- граница отображается "вдавленной" линией (имитирует объём);
- ridge
- граница отображается "выпуклой" линией;
- inset
- граница отображается так, что весь блок выглядит вдавленным;
- outset
- весь блок выглядит выпуклым.
Посмотрим на примерах:
Стенографическое свойство border-style
позволяет сокращать значения стилей для всех четырех сегментов границы,
задается так же как для свойства . Пишем правило для блока с границами выполненными пунктирной линией:
p {border-style
: dashed
}
Свойства BORDER-TOP, BORDER-RIGHT, BORDER-BOTTOM, BORDER-LEFT
Это стенографические свойства, которые позволяют сокращенно записать значения свойств border-width
,
border-style
и border-color
, смотрим на примере:
p {
border-top
: 1px solid red
;
border-right
: 3px solid red
;
border-bottom
: 1px solid red
;
border-left
: 3px solid red
}
Границы у абзаца будут красными, выполненными сплошной линией. Вверху и внизу толщина границ 1px, справа и слева - 3px.
Свойство BORDER
Это свойство стенографическое и применяется для задания параметров всех четырех сегментов границ: ширины, цвета и стиля.
Пишем пример правила:
p {border
: 1px solid blue
}
Граница вокруг этого абзаца будет одинаковой со всех сторон, выполненой сплошной линией синего цвета толщиной 1px.
Отступы. Свойства PADDING-TOP, PADDING-RIGHT,
PADDING-BOTTOM, PADDING-LEFT
Эти свойства позволяют задать размеры отступов для каждой стороны в отдельности, значения задаются в единицах длины
или в процентах:
- padding-top
- ширина верхнего поля;
- padding-right
- ширина правого поля;
- padding-bottom
- ширина нижнего поля;
- padding-left
- ширина левого поля.
Свойство PADDING
Это стенографическое свойство, которое применяется для сокращенной записи выше описанных свойств. Свойство padding
может иметь от одного до четырех значений, которые присваиваются так же как для (полей) и (границ). Запишем
такое правило:
p {
background-color
: white
;
border
: 2px dotted blue
;
padding
: 10px 25px
}
На примере получившегося абзаца посмотрим как работают отступы:
Именно от того, насколько оптимизирован сайт, зависит позиция, на которой поисковые системы будут выдавать его в результатах поиска.
Чем выше эта позиция, тем больше посетителей вы получите с поисковиков. Важным этапом оптимизации является наполнение сайта качественным,
уникальным контентом. Не нужно копировать с других ресурсов интересные статьи по своей тематике, повторять то, что уже есть на просторах
всемирной паутины.
На этом, я считаю, что первое знакомство с каскадными таблицами стилей CSS можно закончить и самостоятельно приступить к
. Этих знаний вполне хватит для начала, так что вперед,
к покорению просторов гиперпространства.
То, без чего не создать сайт:
∼
∼
Многим интересно:
∼
Рис. 1. Улучшенные веб-формы с помощью HTML5