CSS-граница и контур: синтаксис стиля границы

1. Определить стиль отдельной границы
2. Определите стили для всех четырех ребер
3. Используйте свойство border
4. Свойство структуры
5. Синтаксис и примеры

Определение границ с помощью CSS может, на первый взгляд, быть немного сложным из-за количества задействованных свойств: если на самом деле они предоставляют автору максимальную гибкость, они иногда усложняют управление кодом.

В принципе, мы можем разделить свойства границы на две категории: отдельные свойства и свойства короткого синтаксиса . Первые определяют отдельные аспекты каждого из четырех ребер. Последние позволяют комбинировать различные настройки в одном правиле.

Это отдельные свойства :

border-top-color, border-top-width, border-bottom-color, border-bottom-style, border-bottom-style, border-bottom-width, border-right-color, border-top-style, border-top-style ширина по ширине, цвет по левому краю, стиль по левому краю, ширина по левому краю

Это сокращенные синтаксические свойства :

border-border, border-top, border-right, border-left, border-color, border-style, border-width

Определить стиль отдельной границы

Давайте начнем с того, как установить свойства для одной границы. Это основной синтаксис с отдельными свойствами:

селектор {border- <lato> -color: <value>; стиль границы <lato>: <значение>; border- <lato> -width: <значение>; }

И это сокращенный синтаксис:

селектор {border- <lato>: <ширина значения> <стиль значения> <цвет значения>; }

В обоих примерах синтаксис заменен на <lato> одним из показателей четырех сторон: сверху, справа, снизу или слева .

Что касается значений, как видно из списка свойств, на каждой стороне для границы могут быть определены три аспекта:

1. цвет (цвет) ;
2. стиль (стиль) ;
3. толщина (ширина) .

Возможные значения для цвета:

• любой цвет ;
• ключевое слово унаследовать .

Цвет может быть выражен любым из способов, представленных в урок по управлению цветом , Если вы не установите конкретное значение, цвет будет основным цветом, установленным с помощью свойства color.

Стиль границы можно вместо этого выразить одним из следующих ключевых слов:

Стиль границы Описание отсутствует элемент не имеет ребра, а толщина равна 0 скрытого эквивалента ни пунктирных пунктирных точек. Граница сплошные штрихи, сплошная и непрерывная кромка, двойная сплошная кромка, непрерывная и двойная канавка, тип тисненой кромки, ребра другого типа. края в рельефном эффекте вставки «установить» исходный эффект «тиснением»

Каждый определяет определенный аспект границы.

пример ,

Наконец у нас есть толщина . Его можно изменить в соответствии со следующими значениями:

• числовое значение с единицей измерения ;
• тонкий : тонкий край;
• средний : край средней толщины;
• толстый : широкий толстый край.

В случае ключевых слов точный размер не указывается языком.

Итак, как написать правило для установки только одного из ребер? Это можно сделать с помощью отдельных свойств:

div {border-left-color: black; стиль рамки слева: сплошной; border-left-width: 1px; }

Но гораздо удобнее писать так, используя сокращенное свойство синтаксиса:

div {border-left: 1px solid black;}

Определите стили для всех четырех ребер

Если вы хотите установить стили для всех четырех краев поля, у вас снова есть два варианта. Первый должен использоваться, когда вы хотите установить четыре ребра вместе, но вы хотите назначить каждому другой стиль с точки зрения цвета, толщины и стиля:

селектор {border-width: <values>; стиль границы: <значения>; цвет границы: <значения>; }

Возможные значения - это те, которые указаны выше в отношении цвета, стиля и толщины.

Для каждого из этих свойств можно определить от одного до четырех значений, по одному на сторону. Если мы используем четыре, порядок чтения следующий: верхний, правый, нижний, левый. Если вместо этого мы устанавливаем один, два или три, применяются те же правила, что и для полей в урок 16 ,

Вот фрагмент кода:

div {border-width: 1px 2px 1px 2px; стиль границы: твердый; цвет бордюра: черный красный черный красный; }

Используйте свойство border

Последнее сокращенное синтаксическое свойство является границей . С его помощью мы можем определить настройки для четырех ребер только с одним правилом. Однако его использование ограничено одним случаем, который также очень распространен: все четыре края имеют одинаковый цвет, одинаковый стиль и одинаковую толщину.

Это синтаксис:

селектор {border: <значение толщины> <значение стиля> <значение цвета>; }

Который переводится в реальный код становится:

div {border: 2px solid black;}

пример ,

Свойство структуры

Мы вставляем здесь обработку для свойства outline, поскольку оно концептуально связано с краями.

Так называемый «контур» на самом деле является своего рода границей, которая может быть размещена вокруг объектов в документе, чтобы выделить их. Если установлено, контур размещается снаружи относительно границы, определенной для элемента.

Вы можете определить внешний вид контура в соответствии со следующими свойствами:

план-цвет

план-стиль

стиль
• контур-ширина: толщина.

Свойство outline - это сокращенное синтаксическое свойство, которое можно использовать для определения всех аспектов, на которые влияют отдельные свойства в одном правиле.

Синтаксис и примеры

селектор {контур: значение толщины, значение стиля, значение цвета;}

Возможные значения идентичны тем, которые видны для ребер, включая ключевое слово none, что приводит к полному устранению контура.

Как это ни парадоксально, наиболее распространенное использование в таблице стилей для этого свойства - это то, что позволяет ... устранить его!

Естественно, во всех веб-браузерах реализован механизм, посредством которого, когда поля формы получают фокус, отображается контур.

Рисунок 1 - Текстовое поле с контуром

Чтобы устранить это, достаточно одного такого правила:

ввод, выберите, текстовое поле, кнопка {контур: нет; }

пример ,

CSS3 идеи

Похожие

Комментарии