Online-учебник по CSS
Автор учебника: Евгений Андросов
Урок 11. Применяем рамки
Рамки на сайте служат для украшения, для выделения какой-то части (абзаца, цитаты и т.п.), а также для отделения друг от друга двух разных элементов.
CSS представляет очень широкие возможности для работы с рамками и линиями. Давайте рассмотрим инструменты, с помощью которых это можно делать.
- Цвет рамки. Задается с помощью свойства border-color.
- Толщина рамки – border width. Указывается в пикселях или одним из трех значений: thin (тонкая), medium (средняя), thick (толстая)
- Тип рамки – 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-теги или скрипты, будут выводиться в виде обычного текста - бессмысленно их использовать. Вопросы, содержащие мат и оскорбления, будут немедленно удалены.