Теория CSS. Верстка HTML+CSS. Профессия верстальщик
С чего начнем? Ну, для начала давайте определимся, какие вообще существуют стили. Есть три типа стилей:
- стиль браузера
- стиль разработчика (того, кто делал сайт)
- стиль пользователя (тот, кто посещает сайт)
Стиль браузера задается самим браузером. Стиль разработчика задается разработчиком сайта. Стиль пользователя может быть указан самим пользователем. После указания трех стилей браузер их совмещает, и если находит в них совпадения, то берет те, которые имеют наивысший приоритет. Из этих трех типов наивысший приоритет имеет стиль пользователя. Наименьший — браузера. Чаще всего пользователем стиль не задается, тогда наивысший приоритет приобретает стиль разработчика. Именно над этим стилем мы и будем работать. После совмещения стилей идет вывод на экран.
Давайте на примере простого html-документа разберем наши стили. Полагая, что вы уже знаете HTML, я не буду объяснять вам, что означает каждый из тегов. Если же вы не знаете HTML, то еще раз напоминаю о том, что пройти видеокурс по HTML вы можете на нашем сайте info-line.net.
Специально для этого видеокурса я на своем рабочем столе в папке Site создал файл index.html. К этому файлу не применено никаких стилей. Это простой текст. Я его прикладываю к этому видеоуроку. Над этим файлом мы будем работать на протяжении данного видеокурса.
Давайте откроем теперь файл в браузере и разберем типы стилей. Первым идет стиль браузера. Так как к странице не применено никаких стилей, то стиль разработчика мы зачеркиваем, стиль пользователя — тоже. Остается как раз только стиль браузера. Как мы видим, заголовок H1 написан достаточно большим шрифтом. Написан он не с помощью стилей разработчика и не с помощью стилей пользователя, а именно с помощью стилей браузера. Аналогично написан и весь остальной текст. Надеюсь, со стилем браузера разобрались.
Теперь возьмемся за стиль пользователя. Так как стиля разработчика у нас нет, мы его зачеркиваем. Так как стиль пользователя имеет наивысший приоритет, то стиль браузера мы тоже зачеркнем, хотя стоит отметить то, что все стили, которых нет в стиле пользователя, но есть в стиле браузера будут применены и выведены на экран. Стили пользователя задаются в настройках. Общие настройки->Расширенные->Содержимое->Настроить стили->Моя таблица стилей. Это и есть стили пользователя, которые вы можете подключить. В браузере Firefox4 стили тоже можно настроить в настройках. Настройки->Содержимое и тут указываем шрифт, размер, жмем дополнительно, если что-то надо, цвета, цвета ссылок и т. д. В браузере Google Chrome это также можно сделать в настройках. Параметры->Расширенные->Веб-содержание->Настроить шрифты. По сути идет интеграция стилей пользователя и стилей браузера. С браузером Internet Explorer я не работаю. Могу лишь предположить, что стили пользователя там задаются аналогично предыдущим браузерам.
Как присоединить CSS стили к странице?Как я уже сказал, в этом видеокурсе мы будем рассматривать стили разработчика. Как добавить стили в документ? Есть три способа это сделать:
- Способ присоединения. Мы присоединяем css-файл (файл с таблицей стилей) к нашему документу html, после чего у нас получается страница, обработанная стилями. Этот способ является самым эффективным в плане нагрузки и скорости.
- Глобальный способ. Мы встраиваем стили в голову документа, то есть между тегами <head>, </head>. Эти стили будут применяться ко всему документу, после чего мы получим тот же результат, что и в первом способе.
- Этот, третий, способ не рекомендуется к частому использованию. Смысл состоит в том, что мы применяем стили не ко всему документу, а лишь к части кода (к первому абзацу — один, ко второму — другой, к ссылке — третий и т.д.). Результат получим такой же, но есть ряд минусов, которые потом скажутся не только на скорости вашего сайта за счет того, что ваш код будет больше, чем нужно, но и за счет все того же неудобства редактирования. Стили ведь придумали, чтобы и сократить код, и чтобы облегчить редактирование дизайна, обратившись всего к паре файлов на сайте.
Все эти три способа мы будем рассматривать на практике на протяжении всего видеокурса.
Верстка HTML+CSS. Профессия верстальщик.
Связка HTML+CSS означает верстку, точнее, верстка включает в себя HTML и CSS. На рынке труда существует профессия «верстальщик». Дизайнеры рисуют дизайн и отдают его верстальщику, после чего верстальщик встраивает его в код. В итоге получается работоспособный сайт.
На этом я заканчиваю данный видеоурок. Приступайте к следующему, в котором мы займемся уже практикой, а именно: создадим таблицу стилей, присоединим ее к html-документу и пропишем некоторые стили. До встречи в следующем видеоуроке — Основы CSS. Селекторы, свойства, значения. Классы, идентификаторы!