мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

Основы работы с границами на CSS

Сейчас мы с вами научимся добавлять границу элементам. Это делается при помощи трех свойств: свойство border-width задает толщину границы, border-color - цвет, а border-style задает тип границы.

Первые два свойства работают очевидным образом: border-color принимает цвета в том же формате, что и свойство color, а толщина границы задается в пикселях. А вот свойство border-style принимает значения в виде ключевых слов. Например, значение solid задает сплошную линию.

Сделаем, к примеру, границу толщиной 3 пикселя, в виде сплошной линии, красного цвета:

<div id="elem"></div> #elem { border-width: 3px; /* толщина 3px */ border-style: solid; /* в виде линии */ border-color: red; /* красный цвет */ width: 300px; height: 100px; }

:

Давайте теперь посмотрим на примерах, какие еще есть типы границы.

Значение solid

Значение solid - сплошная линия:

<div id="elem"></div> #elem { border-width: 1px; border-style: solid; border-color: black; width: 300px; height: 100px; }

:

Значение dotted

Значение dotted - линия в виде точек:

<div id="elem"></div> #elem { border-width: 1px; border-style: dotted; border-color: black; width: 300px; height: 100px; }

:

Значение dashed

Значение dashed - линия в виде тире:

<div id="elem"></div> #elem { border-width: 1px; border-style: dashed; border-color: black; width: 300px; height: 100px; }

:

Значение ridge

Значение ridge - выпуклая линия:

<div id="elem"></div> #elem { border-width: 3px; border-style: ridge; border-color: black; width: 300px; height: 100px; }

:

Значение double

Значение double - двойная линия:

<div id="elem"></div> #elem { border-width: 3px; border-style: double; border-color: black; width: 300px; height: 100px; }

:

Практические задачи

Повторите страницу по данному образцу:

Повторите страницу по данному образцу:

Повторите страницу по данному образцу:

Повторите страницу по данному образцу: