Page Title

CSS Урок 3

1. Задача, сделать меню, и засунуть его в шапку.(Получится такая же шапка как у меня сверху)

Сверху мы видим пустую шапку. Нам нужно в ней слева рассположить логотип, справа наше меню. Как сделать шапку, задать ей стили, округлить углы, поменять цвет мы уже знаем из прошлых уроков. Ну что, давай для начала засунем в нашу шапку наш текст который будет слева "css" css Для того чтобы добавить наш текст, тегу Р я присвовил класс(что такое классы мы разберем чуть позже) Код будет выглядить следующим образом в html; <header> <p class="header"> css </p> </header> А так выглядят свойства класса тега р в css; .header { название класса float: left;- рассположение слева font-size: 40px;- размер текста color: orange;- цвет текста margin: 0;- отступы со всех сторон 0 } Мы видим что наша надпись в шапке плотно прилегает к краям шапки.(см рисунок выше)Нам это не совсем подходит. Поэтому мы зададим внутренние отступы(padding) нашему классу. padding-left: 10px; И наша надпись внутри отступила от левого края на 10 пикселей. css Так, теперь нужно добавить нашей шапке подсветку блока,чтобы смотрелось как у меня в самом начале.Пишем : box-shadow: 0 0 10px 0 aqua; css И так, текст слева есть, шапка готова, осталось только меню. И так, в тег <header> нам нужно добавить меню. Давайте посмотрим как будет выглядеть наш код в html на данном этапе: <header> <p class="header"> css </p> </header> А теперь добавляем ссылки нашего меню, пишем. Код в html будет выглядеть так: <header> <p class="header"> css </p> <a href="">сайт</a> <a href="">цены</a> <a href="">контакты</a> </header> css сайт цены контакты У вас наверное есть вопросы... А как ты сделал ссылки такого цвета? А почему они у тебя не подчеркнуты? Ведь на сколько мы знаем ссылки по умолчанию стоят синего цвета и имеют подчеркивание. Скоро будет продолжение

урок 3