В этой лекции можно узнать о том, с помощью какого инструмента стилизуют веб-страницы. Здесь можно познакомиться с базовым синтаксисом каскадных таблиц стилей, и узнать, как стили взаимодействуют между собой.
Перед прочтением строит освежить в голове информацию о базовых HTML-тегах, так как все примеры будут содержать их в той или иной мере. Также следует вспомнить информацию о том, что такое id и класс элемента.
После формирования структуры страницы с помощью HTML — разметки всего документа нужными семантическими тегами и разметки текста тегами для выделения и разбивки на абзацы — можно заняться более тонкой настройкой внешнего вида страницы.
Веб-страницы, написанные исключительно на HTML, обычно выглядят несколько скучно и однообразно. Такие страницы просто не привлекают внимание к контенту, потому что посетители теряются в кучке элементов без хорошего дизайна. Возможно, одного языка гипертекстовой разметки было достаточно, чтобы развлечь пользователей Интернета в начале 90-х годов, но теперь они стали более разборчивыми, и на них труднее произвести впечатление.
Первые версии стандарта HTML не предоставляли никаких средств для управления внешним видом информации. Интерпретация внешнего вида полностью полагалась на стили, встроенные в браузер. Срочная необходимость предоставить сайтам персональный дизайн побудила HTML добавить «расширенные теги», которые позволили расширить контроль над отображением информации. В результате HTML-код стал трудным для понимания из-за смеси логических и дизайнерских тегов.
Чтобы отделить разметку от управления дизайном, был разработан CSS. Это деление сделало код проще и чище, уменьшив дублирование строк. CSS (каскадные таблицы стилей) — это язык, отвечающий за визуальное представление документов, написанных на HTML. CSS позволяет изменять цвета элементов, их высоту и ширину, расположение отдельных блоков, фоновые изображения и многое другое. Файлы CSS сохраняются в специальном формате .css.
На сегодняшний день последней версией этой технологии является CSS3:
Веб-страница, созданная с помощью CSS, будет кардинально отличаться от той же самой страницы, созданной без него. Убедитесь сами в следующем примере:
Без стилей
Со стилями
CSS стал действительно популярными благодаря ряду приемуществ: