Всем привет! Сегодня переходим к практике, а именно к верстке - это то, для чего и нужен CSS. Попробуем создать совсем небольшой сайтик, имея на руках любую картинку из интернета. И еще желательно иметь sublimetext c плагином emmet для экономии своего времени. Напомню, что заготовка html5 вызывается с помощью ! далее TAB. Данная комбинация сработает, если у вас .html файл, а не .txt.
Добавил к заготовке всего три элемента: <h1> (заголовок), <p> (абзац) и <img> (картинка). Пока сайт выглядит совсем непрезентабельно. Во-первых, мы привыкли, что на большинстве сайтов при уменьшении масштаба контент остается посередине, а не слева или справа, т.е. у сайта есть активные отступы. Для того чтобы нам поставить эти отступы, надо сначала рассмотреть самую базовую модель в CSS - box model (модель коробки).
Давайте применим данную box model к нашей странице с помощью CSS и подвинем наши элементы к центру.
Первым делом создал style.css и прикрепил его к html с помощью тега <rel>, в котором указал в атрибуте href имя файла со стилями.
Далее весь контент заключил в блок <div> и присвоил class (класс) этому блоку, назвав его "container". В style.css главный блок центрировал с помощью свойства margin: 0 auto; и задал фиксированный размер в 1140 пикселей: width: 1140px;
Заголовки (тег <p> заменил на <h4>) заключил в новый для нас тег <header> (шапка), про который расскажу в следующем уроке "Семантические теги HTML5". В CSS текст тоже центрировал с помощью text-align: center;
К основному контенту в виде картинки добавил текст и заключил в дочерний блок <div> присвоив класс "main_content" для того, чтобы в CSS так же центрировать с помощью margin: 0 auto; и задал ширину по ширине картинки: width: 633px;
Если посмотреть код страницы в браузере при 100% масштабе, то можно увидеть какие отступы и размеры у нас получились. Покрутите масштаб и посмотрите, как автоматически меняются отступы.
Ну вот собственно и все на сегодня, ссылки на код HTML и CSS прилагаю.
