Css команда отвечающая за рамку. CSS: border
В этой главе:
Блочная модель - способ отображения элементов браузерами, которые обрабатывают все теги как небольшие блоки, для них любой тег - контейнер с содержимым: текстом, изображениями, другими тегами и т.д.
- Margin (внешний отступ) - пустое пространство (поле), которое отделяет один элемент от другого. Самый простой пример внешнего отступа - промежуток между абзацами, идущими друг за другом. Область внешнего отступа прозрачна и не может иметь свой цвет и других эффектов оформления.
- Border (рамка элемента) - граница с любой стороны элемента. Рамка может быть установлена как со всех сторон элемента, так и с одной стороны. Используя рамку можно просто красиво оформить элемент или визуально отделить содержимое текущего элемента от других элементов страницы.
- Padding (внутренний отступ) - пустое пространство между содержимым элемента и его рамкой. Область внутреннего отступа прозрачна и не может иметь свой цвет или другие эффекты оформления.
- У большинства элементов есть область содержимого, в которой располагается все содержимое элемента (текст, вставляемые изображения или другие элементы).
Рамка
Рамка представляет собой обычную линию, которая отображается вокруг стилизуемого элемента. Но совсем не обязательно применять рамку, окружающую элемент со всех сторон. Можно добавить ее только с требуемой строны элемента. Например, если добавить рамку только с нижней строны блочного элемента, то она будет производить тот же эффект, что и элемент
(горизонтальная линия), выступая в качестве разделителя.
Каждая рамка имеет три свойства, которыми мы можем управлять с помощью CSS: ширина, стиль и цвет, рассмотрим с помощью каких свойств можно их задавать и изменять:
Вместо указания всех трех свойств, можно указать всего одно - свойство border , которое позволяет одновременно указать ширину, стиль и цвет для рамки:
Первый абзац.
Второй абзац.
Третий абзац.
Для управления рамкой отдельно с каждой стороны элемента, используются соответствующие свойства:
- border-top - верхняя рамка
- border-left - левая рамка
- border-right - правая рамка
- border-bottom - нижняя рамка
Эти свойства работают точно так же, как и свойство border, с тем исключением, что позволяют управлять рамкой только с одной стороны стилизуемого элемента.
Внешний и внутренний отступы
Внутренний отступ - пустое пространство между содержимым элемента и его рамкой (если она установлена). Для добавления и управления шириной внутренних отступов со всех четырех сторон элемента используется свойство padding .
Внешний отступ - пустое пространство, отделяющее элемент от других элементов или краев окна браузера. Для добавления и управления шириной внешних отступов со всех четырех сторон элемента используется свойство margin .
Свойства padding и margin могут принимать от одного до четырех значений:
Где значения устанавливаются по часовой стрелке, начиная с верхнего:
Если у свойств указать всего одно значение, то отступы со всех сторон будут одинаковой ширины.
На первый взгляд видимый эффект при использовании данных свойств выглядит одинаковым, чтобы заметить визуальную разницу между ними, можно например установить рамку для элемента или задать задний фон:
Обычный абзац.
Для отступов, так же как и для рамок, есть свойства позволяющие управлять размером отступа с каждой стороны отдельно. Внутренние отступы регулируются свойствами: padding-top , padding-right , padding-bottom и padding-left . Внешние отступы регулируются свойствами: margin-top , margin-right , margin-bottom и margin-left .
Примечание: значения свойств padding и margin не наследуются дочерними элементами, поэтому нужно указывать ширину отступов отдельно для каждого элемента, которому они необходимы.
Ширина и высота элемента
По умолчанию для блочных элементов используется автоширина. Это означает, что элемент будет растянут ровно на столько, сколько есть свободного места. Высота блочных элементов по умолчанию устанавливается автоматически, т.е. браузер растягивает область содержимого в вертикальном направлении так, чтобы отобразилось все содержимое. Чтобы установить собственные размеры для области содержимого элемента, вы можете использовать свойства width и height.
Чтобы четко отделить содержимое одной ячейки от другой, к ячейкам добавляются границы. За их создание отвечает параметр border тега
| Чебурашка | Крокодил Гена | Шапокляк |
Рамки созданные таким образом незначительно отличаются по своему виду в разных браузерах.
Рис. 1. Рамка, полученная с помощью параметра border
Чтобы получить рамку одного вида, рекомендуется применить стилевым тегом border , применяя его к ячейкам таблицы (тегу
| 0 | X | X |
| 0 | 0 | X |
| X | X | 0 |
Разница между границами таблицы при добавлении параметра border-collapse , а также без него представлена на рис. 2.
a
б
Рис. 2. Вид таблицы при использовании атрибута border-collapase
На рис. 2а показана рамка таблицы, используемая по умолчанию. Обратите внимание, что внутри таблицы все линии имеют удвоенную толщину. Добавление параметра border-collapse убирает эту особенность, и толщина всех линий становится одинаковой (рис. 2б).
Для разработки однотипных линий внутри таблицы можно пойти и другим путем. Следует добавляем для селектора
| 0 | X | X |
| 0 | 0 | X |
| X | X | 0 |
У этого способа возможны вариации, например, для селектора
или
В данном примере цвет фона web-страницы вводится через свойство background , добавленное к селектору BODY . Хотя белый цвет установлен по умолчанию, его иногда желательно задавать, чтобы пользователь не указал свой цвет фона через настройки браузера. Такой же цвет должен быть и у линий таблицы, в этом случае они явно не выдаются и лишь делят ячейки между собой. Результат примера 4 показан ниже.
Рис. 3. Вид границ, совпадающих с цветом фона Для управления границей элемента применяется универсальное свойство border . Это свойство позволяет установить в одном объявлении толщину, стиль и цвет границы элемента. Эти три свойства (толщину, стиль и цвет границы) можно установить в одном объявлении. Вот пример:
Блок div с рамкой 3px красного цвета.
Можно указать стиль границы только на одной стороны элемента. Для этого применяют свойства border-top (верхняя граница), border-right (правая граница), border-bottom (нижняя граница), border-left (левая граница).
Блок div с разными границами.
В этом примере для каждой стороны блока задана своя толщина границы, стиль и цвет. Подумайте, как при помощи CSS можно создать такую фигуру: Значения границы - толщину, стиль и цвет - можно задать отдельно используя специальные свойства.
Рассмотрим каждое из значений по отдельности. Свойство border-style. Стиль границы.Свойство border-style устанавливает стиль рамки. В CSS, в отличии HTML, граница элемента может быть не только сплошной. Допустимы следующие значения для стиля границы:
Примеры того, как они выглядят. граница отсутствует (none) сплошная граница (solid) двойная граница (double) граница из ряда точек (dotted) пунктирная граница (dashed) граница "бороздка" (groove) граница "гребень" (ridge) вдавленная граница (inset) выдавленная граница (outset) Кстати, если для рамки ridge задать цвет границы чёрный, то получится вот такой результат. Блок div с рамкой чёрного цвета и стиля ridge. Рамка выглядит как solid , но это потому что стиль ridge создаётся добавлением чёрного эффекта тени, а чёрный эффект на чёрной рамке не виден. При помощи свойства border-style стиль границы может быть задан не только для всех сторон блока. Есть возможность задавать несколько значений одному свойству border-style , в зависимости от числа значений стиль границы будет присвоен разному числу сторон блока. Можно задать одно, два, три и четыре значения. Давайте рассмотрим примеры для каждого случая. Одно значение (solid) - стиль границы установлен для всех сторон блока. Два значения (solid double) - первое значение установило стиль для верхней и нижней сторон, второе для боковой. Три значения (solid double dotted) - первое значение для верхней стороны, второе для боковых, стретье для нижней. Четыре значения (solid double dotted dashed) - каждое значение для одной стороны по часовой стрелке начиная с верхней. Свойство border-width. Толщина границы.Для установки толщины границы элемента используется свойство border-width . Толщину границы можно задать в любых абсолютных единицах измерения, например в пикселах. Как и для свойства border-style , для свойства также можно задавать от одного до четырёх значений. Рассмотрим примеры для каждого случая. Код примера:
Одно значение (2px) - толщина границы установлен для всех сторон блока.
Два значения (1px 5px) - первое значение установило толщину для верхней и нижней сторон, второе для боковой.
Три значения (1px 3px 5px) - первое значение для верхней стороны, второе для боковых, стретье для нижней.
Четыре значения (1px 3px 5px 7px) - каждое значение для одной стороны по часовой стрелке начиная с верхней.
Также для свойства border-width существуют значения в виде ключевых слов. Всего их три:
Толщина границы: thin. Толщина границы: medium. Толщина границы: thick. Свойство border-color. Цвет границы.Для управления цветом границы используется средство border-color . Цвета для этого свойства можно задать используя любой способ, описанный в статье "Цвета в CSS ", а именно:
Свойство border-color также может иметь от одного до четырёх значений и обрабатывает их аналогично предыдущим свойствам. Одно значение (red). Два значения (red black). Три значения (red black yellow). Четыре значения (red black yellow blue). Теперь вернёмся к задаче, озвученной выше, и нарисуем фигуру: Вот код, который рисует такую фигуру, только побольше размером:
Установка значений для сторон отдельноВыше упоминалось, что можно указать значения свойств границы только для одной стороны блока. Для этих целей есть свойства:
Напомню, для всех свойств указывается три значения (толщина, стиль и цвет) в любом порядке. Но существуют свойства, которые позволяют устанавливать толщину, цвет и стиль для каждой стороны отдельно. Написание этих свойст производно от вышеуказанных. Параметры верхней границы (border-top ).
Параметры правой границы (border-right ).
Параметры нижней границы (border-bottom ).
Параметры левой границы (border-left ).
Пример использования этих свойств:
В этом примере блоку div сначала заданы границы толщиной 3px и стилем solid для всех сторон. Затем:
Свойство border-radius. Округление углов границы.Свойство border-radius предназначено для округления углов границ элемента. Это свойство появилось в CSS3 и корректно работает во всех современных браузерах, за исключением Internet Explorer 8 (и более старых версий). Значениями могут быть любые числа, используемые в CSS. Свойство border-radius: 15px. Если рамка блока не задана, то скругление происходит с фоном. Вот пример закругления блока без рамки, но с фоновым цветом: Свойство border-radius: 15px. Существуют свойства для скругленя каждого отдельно угла элемента. В этом примере использованы они все: Border-top-left-radius: 15px; border-top-right-radius: 0; border-bottom-right-radius: 15px; border-bottom-left-radius: 0; Свойство border-radius: 15px. Хотя этот код можно записать одним объявлением: border-radius : 15px 0 15px 0 . Дело в том, что для свойства border-radius можно задавать от одного до четырёх значений. В таблице ниже приведены правила, которые определяют такие объявления. Внимательно изучив эту таблицу можно понять, что самая короткая запись нужного стиля будет такой: border-radius : 15px 0 . Всего два значения. Немного практикиРисуем лимон средствами CSS. Вот код такого блока: Margin: 0 auto; /* Размещаем блок по центру */ width: 200px; height: 200px; background: #F5F240; border: 1px solid #F0D900; border-radius: 10px 150px 30px 150px; Мы уже рисовали фигуру: Теперь оставим от неё треугольник: Код треугольника такой: Margin: 0 auto; /* Размещаем блок по центру */ padding: 0px; width: 0px; height: 0; border: 30px solid white; border-bottom-color: red; Влад Мержевич С помощью CSS можно добавить рамку к элементу несколькими способами. В основном, конечно же, применяется свойство border , как наиболее универсальное, а также outline и, как ни удивительно, box-shadow , основная задача которого - создание тени. Далее рассмотрим эти методы и их различия между собой. Свойство outlineСамое простое свойство для создания рамок. Имеет те же параметры, что и border , но существенно отличается от него некоторыми деталями:
Возникает вопрос - в каких случаях нужен outline , когда его роль, несмотря на перечисленные отличия, вполне берёт на себя border ? Ситуаций не так и много, но они встречаются:
Разноцветные рамкиНадо понимать, что outline ни в коей мере не заменяет border и вполне может существовать вместе с ним, как показано в примере 1. Пример 1. Создание рамки
В данном примере вокруг элемента добавляется чёрная рамка, которая отделена от фона белой каймой (рис. 1). Рис. 1. Рамка вокруг элемента Рамка при использовании:hoverПри добавлении рамки через border происходит увеличение ширины элемента, что довольно заметно при сочетании border и псевдокласса :hover . Есть два способа, как это «победить». Самое простое - заменить border на outline , которое, как мы знаем, не оказывает влияния на размеры элемента (пример 2). Пример 2. Рамка при наведении
outline не всегда годится, хотя бы потому, что на него скругление уголков не действует. Здесь подойдёт второй метод - добавляем невидимую рамку или рамку, совпадающую с цветом фона, а затем меняем её параметры при наведении (пример 3). Тогда никакого смещения элемента происходить не будет, поскольку рамка изначально уже есть. Но всегда помним, что ширина элемента при этом складывается из значений width , border слева и border справа. Аналогично обстоит и с высотой. Пример 3. Рамка при наведении
Рамка вокруг полей формыВ некоторых браузерах (Chrome, Safari, последние версии Opera) вокруг полей формы при получении ими фокуса отображается небольшая цветная рамка (рис. 2). Чтобы её убрать, достаточно в стилях добавить к свойству outline значение none , как показано в примере 4. Рис. 2. Рамка вокруг полей Пример 4. Убираем рамку
Рамки через box-shadowХотя свойство box-shadow предназначено для добавления тени вокруг элемента, с его помощью можно и создавать рамки, причём такие, которые невозможно сделать через border или outline . Всё благодаря тому, что число теней может быть неограниченным, параметры которых перечисляются через запятую. Чтобы получить рамку, первые три параметра следует задать нулевыми, они отвечают за положение тени и её размытие. Четвёртый параметр в данном случае отвечает за толщину границы, а пятый устанавливает цвет рамки. Для второй рамки четвёртый параметр равняется сумме толщин двух рамок. В примере 4 показано добавление двух рамок и одной границы справа с помощью одного свойства box-shadow . Пример 4. Использование box-shadow
Результат данного примера показан на рис. 3.
Рис. 3. Рамки, созданные свойством box-shadow CSS-рамка элемента представляет собой одну или несколько линий, окружающих содержимое элемента и его отступы padding . Рамка задаётся с помощью краткого свойства border . Стиль рамки задается с помощью трех свойств: стиль , цвет и ширина . Оформление рамок и границ HTML-элементов с помощью CSS-свойств1. Стиль рамки border-style
Синтаксис P {border-style: solid;} p {border-top-style: solid;} 2. Цвет рамки border-colorСвойство задаёт цвет рамок всех сторон одновременно. С помощью уточняющих свойств можно установить свой цвет для рамки каждой стороны элемента. Если для рамки цвет не задан, то он будет таким же, как и цвет текста элемента. Если в элементе нет текста, то цвет рамки будет таким же, как и цвет текста родительского элемента. Не наследуется.
Синтаксис P {border-color: #cacd58;} 3. Ширина рамки border-widthШирина рамки задается с помощью единиц измерения длины или ключевых слов. Если для свойства border-style задано значение none , и для рамки элемента установлена какая-то ширина, то в данном случае ширина рамки приравнивается к нулю. Не наследуется. Синтаксис P {border-width: 2px;} 4. Задание рамки одним свойствомСвойство border позволяет объединить в себе следующие свойства: border-width , border-style , border-color , например: Div { width: 100px; height: 100px; border: 2px solid grey; } При этом заданные свойства будут применяться ко всем границам элемента одновременно. Если какое-то из значений не указано, его место займет значение по умолчанию. 5. Задание рамки для одной границы элементаВ случае, когда необходимо задать разный стиль границ элемента, можно воспользоваться краткой записью для соответствующей границы. Стиль верхней границы задается с помощью свойства border-top , нижней — border-bottom , левой — border-left , правой — border-right . Синтаксис P {border-top: 2px solid grey;} 6. Внешний контур outlineСвойство задаёт внешнюю границу вокруг элементов (т.е. за пределами обычной границы). Основная цель данного свойства — выделить какой-либо элемент. В отличие от свойства border , применение данного свойства не влияет на размер или местоположение элемента, т.к. контур отображается поверх блока элемента, что в свою очередь, может привести к перекрыванию внешних отступов элемента и соседних областей. Также, внешний контур, в отличие от рамки элемента, окружает элемент со всех сторон, обрамляя его целиком. Внешний контур всегда имеет прямоугольную форму, он не повторяет границы блока, для которого задан border-radius . Свойство outline позволяет объединить в себе следующие свойства: outline-color , outline-style , outline-width . Если какое-то из значений не указано, его место займет значение по умолчанию. Div { width: 100px; height: 100px; outline: #cacd58 solid 2px; } 6.1. Стиль внешнего контура outline-styleВид линии внешнего контура задаётся аналогично со стилем рамки элемента. Не наследуется. Синтаксис P {outline-style: ridge;} 6.2. Цвет внешнего контура outline-colorЦвет внешнего контура можно прописывать только при установленном значении outline-style . Не наследуется. Синтаксис P { outline-style: ridge; outline-color: silver; } 6.3. Толщина внешнего контура outline-widthТолщина линии внешнего контура задается аналогично с толщиной рамки элемента. Не наследуется. Синтаксис P { outline-style: dotted; outline-width: 5px; }  Загрузка...Возможно вам будет интересно:
Последние статьи
| ||
По умолчанию рамки всегда отрисовываются поверх фона элемента, фон распространяется до внешнего края элемента. Стиль рамки определяет ее отображение, без этого свойства рамки не будут видны вообще. Для элемента можно задавать рамку для всех сторон одновременно с помощью свойства border-style или для каждой стороны отдельно с помощью уточняющих свойств border-top-style и т.д. Не наследуется.
