Время от времени я встречаюсь с достаточно необычными текстовыми полями, которые сделать обычными возможностями HTML и CSS не представляется возможным. Там присутствуют закругления, градиенты, тени и другие графические навороты. И в этой статье я расскажу, как сделать красивое текстовое поле на HTML-странице , имеющее все эти графические навороты.
Первым делом, Вам необходимо сделать 3 картинки из текстового поля:
- Левый угол . Должен затрагивать самое начало текстового поля (например, его тень) слева и идти до момента, когда уже закругления нет.
- Правый угол . Аналогично левому углу, но с другой стороны.
- Полоска основной части . Эта полоска должна быть в ширину 1 пиксель и должна быть вырезана где-нибудь посередине текстового поля.
Очень важный момент заключается в том, что все 3 картинки должны быть одинаковой высоты . Следующий этап - это HTML-код :
Как видите, мы сделали таблицу из 1-й строки и 3-х столбцов . В первом столбце у нас планируется левый угол, во втором - само текстовое поле, в третьем - правый угол.
И теперь CSS-код :
Input_left {
background: url("input_left.jpg") no-repeat scroll 0 0 transparent; //Фон с левым углом
}
.input_right {
background: url("input_right.jpg") no-repeat scroll 0 0 transparent; //Фон с правым углом
}
input {
background: url("bg_input.jpg") repeat-x scroll 0 0 transparent; //Фон текстового поля
border: none; //Убрать стандартную рамку у текстового поля
height: 35px; //Высота картинки
outline: none; //Убрать рамку фокуса в IE
width: 200px; //Требуемая ширина текстового поля
}
Если Вы всё сделали правильно, то теперь Вы можете любоваться на своей странице красивым текстовым полем. На практике данный способ используется постоянно (не только для текстовых полей), поэтому знать его надо любому верстальщику.
В предыдущей главе мы упоминали о таких свойствах CSS, как margin (поле) и padding (отступ). Теперь мы остановимся на них более подробно и рассмотрим, чем они отличаются друг от друга и какие особенности имеют.
Создавать промежутки между элементами можно и тем, и другим способом, но если padding – это отступ от содержимого до края блока, то margin – это расстояние от одного блока до другого, межблоковое пространство. На скриншоте показан наглядный пример:
Padding отделяет содержимое от границы блока, а margin создает промежутки между блоками
Как видите, поля и отступы CSS отличаются между собой, хоть иногда без просмотра кода и нельзя определить, с помощью какого свойства задано расстояние. Это случается в тех случаях, когда отсутствует рамка или фон блока с содержимым.
Для установки полей или отступов в CSS от каждой стороны элемента существуют следующие свойства:
Отступы:
- padding-top: значение;
- padding-right: значение;
- padding-bottom: значение;
- padding-left: значение;
Поля:
- margin-top: значение;
- margin-right: значение;
- margin-bottom: значение;
- margin-left: значение;
Значения могут быть указаны в любых единицах CSS – px, em, % и т. д. Пример: margin-top: 15px .
Также существует очень удобная вещь как сокращенная запись margin и padding CSS . Если вам необходимо задать поля или отступы для всех четырех сторон элемента, совсем необязательно записывать свойство для каждой стороны по отдельности. Всё делается проще: для margin и padding можно указывать сразу 1, 2, 3 или 4 значения. От количества значений зависит, как распределяются настройки:
- 4 значения: задаются отступы для всех сторон элемента в такой последовательности: сверху, справа, снизу, слева: padding: 2px 4px 5px 10px;
- 3 значения: задается отступ сначала для верхней стороны, потом одновременно для левой и правой, а затем – для нижней: padding: 3px 6px 9px;
- 2 значения: задаются отступы сначала одновременно от верхней и нижней стороны, а затем – одновременно для левой и правой: padding: 6px 12px;
- 1 значение: задаются одинаковые отступы для всех сторон элемента: padding: 3px;
Те же правила касаются и свойства margin CSS. Обратите внимание на то, что для margin можно использовать и отрицательные значения (например, -3px), которые иногда бывают весьма полезными.
Схлопывание margin
Представьте ситуацию: два блочных элемента находятся друг над другом и им заданы поля margin. Для верхнего блока установлено значение margin: 60px , а для нижнего – margin: 30px . Логично было бы предположить, что два граничащих поля двух элементов просто соприкоснутся и в итоге промежуток между блоками будет равен 90 пикселям.
Однако дела обстоят по-другому. На самом деле в такой ситуации проявляется эффект, который называют схлопыванием, когда из двух примыкающих полей элементов выбирается наибольший по размеру. В нашем примере итоговый промежуток между элементами будет равен 60 пикселям.
Расстояние между блоками равно большему из значений
Схлопывание margin работает только для верхних и нижних полей элементов и не относится к полям с правой и левой сторон. Окончательная величина промежутка высчитывается в разных ситуациях по-разному:
- Когда оба значения margin положительные, итоговый размер поля будет равен бóльшему значению.
- Если одно из значений является отрицательным, то для вычисления размера поля нужно получить сумму значений. Например, при значениях 20px и -18px размер поля будет равен:
20 + (-18) = 20 — 18 = 2 пикселя. - Если оба значения отрицательные, сравниваются модули этих чисел и выбирается число, бóльшее по модулю (следовательно, меньшее из отрицательных чисел). Пример: необходимо сравнить значения полей -6px и -8px . Модули сравниваемых чисел равны 6 и 8 соответственно. Отсюда следует, что 6 -8 . Итоговый размер поля равен -8 пикселей.
- В случае, когда значения указаны в разных единицах CSS, они приводятся к одной, после чего сравниваются и выбирается бóльшее значение.
- Размер margin для дочерних элементов определяется еще более интересно: если у потомка поле margin больше, чем у родителя, то приоритет отдается ему. В этом случае размеры верхнего и нижнего полей родителя станут такими, как задано у потомка. При этом расстояния между родителем и потомком не будет.
В этой главе мы поговорим о полях (свойство margin ) и отступах (свойство padding ) элемента. Между собой эти два свойства весьма схожи, однако все же это два абсолютно разных свойства.
Давайте разберемся в этих понятиях..
Поле (margin ) - Это расстояние от внешней границы элемента до границы окна браузера или же элемента родителя.. ну границы того блока в который вложен наш элемент.
Отступом (padding ) - Называют расстояние от внутренней границы элемента до его содержания текста, картинок таблиц..
На рисунке наглядно показаны эти расстояния, а так же место занимаемое бордюром (border ) про него тоже не следует забывать.
Расстояния margin и padding указываются:
- px - В пикселях или любых других допустимых CSS единицах измерения.
- % - В процентах.
- auto - Размер полей и отступов автоматически рассчитывается браузером.
Давайте попробуем сделать тоже самое, что показано на рисунке с помощью блоков Попробуйте поменять значения свойств margin
и padding
и Вы поймете, что к чему.. а если и так понятно идем дальше.. В примере выше присудив свойствам margin
и padding
по одному значению, мы определили поля и отступы элемента со всех четырех его сторон. Для того чтобы указать разные размеры полей и отступов для каждой из сторон элемента, необходимо указывать два, три или четыре аргумента через пробел. Причем в зависимости от количества значений результат будет разным. Вот примеры: margin: 5px
; - одно значение
. margin: 5px 40px;
- два значения.
margin: 5px 40px 20px;
- три значения.
margin: 5px 40px 20px 1px;
- четыре значения.
С padding
дело происходит по тому же принципу, как и с margin
, отступы от внутренних границ элемента до содержания приобретают размеры в зависимости от количества аргументов и их значений. Свойства CSS margin
и padding
являются базовыми и имеют ряд дочерних свойств. У margin
зто: И у padding
соответственно: Ну думаю понятно.. если возникает необходимость определить отступ или поле от одной единственной стороны элемента лучше воспользоваться одним из вышеперечисленных свойств. Поля и отступы являются одними из основных составляющих дизайна сайта, по этому поводу следует придерживаться нескольких рекомендаций. Избегайте коротких, и уж тем более, нулевых отступов от содержимого к границам элемента, особенно это касается текстовых блоков. Текст с маленькими полями и отступами читается трудно и "вязко". Соблюдайте правила пропорциональности и соизмеримости полей и отступов как для отдельно взятого элемента, так и для всей страницы (композиции элементов) целиком. Один из способов акцентирования внимания посетителя страницы на нужном Вам месте - это отступы размером больше обычного, такой контраст заставит зрителя смотреть и проявить внимание к "особым" местам в тексте.. Модуль CSS Box Alignment определяет CSS-функции, которые относятся к выравниванию ящиков в различных моделях макета CSS: макет блока, макет таблицы, гибкая макет и макет сетки. Модуль нацелен на создание согласованного метода выравнивания по всем CSS. В этом документе описываются общие понятия, содержащиеся в спецификации. Примечание
: Документация для каждого метода макета будет подробно описана, как там применяется шкала выравнивания. У CSS традиционно были очень ограниченные возможности выравнивания. Мы могли выровнять текст, используя text-align , центральные блоки, используя auto margin s, а в макетах таблицы или встроенного блока, используя vertical-align свойство. Выравнивание текста теперь покрывается модулями Inline Layout и CSS Text , и впервые в Box Alignment мы имеем полные возможности горизонтального и вертикального выравнивания. В этом примере с использованием Grid Layout, в контейнере сетки есть дополнительное пространство после прокладки фиксированных дорожек ширины на основной оси. Это пространство распределяется с помощью justify-content . На блочной (поперечной) оси выравнивание элементов внутри их областей сетки контролируется с помощью align-items . Первый элемент переопределяет значение элементов выравнивания, заданное в группе, путем установки align-self в центр. В этом примере три элемента гибкости выровнены по главной оси с использованием justify-content и на поперечной оси с использованием align-items . Первый элемент переопределяет align-items , заданные в группе align-self по center . Спецификация описывает некоторую терминологию выравнивания, чтобы упростить обсуждение этих свойств выравнивания вне их реализации в рамках конкретного метода компоновки. Существуют также некоторые ключевые концепции, которые являются общими для всех методов макета. Выравнивание связано с режимами записи, когда мы выравниваем элемент, который мы не рассматриваем, если мы сопоставляем его с физическими размерами сверху, справа, снизу и слева. Вместо этого мы описываем выравнивание с точки зрения начала и конца конкретного измерения, с которым мы работаем. Это гарантирует, что выравнивание работает так же, как в режиме записи, который имеет документ. При использовании свойств выравнивания ячеек вы выровняете содержимое по одной из двух осей - inline (или main) оси и block (или cross) оси. Внутренняя ось - это ось, по которой используются слова в потоке предложения в режиме записи - для английского языка, например, встроенная ось горизонтальна. Ось блока - это ось, вдоль которой выложены блоки, такие как элементы абзаца, и проходит по оси Inline. При выравнивании элементов на встроенной оси вы будете использовать свойства, начинающиеся с justify- : При выравнивании элементов на оси блока вы будете использовать свойства, которые начинаются с align- : Flexbox добавляет дополнительное усложнение в том, что указанное выше верно, когда flex-direction установлено в row . Свойства меняются местами, когда flexbox установлен в column . Поэтому при работе с flexbox легче думать о главной и поперечной оси, а не о линии и блоке. Свойства justify- всегда используются для выравнивания по главной оси, align- на поперечной оси. Объект выравнивания
- это то, что выровнено. Для justify-self , или align-self , или при настройке этих значений как группы с justify-items или align-items это будет поле элемента, в котором используется это свойство. Свойства justify-content и align-content различаются для каждого метода макета. Контейнер выравнивания
- это поле, в котором объект выравнивается внутри. Обычно это будет блок, содержащий объект выравнивания. Контейнер выравнивания может содержать один или несколько объектов выравнивания. На приведенном ниже рисунке показан контейнер выравнивания с двумя объектами выравнивания внутри. Если вы установите выравнивание, которое не может быть выполнено, тогда возвратное выравнивания
вступит в игру и обработает доступное пространство. Это резервное выравнивание указывается отдельно для каждого метода макета и подробно описано на странице для этого метода. Существует три различных типа выравнивания, которые специфицируют детали; они используют значения ключевых слов. Следующие значения определены для позиционного выравнивания и могут использоваться в качестве значений для выравнивания содержимого с justify-content и align-content , а также для самовыравнивания с justify-self и align-self . Помимо физических значений left и right , которые относятся к физическим атрибутам экрана, все остальные значения являются логическими значениями и относятся к режиму записи содержимого. Например, при работе в CSS Grid Layout, если вы работаете на русском языке и устанавливаете для него значение justify-content start , это приведет к перемещению элементов в встроенном измерении в начало, которое будет левым, поскольку предложения на русском начинаются слева. Если вы использовали арабский язык, право на левый язык, то одно и то же значение start приведет к тому, что элементы перемещаются вправо, так как предложения на арабском языке начинаются с правой стороны страницы. Оба этих примера имеют justify-content: start , однако местоположение начала изменяется в соответствии с режимом записи. Ключевые слова выравнивания базовой линии используются для выравнивания базовых линий ящиков по группе субъектов выравнивания. Они могут использоваться в качестве значений для выравнивания контента с помощью justify-content и align-content , а также для самовыравнивания с justify-self и align-self . Исходное выравнивание содержимого - указание значения выравнивания базовой линии для justify-content или align-content - работает в методах макета, которые содержат элементы в строках. Объекты выравнивания выравниваются по базовой линии друг к другу, добавляя в них поля. Исходная линия выравнивания сдвигает поля для выравнивания по базовой линии путем добавления поля за пределами полей. Self alignment - это использование justify-self или align-self или при настройке этих значений в виде группы с justify-items и align-items . Ключевые слова расспеределенного выравнивания
используются с параметрами align-content и justify-content . Эти ключевые слова определяют, что происходит с каким-либо дополнительным пространством после отображения объекта. Значения следующие: Например, элементы Flex Layout сначала выровнены с использованием flex-start. Работая в горизонтальном верхнем и нижнем режимах записи, таком как русский, с flex-direction в виде row элементы начинаются в крайнем левом углу и любое свободное место после отображения элементов помещается после элементов. Если вы устанавливаете justify-content: space-between в контейнере flex, доступное пространство теперь разделяется и помещается между элементами. Для того, чтобы эти ключевые слова вступили в силу, должно быть доступно пространство в измерении, для которого вы хотите выровнять элементы. Без места, нечего распространять. safe и unsafe ключевые слова помогают определить поведение, когда объект выравнивания больше, чем контейнер выравнивания. Ключевое слово safe будет выравниваться для start в случае заданного выравнивания, вызывающего переполнение, целью которого является избежать «потери данных», когда часть элемента находится за пределами границ контейнера выравнивания и не может быть прокручена до. Если вы укажете unsafe , выравнивание будет выполнено, даже если это приведет к такой потере данных. Спецификация выравнивания коробки также включает свойства gap , row-gap и column-gap . Эти свойства позволяют установить постоянный разрыв между элементами в строке или столбце в любом методе макета, который имеет элементы, расположенные таким образом. Свойство gap является сокращением для row-gap и column-gap , что позволяет сразу установить эти свойства. Со структурой блока, надеюсь, Вы уже знакомы. Если нет, то она представлена ниже. Структура блока
И так. Вам уже, наверное, известно, что поля и отступы у блока представлены свойствами 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 пикселей!
Возможные значения margin и padding.
Одно значение - Поля одинаковые со всех сторон.
Первое значение - Устанавливает поля от верхней и нижней границ.
Второе значение - Устанавливает поля от левой и правой границ элемента.
Первое значение - Устанавливает поле от верхней границы элемента.
Второе значение - Устанавливает поле от правой границы элемента.
Третье значение - Устанавливает поле от нижней границы элемента.
Четвёртое значение - Устанавливает поле от левой границы элемента.
Осмысливая мысли в смысле смысла, есть смысл помыслить о немыслимом!
Дочерние свойства margin и padding.
Осмысливая мысли в смысле смысла, есть смысл помыслить о немыслимом!
Мало кто знает, как много надо знать, для того чтобы знать, как мало мы знаем!
Старые методы выравнивания
Пример выравнивания раскладки сетки CSS
Пример выравнивания Flexbox
Ключевые понятия и терминология
Связь с режимами записи
Два измерения выравнивания
The alignment subject
The alignment container
Fallback alignment
Типы выравнивания
Значения ключевых слов позиционирования
Исходное выравнивание
Distributed alignment
Выравнивание переполнения
Пробелы между boxes
;
">
