Параметры рамки border. Создание рамок средствами CSS. Пример. Изменения цвета рамки при наведении курсора мыши
Рамки - это такие линии, которые окружают элемент (содержащийся в нём контент и отступы вокруг него). Пример, с которым мы уже сталкивались - рамки ячеек внутри таблицы.
CSS предусматривает два типа рамок: внутренние границы и внешние линии. Свойства CSS, отвечающие за оформление рамок, начинаются со слова «border», которое как раз и можно перевести как «Рамка», «Граница». Наличие и формат внешнего контура задаются свойствами, начинающимися словом «outline». Outline, в отличие от border, не влияет на ширину и положение обрамляемого блока. Кроме того, его нельзя установить только с одной стороны, как border - только со всех сторон сразу.
Сначала поговорим об оформлении border, потом перейдём к outline .
border-width
Задаёт ширину границ. Понятно, что по умолчанию элемент окружён рамками с четырёх сторон. Свойство позволяет задать ширину границ как для всех сторон одинаковую, так и разную для каждой стороны. В зависимости от того, какую ширину каким границам нужно присвоить, в правиле можно указать от одного до четырёх значений.
Задавать ширину можно как с помощью привычных пикселей, процентов и других единиц длины CSS, так и зарезервированными словами thin (2px), medium (4px) и thick (6px).
Border-width: 16px 12px 4px 8px;
border-style
Определяет стиль рамки. Обратите внимание: если не задать это правило, но указать свойство border-width , то рамок вообще не будет, так что если хотите видимые границы, обязательно укажите border-style .
Значений у свойства может быть довольно много, все они наглядно продемонстрированы рисунком ниже.
Последний абзац показывает, что стиль, как и толщина, у рамки с каждой стороны может быть собственным:
border-style: solid double dotted none
border-color
Работает так же, как и предыдущие свойства, но отвечает за цвет границ. Ему тоже можно задавать от одного до четырёх значений, и результат вы уже знаете. Если правило не установить, рамки будут иметь цвет текста текущего элемента или, если не указан и он, цвет текста элемента-родителя.
Border-color: #C85EFA;
border
Упрощает запись и экономит код, позволяя установить все перечисленные свойства для границ со всех сторон элемента одной строкой:
P { border: 2px solid green; }
Для настройки разных правил рамкам с разных сторон можно использовать следующие значения:
- border-top - верхняя граница.
- border-right - правая.
- border-bottom - нижняя.
- border-left - левая.
P { border-left: 6px dotted yellow; }
outline-width
То же самое, что и border-width , только для внешней, а не внутренней рамки. Задаёт толщину контура в тех же значениях, что и border-width . Кроме толщины обрамления элемента нужно указать его стиль, иначе контура не будет.
outline-style
Значения свойства дублируют значения border-style . Правило задаёт стиль внешнего контура.
Описание
Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определенных сторонах элемента, воспользуйтесь свойствами border-top , border-bottom , border-left , border-right .
Синтаксис
Значения
Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style . Их названия и результат действия представлен на рис. 1.
Рис.1. Стили рамок
border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.
inherit наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
В данном примере вокруг слоя добавляется двойная граница. Результат показан на рис. 2.
Рис. 2. Применение свойства border
Объектная модель
document.getElementById("elementID ").style.border
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed . При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed .
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
Стиль границы в разных браузерах может несколько различаться при использовании значений groove , ridge , inset или outset .
Рамки (блочные параметры)
Значения этих свойств используются для установки характеристик области вокруг элемента.
Это может быть применено к символам, изображениям и т.д.
| Параметры | Значение | Описание |
| border-top-color border-right-color border-left-color border-bottom-color border-color |
цвет (нет цвета по умолчанию) |
Определяют цвет четырех сторон рамок. Если вместо цвета подставить URL-адрес изображения, оно будет повторяться, образуя рамку. |
| border-top-style border-right-style border-left-style border-bottom-style border-style |
none (по умолчанию) solid double groove ridge inset outset |
Определяют стиль четырех сторон рамок. |
| border-top border-right border-left border-bottom border |
ширина_рамки, стиль_рамки, цвет (по умолчанию: |
Определяют свойства четырех сторон рамок. Работают так же, как свойства отступов (см.ниже), за исключением того, что рамка видна. ширина_рамки
может быть значением medium, thin или thick или задана в единицах измерения. Аргумент color используется для определения цвета заполнения фона элемента, пока он загружается, а также позади прозрачных частей элемента. Если передать вместо него адрес изображения, то рисунок будет повторяться, заполняя контур рамки. |
| border-top-width border-right-width border-left-width border-bottom-width border-width |
thin medium (по умолчанию) thick длина |
Определяют ширину рамки вокруг элемента. Каждая сторона может быть задана соответствующим параметром. Можно заменить установку четырех индивидуальных свойств установкой одного свойства border-width так же, как и для свойств отступа margin . |
| ciip | rect (/top/right/bottom/left/) auto (по умолчанию) |
Определяет, какая часть элемента видна. Все, что находится за пределами области, указанной этим параметром, увидеть нельзя. |
| display | "", none "" (по умолчанию) |
Этот параметр указывает, будет ли отображен элемент. |
| float | none (по умолчанию) left right |
Определяет обтекание элемента другими элементами слева или справа вместо помещения их под ними. Поддерживается тегами ,
...
|
| height | auto (по умолчанию) длина |
Устанавливают высоту элемента и измеряют ее, если это необходимо. Значение возвращаются в виде строки, включающей единицы измерения (px, % и т.д.). Для получения числового значения используется свойство posHeight. |
| left | auto (по умолчанию) длина проценты |
Задают горизонтальную координату элемента, позволяя корректно устанавливать и передвигать элементы. Значение возвращается как строка, включающая единицы измерения (px, % и т.д.). Для получения значения в виде числа используется свойство posLeft. |
Пример 1:
Эта строка подчеркнутая пунктиром.
Пример 2:
Разные типы рамок.
| 1. none - Нет границы {border:none;} |
| 2. solid - Есть граница {border: 1px solid;} |
Пример 4: Рамка с круглыми углами.
. в налоговых декларациях;
. справках 2-НДФЛ;
Во всех перечисленных документа указывается 11-ти значный код ОКТМО взамен ранее используемых кодов ОКАТО.
|
#org
Position:relative;
Background-color: #e8e3d4;
|
Начиная с 1 января 2014 года новые коды ОКТМО, указываются в: . в налоговых декларациях; . справках 2-НДФЛ; . платежных поручениях (поле 105); . квитанция на оплату налогов, сборов, пошлин формы ПД-4 налог. Во всех перечисленных документа указывается 11тизначный код ОКТМО взамен ранее используемых кодов ОКАТО.
|
|
Вложенные таблицы
Узкая черная рамка (5px) Параметры таблицы:
|
Ширина и высота блочных элементов
Свойства CSS width
и height
- устанавливают ширину и высоту блочных элементов.
Ширина и высота элемента может быть задана следующими способами:
- auto - Размеры элемента определяется его содержанием. (по умолчанию)
- % - Размеры элемента задаётся в процентах от высоты/ширины элемента родителя.
- px - Размеры элемента задаётся в пикселях или любых других единицах измерения принятых в CSS.
Управление содержанием элемента
Что делать с содержанием элемента, если оно превышает его размер?
Если элементу присвоены точные значения высоты и ширины (height, width ) а его содержание, например длинный текст, не вмещается в указанных пределах, то по умолчанию такой элемент растягивается до нужных размеров, что не всегда на руку веб-мастеру. На помощь приходит атрибут overflow , который указывает браузеру, что делать с элементом в таких случаях.
Свойство overflow может иметь следующие значения:
- visible - Элемент растягивается до необходимых размеров. (по умолчанию)
- hidden - Содержание элемента "обрезается" видна лишь та его часть что помещается в элементе.
- scroll - Добавляются полосы прокрутки (всегда! даже если содержание помещается в пределах элемента).
- auto - Полосы прокрутки добавляются при необходимости.
CSS
CSS (англ. Cascading Style Sheets - каскадные таблицы стилей) - формальный язык описания внешнего вида документа, написанного с использованием языка разметки и т.д. ..............
Результат
CSS
CSS (англ. Cascading Style Sheets - каскадные таблицы стилей) - формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Способы подключения CSS к документуПравила CSS пишутся на формальном языке CSS и располагаются в таблицах стилей, то есть таблицы стилей содержат в себе правила CSS. Эти таблицы стилей могут располагаться как в самом веб-документе, внешний вид которого они описывают, так и в отдельных файлах, имеющих формат CSS. (По сути, формат CSS - это обычный текстовый файл. В файле.css не содержится ничего, кроме перечня правил CSS и комментариев к ним.) То есть, эти таблицы стилей могут быть подключены, внедрены в описываемый ими веб-документ четырьмя различными способами:
- Когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством тега , располагающегося в этом документе между тегами и .
(Тег будет иметь атрибут href, имеющий значением адрес этой таблицы стилей). Все правила этой таблицы действуют на протяжении всего документа;
.....
- Когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством директивы @import, располагающейся в этом документе между тегами и ) сразу после тега
- Когда таблица стилей описана в самом документе, она может располагаться в нём между тегами (которые, в свою очередь, располагаются в этом документе между тегами и ). Все правила этой таблицы действуют на протяжении всего документа;
.....
- Когда таблица стилей описана в самом документе, она может располагаться в нём в теле какого-то отдельного тега (посредством его атрибута style) этого документа. Все правила этой таблицы действуют только на содержимое этого тега.
Купи слона
Свойство для оформления текста и шрифта мы изучили, теперь пришла очередь переходить к другим элементам. В этом уроке мы рассмотрим, создание рамок средствами CSS . Данное свойство используется достаточно часто, поэтому ему стоит уделить немного больше внимания.
И так, давайте предположим, что вокруг какого-то элемента нужно сделать рамку. Например, создадим заголовок и вокруг него сделаем рамку.
Параметры характеризующие рамку: 1) Толщина рамки, 2) Стиль рамки и 3) Цвет рамки. И давайте по порядку:
- 1. Толщина рамки: border-width:2px ;
- 2. Стиль рамки: border-style:solid ;
- 3. Цвет рамки: border-color:#ff0000 ;
Какие бывают стили рамок в CSS ? Ниже приведены все доступные стили рамок:
- dotted - Это точечная рамка.
- dashed - Это пунктирная рамка
- solid - Это сплошная рамка
- double - Это двойная рамка
- groove - Объемный вид
- ridge - Объемный вид
- inset - Объемный вид
- outset - Объемный вид
Теперь у нас есть все, чтобы создать рамку вокруг заголовка.
HTML
Создание рамки вокруг заголовка.
И сам стиль для рамки.
H2{ border-width: 2px; border-style: solid; border-color: #FF0000; }
В результате вокруг созданного заголовка появилась сплошная рамка красного цвета толщиной в 2px.
Рамка формируется из четырех сторон: Верхней , Правой , Нижней и Левой и, так как у нас указанно свойство border , то браузер по умолчанию рисует все четыре стороны рамки. Таким образом, если требуется задать рамку только с какой-то одной стороны, то используются приставки указывающие сторону, где создать рамку.
- top - Верх.
- right - Право
- bottom - Низ
- left - Лево
Таким образом если мы хотим рамку сделать только снизу абзаца то есть подчеркнуть его то к каждому свойству border добавляем приставку bottom . В результате получится следующая структура кода.
H2{
border-bottom-width: 2px;
border-bottom-style: double;
border-bottom-color: #FF0000;
}
Использование данных стилей для браузера будет означать, что нужно создать рамку только с нижней части, т.е. подчеркивающую заголовок. Точно так же можно и продублировать данный код, задав рамку уже с другой стороны, например верхней.
H2{ border-bottom-width: 2px; border-bottom-style: double; border-bottom-color: #FF0000; border-top-width: 2px; border-top-style: double; border-top-color: #FF0000; }
Теперь заголовок будет обводится красной рамкой сверху и снизу. Аналогично можно сделать и для других сторон.
Как Вы уже наверное заметили, запись получилась достаточно большая, поэтому существует сокращенный вид записи который за частую на практике и используется.
На картинке выше представлена структура сокращённой записи, где указывается свойство border и в качестве значений, через пробел, указывается ширина рамки - border-width , стиль рамки - border-style и цвет рамки - #ff0000 .
То есть браузер, увидев такую, сокращенную запись border:2px solid #ff0000 ; , так же создаст рамку со всех четырех сторон заголовка. Вот такая короткая запись эквивалентна той записи, что мы использовали выше (где применялось три свойства).
Если с помощью короткой записи нужно указать рамку только с одной стороны, то к свойству добавляем простаку указывающую сторону с которой создать рамку.
H2{ border-top:2px solid #ff0000; }
Вот так, с помощью короткой записи делается рамка с верху, где так же указаны толщина, стиль, и цвет рамки.
Вот таким образом с помощью свойства border делается рамка вокруг любого элемента. Так же с помощью рамки создается подчеркивание ссылок, когда нужен другой цвет подчеркивающей линии. Ну а на этом с рамками все, переходим к следующему важному уроку, где будем рассматривать
Влад Мержевич
С помощью CSS можно добавить рамку к элементу несколькими способами. В основном, конечно же, применяется свойство border , как наиболее универсальное, а также outline и, как ни удивительно, box-shadow , основная задача которого - создание тени. Далее рассмотрим эти методы и их различия между собой.
Свойство outline
Самое простое свойство для создания рамок. Имеет те же параметры, что и border , но существенно отличается от него некоторыми деталями:
- outline выводится вокруг элемента (border внутри);
- outline не влияет на размеры элемента (border добавляется к ширине и высоте элемента);
- outline можно установить только вокруг элемента целиком, но никак не на отдельных сторонах (border можно использовать для любой стороны или всех сразу);
- на outline не действует радиус скругления, заданный свойством border-radius (на border действует).
Возникает вопрос - в каких случаях нужен outline , когда его роль, несмотря на перечисленные отличия, вполне берёт на себя border ? Ситуаций не так и много, но они встречаются:
- создание сложных разноцветных рамок;
- добавление рамки к элементу при наведении на него курсора мыши;
- сокрытие рамки, добавляемой браузером автоматически для некоторых элементов при получении фокуса;
- для outline можно задать расстояние от края элемента до рамки с помощью свойства outline-offset , для создания .
Разноцветные рамки
Надо понимать, что 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
