Page Title

CSS - border

Свойство border.
Вернемся к уже знакомому тегу Р.

Пропишем в нем следующие слова "Привет мир!"
Результат.

Привет мир!

Теперь я добавлю в стили нашему тегу Р border.

Код в css будет выглядеть так.

p {
border: 1px solid red;
}

Теперь смотрим результат.

Привет мир!

Теперь сделаем наш тег Р блочно строчным элементом. ( как это сделать вы уже должны знать)

Привет мир!

Теперь сделаем нашу линию вокруг текста в другом стиле. Что нам нужно?

А нужно нам вот такое свойство border и вместо solid, пишем dashed;
Смотрим как наш код будет выглядеть в css;

p {
display: inline-block;
border: dashed;
border-color: darkred;
}

Результат ниже. Я добавил другой стиль и темно красный цвет рамке

Привет мир!

Хорошо. А давайте теперь сделаем со всех сторон линии разных стилей и цветов?
Так будет выглядеть наш код в css:

p {
display: inline-block;
border-top: dashed darkred;
border-right: double green;
border-left: dotted blue;
border-bottom: inset aqua;
}

Снизу результат этого кода. Все стороны разных стилей и разных цветов.

Привет мир

Теперь например мы хотим чтобы наша линия была только сверху.

Вот так наш код будет выглядеть в css:

p {
display: inline-block;
border-top: dashed darkred;
}

привет мир

Свойства записать можно по разному. Быстрым кодом, или нет. Давайте сейчас я запишу два одинаковых стиля для тега Р, разными способами в css;
Вариант первый, код в css

p {
display: inline-block;
border-top: double;
border-color: aqua;
}

Результат данного кода.

Привет мир

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

p {
display: inline-block;
border-top: double aqua;
}

И результат

Привет мир

Как видим, код изменился, но стили остались такие же. Надеюсь суть вы уловили)

урок (border)