3.1. Определение размеров элементов. Высоту и ширину элементов можно задать при помощи ненаследуемых свойств height и width, которые в качестве значений принимают все доступные в CSS единицы измерения длины, а также проценты. Кроме того, свойства принимают значение auto, которое используется браузером по умолчанию и сообщает ему о том, что высоту и ширину элемента нужно устанавливать автоматически таким образом, чтобы в нем поместилось все его содержимое. Применение этих свойств к строчным элементам не будет иметь эффекта. Также не будет иметь эффекта установка ширины для строк таблицы и высоты для колонок таблицы.
По умолчанию, говоря о высоте и ширине, имеются в виду размеры области содержимого элемента, которые не включают в себя внутренние отступы и границы элемента (см. рис. 3.1). Если же требуется, чтобы браузер, имея дело со свойствами height и width, интерпретировал их значения по другому, необходимо использовать свойство box-sizing, которое может принимать следующие значения:
Рис 3.1. Общая схема элемента
Также имеются возможности для указания минимально и максимально допустимых значений высоты и ширины. Для этого предназначены ненаследуемые свойства min-height и min-width, max-height и max-width (см. пример 3.2). Если высота (ширина) элемента будет меньше, чем значение свойства min-height (min-width), то браузер отдаст приоритет значению свойства min-height (min-width). Аналогично, если высота (ширина) элемента будет больше, чем значение свойства max-height (max-width), то браузер отдаст приоритет значению свойства max-height (max-width).
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Размеры элементов</title> <style> .size_1{ background-color: yellow; width: 250px; height: 15vh; } .size_2{ background-color: violet; min-width: 350px; max-height: 400px; width: 250px; height: 150px; } </style> </head> <body> <p class="size_1"> Ширина абзаца равна 250px, высота – 15% <br>от высоты области просмотра окна браузера. </p> <p class="size_2"> Ширина абзаца будет 350px, т.к. width меньше min-width, <br>а высота – 150px, т.к height меньше max-height. </p> </body> </html>
Пример 3.2. Установка размеров элементов
В конце пункта отметим, что свойства min-height, min-width, max-height и max-width в качестве значений принимают все доступные в CSS единицы измерения длины, а также проценты. Но, в отличие от свойств определения высоты и ширины, они не принимают значение auto.
3.2. Установка границ элементов. Для установки границ элементов CSS предоставляет целый набор свойств, позволяющих задать стиль, толщину и цвет границ как по отдельности для каждой из сторон элемента, так и для всех сторон одновременно. Свойств достаточно много, но описывать их все по отдельности мы не будем, т.к. они очень похожи по своему назначению и легко разбиваются на группы.
Для установки стиля границ используются следующие ненаследуемые свойства border-style, border-top-style, border-bottom-style, border-left-style, border-right-style (см. пример 3.3). Все они могут принимать ряд значений, которые определяют внешний вид границы:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Установка границ элементов</title> <style> .b_s{ border-color: red; border-width: 5px; } </style> </head> <body> <span style="border-style: dotted" class="b_s">dotted</span> <span style="border-style: dashed" class="b_s">dashed</span> <span style="border-style: solid" class="b_s">solid;</span> <span style="border-style: double" class="b_s">double</span> <br><br> <span style="border-style: groove" class="b_s">groove</span> <span style="border-style: ridge" class="b_s">ridge</span> <span style="border-style: inset" class="b_s">inset</span> <span style="border-style: outset" class="b_s">outset</span> </body> </html>
Пример 3.3. Определение внешнего вида границ элементов (пример №1)
Следует отметить, что свойство border-style может принимать через пробел два, три или даже четыре значения (см. пример 3.4):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Установка границ элементов</title> <style> .b_s{ border-color: blue; border-width: 5px; } </style> </head> <body> <span style="border-style: dotted outset" class="b_s"> dotted outset </span> <span style="border-style: dashed solid double" class="b_s"> dashed solid double </span> <span style="border-style: dashed solid dotted double" class="b_s"> dashed solid dotted double </span><br><br> <span style="border-bottom-style: double" class="b_s"> double </span> </body> </html>
Пример 3.4. Определение внешнего вида границ элементов (пример №2)
Если нет необходимости задавать сразу все четыре границы элемента или нужно установить (изменить) стиль границы одной отдельной стороны, следует воспользоваться одним из свойств border-top-style, border-bottom-style, border-left-style или border-right-style (см. пример 3.4).
Для установки ширины границ используются похожие ненаследуемые свойства border-width, border-top-width, border-bottom-width, border-left-width, border-right-width (см. пример 3.5). Все они могут принимать ряд значений, которые определяют ширину границы:
Опять же, свойство border-width может принимать через пробел два, три или даже четыре значения, которые задают ширину границ по описанному выше алгоритму (смотреть).
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Установка границ элементов</title> <style> .b_s_1{ width: 300px; border-style: solid; border-color: #0000ff; border-bottom-width: 8px; } .b_s_2{ width: 300px; border-style: solid; border-right-color: violet; border-left-width: 8px; } </style> </head> <body> <p class="b_s_1"> Ширина нижней границы равна 8px, а ширина остальных<br> устанавливается браузером по умолчанию. </p> <p class="b_s_2"> Граница правой стороны имеет фиолетовый цвет, остальные<br> имеют цвет, устанавливаемый браузером по умолчанию. </p> <p style="border-bottom: double red 2px; width: 300px;"> Заданы характеристики нижней границы. </p> </body> </html>
Пример 3.5. Определение внешнего вида границ элементов (пример №3)
Для установки цвета границ используются ненаследуемые свойства border-color, border-top-color, border-bottom-color, border-left-color, border-right-color (см. пример 3.5). Все они принимают в качестве значений цвет либо специальное значение transparent, делающее рамку прозрачной (бесцветной), при этом сама граница остается, влияя на размеры элемента. Свойство border-color, кроме того, может принимать через пробел два, три или даже четыре значения, которые задают цвет границ по описанному выше алгоритму (смотреть).
Имеется возможность задать все характеристики границы элемента одновременно при помощи универсальных ненаследуемых свойств border, border-top, border-bottom, border-left, border-right (см. пример 3.5). Стиль, ширину и цвет при этом нужно указывать через пробел, но в любом порядке.
Внешний вид границ элементов можно также изменять за счет величины скругления углов границ элементов. Делается это за счет использования ненаследуемых ствойств border-radius, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius. Все они принимают в качестве радиуса значения в любых доступных в CSS единицах измерения, а также процентах, отсчет которых производится относительно ширины блока. Также можно через слэш '/' задавать сразу два радиуса, если подразумевается сгругление по эллипсу (см. рис. 3.6 и пример 3.7). Свойства срабатывают и при отсутствии границ, в этом случае происходит скругление фона элемента.
Рис. 3.6. Схема скругления углов рамки элемента
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Установка границ элементов</title> <style> .b_s_1{ width: 250px; border-style: solid; border-color: #ff0000; border-radius: 10em 0.5em/1em; } .b_s_2{ width: 250px; border-style: solid; border-color: violet; border-bottom-left-radius: 8px; border-bottom-right-radius: 30%; } </style> </head> <body> <p class="b_s_1"> <br> border-radius: 10em 0.5em/1em<br><br> </p> <p class="b_s_2"> <br> border-bottom-right-radius: 30%<br> border-bottom-left-radius: 8px<br><br> </p> </body> </html>
Пример 3.7. Определение внешнего вида границ элементов (пример №4)
Свойство border-radius, кроме того, может принимать через пробел два, три или даже четыре значения:
Если необходимо выделить элемент внешней рамкой, при этом не влияя на его размеры или положение в документе, используются ненаследуемые свойства outline, outline-style, outline-width, outline-color (см. пример 3.8). Все они могут принимать практически те же значения, что и соответствующие свойства, использующиеся для определения внешнего вида границ элементов. Отличие есть только у свойства outline-color, принимающего вместо специального значения transparent значение invert, которое указывает браузеру на необходимость инверсии цвета для того, чтобы гарантировать видимость границы при любом цвете фона элемента.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Установка границ элементов</title> <style> .b_s_1{ border: solid 5px red; outline: dashed 5px green; outline-offset: 8px; } .b_s_2{ border: solid 5px violet; outline: groove 8px orange; outline-offset: 3px; } </style> </head> <body> <br> <span class="b_s_1"> Расстояние между границами равно 8px. </span> <br><br><br><br> <span class="b_s_2"> Расстояние между границами равно 3px. </span> </body> </html>
Пример 3.8. Определение внешнего вида границ элементов (пример №5)
Для внешних границ дополнительно определено еще одно полезное ненаследуемое свойство outline-offset, которое позволяет задавать расстояние между внешней и внутренней границами. В качестве значения свойство принимает величину расстояния в любых доступных единицах измерения CSS (см. пример 3.8). Кроме того, разрешается использовать и отрицательные значения, тогда рамка будет отображена внутри самого элемента.
Вместо использования внешней рамки имеется возможность эффективного выделения элементов при помощи теней. Для этого применяется ненаследуемое свойство box-shadow, которое создает одну или несколько теней, значения которых тогда нужно перечислять через запятую. Формат записи свойства имеет вид {box-shadow: смещение_x смещение_y размытие размер цвет inset} (см. пример 3.9), где:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Установка теней элементов</title> <style> .size_1{ width: 300px; height: 100px; } .p_1{ border: solid 5px red; background-color: yellow; box-shadow: 10px 10px 50px 15px blue; } .p_2{ border: solid 5px orange; background-color: violet; box-shadow: 5px 5px 8px 10px blue inset, 10px 10px 8px 10px green, 15px 15px 8px 10px red, } </style> </head> <body> <p class="p_1 size_1"> Одна тень. </p> <br><br><br> <p class="p_2 size_1"> Несколько теней. </p> </body> </html>
Пример 3.9. Использование свойства box-shadow
Для указания числовых значений параметров свойства box-shadow разрешается использовать все доступные в CSS единицы измерения, а для указания цвета использовать все доступные в CSS цветовые модели.
3.3. Определение внешних отступов элементов. Под внешним отступом элемента подразумевается расстояние от границы текущего элемента до соответствующей границы родительского элемента либо до соответствующей границы соседнего элемента (см. рис. 3.1). Для установки внешних отступов используются ненаследуемые свойства margin, margin-top, margin-right, margin-left, margin-bottom (см. пример 3.10). В качестве значений принимаются величины отступов в любых допустимых в CSS единицах измерения, включая отрицательные значения, а также процентах, которые рассчитываются относительно ширины области содержимого родительского элемента (не ширины самого элемента). Имеется возможность указать в качестве значения параметр auto, который указывает браузеру на автоматическое определение отступов.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Определение внешних отступов элементов</title> <style> .marg_1{ margin: 10px; border: solid 1px red; } .marg_2{ margin: 30px; border: solid 1px blue; } .b_s{ border: solid 2px violet; width: 400px; height: 100px; margin-top: 50px; margin-left: 30px; } </style> </head> <body> <p class="b_s"><br> <!-- У строчных элементов вертикальные отступы не работают. --> <!-- У соседних элементов соответствующие отступы --> <!-- объединяются, при чем используется большее значение --> <span class="marg_1">margin: 10px</span> <span class="marg_2">margin: 30px</span> </p> </body> </html>
Пример 3.10. Определение внешних отступов элементов
Опять же, универсальное свойство margin может принимать через пробел два, три или даже четыре значения, которые задают внешние отступы по описанному выше алгоритму (смотреть).
Внешние отступы нельзя устанавливать элементам, для которых свойство display имеет одно из значений: table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column.
Следует отметить, что вертикальные отступы не срабатывают в отношении строчных элементов, хотя горизонтальные работают правильно. Кроме того, у элемента 'body' по умолчанию присутствуют внешние отступы, которые отсчитываются относительно края окна браузера. Их можно убрать, задав для тела документа значение margin равное нулю.
3.4. Определение внутренних отступов (полей) элементов. Под внутренним отступом (полем) элемента подразумевается расстояние от внутренней стороны линии границы текущего элемента до соответствующей воображаемой стороны прямоугольника, ограничивающего содержимое элемента (см. рис. 3.1). Для установки полей используются ненаследуемые свойства padding, padding-top, padding-right, padding-left, padding-bottom (см. пример 3.11). В качестве значений принимаются величины полей в любых допустимых в CSS единицах измерения, а также процентах, которые рассчитываются относительно ширины области содержимого родительского элемента (не ширины самого элемента). Кстати, в отличие от внешних отступов, использование отрицательных значений при установке полей не допускается.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Определение внутренних отступов элементов</title> <style> .pad_1{ padding: 10px; border: solid 1px red; } .pad_2{ padding: 30px; padding-left: 50px; border: solid 1px blue; } .b_s{ border: solid 2px violet; width: 400px; height: 100px; margin-top: 30px; margin-left: 10px; } </style> </head> <body> <p class="b_s"><br> <span class="pad_1">padding: 10px</span> <span class="pad_2">padding: 30px</span> </p> </body> </html>
Пример 3.11. Определение внутренних отступов (полей) элементов
Опять же, универсальное свойство padding может принимать через пробел два, три или даже четыре значения, которые задают внешние отступы по описанному выше алгоритму (смотреть).
Как и в случае с внешними отступами, нельзя устанавливать поля элементам, для которых свойство display имеет одно из значений: table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column.
В конце пункта отметим, что внутренние поля влияют на размеры самого элемента, являясь частью его конструкции, в отличие от внешних отступов, которые элементу не принадлежат и на его размеры не влияют.
Контрольные вопросы и задания
Словарь новых английских слов
width [wɪtθ] – ширина. hidden [ˈhɪdn] – скрытый, спрятанный. dotted [ˈdɒtɪd] – линия в виде точек. dashed [daʃt] – штриховая линия. solid [ˈsɒlɪd] – цельный, сплошной. double [ˈdʌb(ə)l] – парный, двойной. groove [ɡruːv] – желобок, канавка, паз. ridge [rɪdʒ] – ребро, край, гребень. inset [ˈɪnsɛt] – вставлять, вкладка. |
shadow ['∫ædəu] – тень. outset [ˈaʊtsɛt] – начало, отправление. thin [θɪn] – тонкий, худой. thick [θɪk] – толстый, густой. outline [ˈaʊtlʌɪn] – контур, обвод, очертание. transparent [tranˈspar(ə)nt] – прозрачный. margin [ˈmɑːdʒɪn] – поле (страницы). display [dɪˈspleɪ] – показ, отображение. padding [ˈpadɪŋ] – внутренние поля (элемент). |