Online-учебник по CSS

Автор учебника: Евгений Андросов


Урок 11. Применяем рамки


Рамки на сайте служат для украшения, для выделения какой-то части (абзаца, цитаты и т.п.), а также для отделения друг от друга двух разных элементов.

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

  1. Цвет рамки. Задается с помощью свойства border-color.
  1. Толщина рамки – border width. Указывается в пикселях или одним из трех значений: thin (тонкая), medium (средняя), thick (толстая)
  1. Тип рамки – border-style. Здесь существует целых 8 значений. Описать словами их сложно, поэтому лучше продемонстрирую это на наглядных примерах. У всех приводимых ниже рамок один цвет - красный и одинаковая толщина - 5 пикселей, но разный стиль:

dotted

Этот абзац обведен рамкой dotted

dashed

Этот абзац обведен рамкой dashed

solid

Этот абзац обведен рамкой solid

double

Этот абзац обведен рамкой double

groove

Этот абзац обведен рамкой groove

ridge

Этот абзац обведен рамкой ridge

inset

Этот абзац обведен рамкой inset

outset

Этот абзац обведен рамкой outset

 

А вот пример, в котором каждой стороне рамки мы задаем свои отдельные параметры:

p {
border-style: solid;
border-width: 3px;
border-top-color: red;
border-bottom-color: blue;
border-right-color: green;
border-left-color: orange;
}

Вот как это будет выглядеть в браузере:

Этот абзац мы обводим такой вот странной рамкой.

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


Предыдущий урок    | К началу урока | К оглавлению |     Следующий урок




Непонятно? Есть вопросы?
Задайте их прямо сейчас и получите ответ автора учебника!

Комментарий добавил(а): Елена
Дата: 03.08.2012

Здравствуйте! Подскажите, как обвести в рамку одно слово в тексте (фамилия умершего человека). Спасибо.

Комментарий добавил(а): Евгений Андросов
Дата: 03.08.2012

Елена!
Слово надо включить в контейнер - выделить тегами и прописать стиль этого контейнера. Вот как это будет выглядеть в виде кода:
<span style="border:1px solid black;">Иванов</span>

А вот как это будет выглядеть на сайте:
Ушел из жизни А.Иванов

Комментарий добавил(а): Сергей
Дата: 03.12.2014

Как взять в рамку абзац (предложение)целиком, а не каждую строчку?

Комментарий добавил(а): Сергей
Дата: 03.12.2014

Как взять в рамку абзац (предложение)целиком, а не каждую строчку?

Комментарий добавил(а): Евгений Андросов
Дата: 03.12.2014

Сергей! Абзац берется в рамку аналогично, только в контейнер включается не слово, а абзац: <span style="border:1px solid black;"><p>Текст абзаца</p></span>

Задать вопрос

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


Введите число, которое вы видите на картинке