Со структурой блока, надеюсь, Вы уже знакомы. Если нет, то она представлена ниже.
Структура блока
И так. Вам уже, наверное, известно, что поля и отступы у блока представлены свойствами padding и margin соответственно. И в предыдущей статье мы уже частично затронули эту тему. На этой странице немного подробнее рассмотрим поля (padding ) и отступы (margin ).
Свойства margin и padding очень похожи друг на друга, выполняют схожие функции, поэтому их часто путают. Но делать этого конечно же не стоит, так как все-таки поля и отступы это совершенно разные вещи. Впрочем это хорошо видно из рисунка, ведь не случайно он здесь приведен.
Итак. Поля задаются свойством padding . Это внутренние расстояния от границ блока до его содержимого.
Свойство применимо ко всем элементам.
Расстояние задается в единицах длины, принятых в CSS , в % , либо (по умолчанию
Свойство padding является универсальным, так как устанавливает поля от границ элемента до его содержимого для всех его сторон, объединяя таким образом в себе свойства padding-top , padding-right , padding-bottom и padding-left , которые задают ширину полей для каждой из сторон элемента индивидуально.
Отступы задают при помощи свойства margin , которые определяют расстояние от границ блока до ближайших элементов или до краев окна браузера.
Свойство margin также применимо ко всем элементам.
Отступы также задаются в единицах длины, принятых в CSS , в % , либо (по умолчанию ) определяется браузером автоматически.
Свойство margin является универсальным, так как задает величину отступов от границ элемента для всех его сторон, объединяя таким образом в себе свойства margin-top , margin-right , margin-bottom и margin-left , которые устанавливают ширину отступов от каждой из границ элемента индивидуально.
И еще : отступы (margin ) располагаются за пределами блока, в то время как поля (padding ) внутри его, поэтому фон блока или его фоновое изображение распространяются только на поля, а отступы всегда прозрачны, либо имеют фон основного (родительского ) блока или фон страницы.
Фрагмент кода:
; "> |
Таблица располагается внутри контейнера с красной границей и синим фоном. Ширина отступов от границы таблицы до красной границы контейнера составляет 10 пикселей. В ячейке слева расположено изображение. Отступы от изображения до границ ячейки составляют 25 пикселей. Поля правой ячейки составляют 10 пикселей! |
Последнее обновление: 08.04.2016
Однострочное текстовое поле создается с помощью элемента input , когда его атрибут type имеет значение text:
С помощью ряда дополнительных атрибутов можно настроить текстовое поле:
dirname : устанавливает направление текста
maxlength : максимально допустимое количество символов в текстовом поле
pattern : определяет шаблон, которому должен соответствовать вводимый текст
placeholder : устанавливает текст, который по умолчанию отображается в текстовом поле
readonly : делает текстовом поле доступным только для чтения
required : указывает, что текстовое поле обязательно должно иметь значение
size : устанавливает ширину текстового поля в видимых символах
value : устанавливает значение по умолчанию в текстовом поле
Применим некоторые атрибуты:
В этом примере во втором текстовом поле сразу устанавливаются атрибуты maxlength и size . При этом size - то есть количество символов, которые помещаются в видимое пространство поля больше, чем допустимое количество символов. Однако все равно ввести символов больше, чем maxlength, мы не сможем.
В данном случае также важно различать атрибуты value и placeholder , хотя оба устанавливают видимый текст в поле. Однако placeholder устанавливает своего рода подсказку или приглашение к вводу, поэтому он обычно отмечается серым цветом. В то время как значение value представляет введенный в поле текст по умолчанию:
Атрибуты readonly и disabled делают текстовое поле недоступным, однако сопровождаются разным визуальным эффектом. В случае с disabled текстовое поле затеняется:
Среди атрибутов текстового поля также следует отметить такой атрибут как list . Он содержит ссылку на элемент datalist , который определяет набор значений, появляющихся в виде подсказки при вводе в текстовое поле. Например:
Атрибут list текстового поля указывает на id элемента datalist. Сам элемент datalist с помощью вложенных элементов option определяет элементы списка. И при вводе в текстовое поле этот список отображается в виде подсказки.
Для создания полей поиска предназначен элемент input с атрибутом type="search" . Формально он представляет собой простое текстовое поле:
Для ввода пароля используется элемент input с атрибутом type="password" . Его отличительной чертой является то, что вводимые символы маскируются точками:
CSS предлагает веб-разработчику колоссальные возможности для оформления HTML-страниц. Новичку они покажутся сложными, но если тщательно и методично в них разбираться, технология таблиц стилей покорится, и вёрстка сайтов перестанет доставлять трудности. Одно из незаменимых свойств CSS - padding . Используется оно, чтобы задать поля блоков HTML-страниц.
Сайт строится из кирпичиков - блоков. При этом каждый элемент, вне зависимости от его содержимого, должен иметь прямоугольную форму. То есть все изображения и надписи мысленно заключаются разработчиком в «коробочки», располагая которые, он создаёт веб-страницу.
Чаще всего блоки задаются тегами
,
Создатели каскадных таблиц стилей предусмотрели несколько вариантов записи атрибута для установки полей. Сделать пустую область внутри блока можно восемью разными способами! Таблица ниже показывает примеры для каждого из варианта и даёт к ним краткие пояснения.
Пример использования | Пояснение |
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, как margin (поле) и padding (отступ). Теперь мы остановимся на них более подробно и рассмотрим, чем они отличаются друг от друга и какие особенности имеют.
Создавать промежутки между элементами можно и тем, и другим способом, но если padding – это отступ от содержимого до края блока, то margin – это расстояние от одного блока до другого, межблоковое пространство. На скриншоте показан наглядный пример:
Padding отделяет содержимое от границы блока, а margin создает промежутки между блоками
Как видите, поля и отступы CSS отличаются между собой, хоть иногда без просмотра кода и нельзя определить, с помощью какого свойства задано расстояние. Это случается в тех случаях, когда отсутствует рамка или фон блока с содержимым.
Для установки полей или отступов в CSS от каждой стороны элемента существуют следующие свойства:
Отступы:
Поля:
Значения могут быть указаны в любых единицах CSS – px, em, % и т. д. Пример: margin-top: 15px .
Также существует очень удобная вещь как сокращенная запись margin и padding CSS . Если вам необходимо задать поля или отступы для всех четырех сторон элемента, совсем необязательно записывать свойство для каждой стороны по отдельности. Всё делается проще: для margin и padding можно указывать сразу 1, 2, 3 или 4 значения. От количества значений зависит, как распределяются настройки:
Те же правила касаются и свойства margin CSS. Обратите внимание на то, что для margin можно использовать и отрицательные значения (например, -3px), которые иногда бывают весьма полезными.
Представьте ситуацию: два блочных элемента находятся друг над другом и им заданы поля margin. Для верхнего блока установлено значение margin: 60px , а для нижнего – margin: 30px . Логично было бы предположить, что два граничащих поля двух элементов просто соприкоснутся и в итоге промежуток между блоками будет равен 90 пикселям.
Однако дела обстоят по-другому. На самом деле в такой ситуации проявляется эффект, который называют схлопыванием, когда из двух примыкающих полей элементов выбирается наибольший по размеру. В нашем примере итоговый промежуток между элементами будет равен 60 пикселям.
Схлопывание margin работает только для верхних и нижних полей элементов и не относится к полям с правой и левой сторон. Окончательная величина промежутка высчитывается в разных ситуациях по-разному:
Б локи в CSS представляют собой самостоятельный объект, имеющий форму прямоугольника. Все элементы HTML - документа представляют собой самостоятельные блоки, которые содержат любого рода информацию, будь-то текст или изображение (контент). К примеру: для элемента содержимым блока является текст , а для элемента - текст .
Вокруг контента, в блоке, могут быть пустые, не занятые поля (padding) , что кстати придает содержимому блока более привлекательный вид. Сразу за полями пролегает граница блока (border) , которая может иметь заданную толщину, цвет и стиль. Блок может иметь отступы (margin) т.е. свободное пространство вокруг границ. Поля, границы и отступы не входят в ширину блока, ширина задается только для его содержимого.
Эти свойства задают величину полей вокруг блока, значения задаются в любых единицах длины или процентах:
Пример правила для абзаца, с полями справа и слева по 25px, будет выглядеть так:
p {
margin-top
: 0px
;
margin-right
: 25px
;
margin-bottom
: 0px
;
margin-left
: 25px
;
}
Это свойство - стенографическое, которое применяется для сокращенной записи выше перечисленных свойств. Свойство margin может иметь количество значений от одного до четырех:
p {margin : 15px 5px 20px }
В этом примере верхнее поле абзаца будет равно 15px, правое и левое поля по 5px, нижнее поле будет 20px.
При помощи CSS можно заключить текст абзаца в рамку, как например это сделано на страницах сайта в виде примеров. Данные свойства задают только толщину границ блока для верхнего, правого, нижнего и левого сегментов. Значения можно задвать ключевыми словами:
Так же значения можно задавать в любых единицах длины, в процентах значения не задаются. Правило можно записать так:
p {
border-top-wdth
: 1px
;
border-right-wdth
: 2px
;
border-bottom-wdth
: medium
;
border-left-wdth
: thin
;
}
Это стенографическое свойство, значения задаются так же как у свойства . Правило записанное ниже будет соответствовать записанному выше примеру:
p {border-width : 1px 2px medium thin }
Это свойство так же стенографическое, с его помощью задается границ блока, значениями являются:
Если необходимо задать разные цвета каждой из четырех границ, то применяются свойства:
Правило для такого примера будет выглядеть так:
p {
border-top-color
: blue
;
border-right-color
: 000000
;
border-bottom-color
: FF0000
;
border-left-color
: rgb (25, 125, 205)
;
}
Свойство стенографическое, оно задает тип линий, которыми являются границы блока. Для задания различных типов линий, для границ блока, используются индивидуальные свойства:
Значениями свойства являются ключевые слова:
Посмотрим на примерах:
Стенографическое свойство border-style позволяет сокращать значения стилей для всех четырех сегментов границы, задается так же как для свойства . Пишем правило для блока с границами выполненными пунктирной линией:
p {border-style : dashed }
Это стенографические свойства, которые позволяют сокращенно записать значения свойств 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.
Это свойство стенографическое и применяется для задания параметров всех четырех сегментов границ: ширины, цвета и стиля. Пишем пример правила:
p {border : 1px solid blue }
Граница вокруг этого абзаца будет одинаковой со всех сторон, выполненой сплошной линией синего цвета толщиной 1px.
Эти свойства позволяют задать размеры отступов для каждой стороны в отдельности, значения задаются в единицах длины или в процентах:
Это стенографическое свойство, которое применяется для сокращенной записи выше описанных свойств. Свойство padding может иметь от одного до четырех значений, которые присваиваются так же как для (полей) и (границ). Запишем такое правило:
p {
background-color
: white
;
border
: 2px dotted blue
;
padding
: 10px 25px
}
На примере получившегося абзаца посмотрим как работают отступы:
Именно от того, насколько оптимизирован сайт, зависит позиция, на которой поисковые системы будут выдавать его в результатах поиска. Чем выше эта позиция, тем больше посетителей вы получите с поисковиков. Важным этапом оптимизации является наполнение сайта качественным, уникальным контентом. Не нужно копировать с других ресурсов интересные статьи по своей тематике, повторять то, что уже есть на просторах всемирной паутины.
На этом, я считаю, что первое знакомство с каскадными таблицами стилей CSS можно закончить и самостоятельно приступить к . Этих знаний вполне хватит для начала, так что вперед, к покорению просторов гиперпространства.