Border html5: создаем границы для элементов — учебник CSS

Как добавить границы в HTML5 и программирование CSS3

Вы можете использовать CSS3 для рисования границ вокруг любого элемента HTML5. У вас есть некоторая свобода выбора размера, стиля и цвета границы. Вот два способа определения свойств границы: использование отдельных атрибутов границы и использование ярлыка. Границы на самом деле не меняют макет, но они добавляют визуальное разделение, которое может быть привлекательным, особенно когда ваши макеты более сложные.

Как использовать атрибуты границы

Вот страница с простой рамкой вокруг заголовка.

Код страницы borderProps.html демонстрирует основные принципы границ в CSS:

 

 <голова>
 <мета-кодировка = "UTF-8">
 
 <тип стиля = "текст/css">
  ч2 {
  цвет границы: красный;
  ширина границы: 0,25 em;
  бордюр: двойной;
  }
 
 
 <тело>
  
У этого есть граница
 
 
 

Каждый элемент может иметь определенную границу. Границы требуют трех атрибутов:

• ширина : Ширина границы. Это может быть измерено в любой единице CSS, но ширина границы обычно описывается в пикселях или ems. ( Помните: em примерно равна ширине заглавной буквы «М» в текущем шрифте.)

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

• стиль : CSS поддерживает ряд стилей границ. Пример иллюстрирует двойную границу. Это рисует границу с двумя более тонкими линиями вокруг элемента.

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

Как определить стили границ

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

Вы можете выбрать любой из этих стилей для любой границы:

• Сплошная: Одна сплошная линия вокруг элемента.

• Двойной: Две линии вокруг элемента с промежутком между ними. Ширина границы — это общая ширина обеих линий и промежутка.

• Канавка: Использует затенение для имитации канавки, выгравированной на странице.

• Ридж: Затенение используется для имитации гребня, нарисованного на странице.

• Вставка: Использует затенение для имитации нажатой кнопки.

• Outset: Использует затенение для имитации кнопки , выступающей со страницы.

• Пунктир: Пунктирная линия вокруг элемента.

• Пунктирная: Пунктирная линия вокруг элемента.

Как использовать ярлык границы

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

Вы не можете отличить вывод, но код для borderShortcut.html предельно прост:

 

 <голова>
 <мета-кодировка = "UTF-8">
 
 <тип стиля = "текст/css">
  ч2 {
  граница: красная сплошная 5 пикселей;
  }
 
 
 <тело>
  
На этой странице используется ярлык границы
 
 
 

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

Как создать частичные границы

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

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

 

 <голова>
 <мета-кодировка = "UTF-8">
 
 <тип стиля = "текст/css">
  ч2 {
  нижняя граница: 5px черная двойная;
  }
  п {
  граница слева: 3 пикселя с черными точками;
  граница справа: 3 пикселя с черными точками;
  верхняя граница: черный пунктир 3px;
  нижняя граница: черная канавка 3px;
  }
 
 
 <тело>
  
У этого заголовка есть нижняя граница
 
 <р>
  Абзацы имеют несколько определенных границ.
 

 <р>
  Абзацы имеют несколько определенных границ.
 

 
 

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

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

Об этой статье

Эта статья из книги:

• HTML5 и CSS3 «все в одном» для чайников,

Об авторе книги:

Энди Харрис сам научился программировать, потому что это было весело. Сегодня он преподает информатику, разработку игр и веб-программирование в университете; консультант по технологиям в штате Индиана; помог людям с ограниченными возможностями создать свои собственные компании по веб-разработке; и работает с семьями, которые хотят обучать компьютеру дома.

Этот артикул находится в категории:

• HTML5,

css — Тег границы не работает вокруг тега видео HTML5

спросил 10 лет, 1 месяц назад

Изменено 10 лет, 1 месяц назад

Просмотрено 16 тысяч раз

Я хочу обвести красной рамкой видео, воспроизводимое на моем веб-сайте. и вот мой код.

 <дел>
        <управление видео="управление" прокрутка="нет" >