Свойства: Border-Bottom-Width

Общий вид

Схема построения рамки вокруг текста выглядит следующим образом:

 

 

 

- Внутри рамки задается текст

- Свойство Padding указывает размер отступа от текста до внутренней границы рамки

- Свойство Margin задает отступ от внешних границ рамки до ближайших элементов или границ окна

 

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

 

Пример создания рамки, как на рисунке выше с помощью внешней таблицы стилей:

- Рамка создана с помощью селектора div (селектора по элементу)

Border-Style: solid; задает вид рамке (сплошная линия)

Border-Width: 12; задает толщину рамки равную 12 пикселям

Border-Color: green; задает цвет рамки – зеленый

Font-Weight: bold; делает текст внутри рамки жирным шрифтом

Font-Size: 200%; задает размер текста внутри рамки равным 200%

Padding: 20px; задает расстояние в пикселях от содержимого рамки до внутренней границы

Margin: 20px; задает расстояние от внешней границы рамки до ближайших элементов

 

1. Создайте рамку с текстом, как в примере выше, но измените цвет рамки, размер шрифта и текст сделайте курсивом

Свойство Border-Style

Данное свойство определяет какого вида будет рамка.

Ниже приведены 8 основных значений данного свойства.

 

Пример:

 

2. Используя внешнюю таблицу стилей и селекторы класса, создайте в HTML документе 3 абзаца с текстом, вокруг каждого из которых была бы уникальная рамка.

Свойство Border-Width

Задает толщину рамки. Значение обычно указывается в пикселях.

Пример:

 

 

3. Используя внешнюю таблицу стилей, создайте в HTML документе текст, внутри которого несколько отдельно взятых слов были бы заключены в рамки разной толщины. Используйте селектор по элементу.

Свойство Border-Color

Определяет цвет рамки. Значение цвета задается обычным образом, т.е. например: "#ff3344", или "gold"

 

Пример:

 

 

4. Используя внешнюю таблицу стилей, создайте в HTML документе текст, вокруг которого была бы рамка толщиной 10 пикселей, тип рамки Double, цвет рамки ярко зеленовато-голубой

 

Свойства: Border-Bottom-Style

Border-Right-Style

Border-Left-Style

Border-Top-Style

Border-Bottom-Style задает вид нижней части рамки

Border-Right-Style задает вид правой части рамки

Border-Left-Style задает вид левой части рамки

Border-Top-Style задает вид верхней части рамки

 

Пример:

 

 

Свойства: Border-Bottom-Color

Border-Right-Color

Border-Left-Color

Border-Top-Color

Border-Bottom-Color задает цвет нижней части рамки

Border-Right-Color задает цвет правой части рамки

Border-Left-Color задает цвет левой части рамки

Border-Top-Color задает цвет верхней части рамки

 

Пример:

 

 

 

Свойства: Border-Bottom-Width

Border-Right-Width

Border-Left-Width

Border-Top-Width

Border-Bottom-Width задает толщину нижней части рамки

Border-Right-Width задает толщину правой части рамки

Border-Left-Width задает толщину левой части рамки

Border-Top-Width задает толщину верхней части рамки

 

Пример:

4. Используя внешнюю таблицу стилей, создайте в HTML документе текст, внутри которого были бы слова, вокруг которых была бы рамка. Все стороны рамки должны быть разного вида, разного цвета, разной толщины.