Page Title

CSS - шапка

Делаем шапку на моем примере.

В html у нас будет минимально кода.

Вот весь код который нам понадобится в html:

<header>
ССS - шапка
</header>

Вот что у нас пока получилось.

CSS - шапка

Теперь перемещаемся в css чтобы задать стили.
Первое что мы запишем это ширина и высота, зададим задний фон черного цвета, и цвет текста сделаем оранжевым.

Наш код в css:

header {
width; 100%; - Ширина
height: 70px; - Высота
background-color: black; - задний фон черный.
color: orange; - цвет текста оранжевый

Смотрим результат.

CSS - шапка

Уже что то похоже на то что у меня в самом начале.
Теперь давайте сделаем наш текст внутри шапки по центру, а высоту ровно по середине.

В этом нам помогут свойства

line-height

и

text-align

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

header {
width; 100%; - Ширина
height: 70px; - Высота
background-color: black; - задний фон черный.
color: orange; - цвет текста оранжевый
line-height: 70px; - выравнивание текста по высоте
text-align: center; - выравнивание текста по ширине

Смотрим на результат:

CSS - шапка

Уже по лучше. Теперь нам осталось сделать круглые углы, добавить нашей шапке тень.

Сделать круглые углы нам поможет свойство

border-radius

Добавить тень нам поможет свойство

box-shadow

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

header {
width; 100%; - Ширина
height: 70px; - Высота
background-color: black; - задний фон черный.
color: orange; - цвет текста оранжевый
line-height: 70px; - выравнивание текста по высоте
text-align: center; - выравнивание текста по ширине
border-radius; 50px; - закругляет наши углы на 50 пикселей.
box-shadow: 0 0 15px 0 aqua; -задает тень нашей шапке голубого цвета.

Смотрим на результат данного кода;

CSS - шапка

Нам осталось задать размер тексту.
В этом нам поможет свойство

font-size.

Наш код в css:

header {
width; 100%; - Ширина
height: 70px; - Высота
background-color: black; - задний фон черный.
color: orange; - цвет текста оранжевый
line-height: 70px; - выравнивание текста по высоте
text-align: center; - выравнивание текста по ширине
border-radius; 50px; - закругляет наши углы на 50 пикселей.
box-shadow: 0 0 15px 0 aqua; -задает тень нашей шапке голубого цвета.
font-size: 30px; -размер текста в 30 пикселей.

Результат:

CSS - шапка

Шрифт текста в своей шапке что в самом начале у меня, я сделал не с помощью css.
Я просто в html коде поставил вот такие теги <tt> </tt>

<header>
<tt> ССS - шапка </tt>
</header>

Результат.

CSS - шапка

Надеюсь этот мини урок был полезен) Вы можете попробовать делать свои стили шапкам)

урок ( задаем стили шапке )