Теория CSS. Верстка HTML+CSS. Профессия верстальщик

В этом видеоуроке мы рассмотрим:

  • Типы каскадных таблиц стилей (CSS)
  • Способы добавления каскадных таблиц стилей (CSS) в документ
  • Что такое HTML+CSS верстка?
  • Что за профессия Верстальщик?

Скачать материалы:
Скачать 2-ой видеоурок по CSS Размер: 7.52 MB, скачали: 610 раз.
Скачать исходники ко 2 видеоуроку по CSS Размер: 25.37 kB, скачали: 704 раз.
Как запустить видеоурок:

  1. Разархивировать скачанный файл.
  2. Открыть папку index.
  3. Запустить файл index.html в браузере.

Доброго времени суток. В прошлом видеоуроке мы познакомились с тем, что такое CSS и на что оно способно 🙂 Начинаем второй видеоурок по CSS. Этот видеоурок будет посвящен скорее теории, чем практике, но прошу не расстраиваться, так как все последующие уроки будут посвящены именно практике.

Теория 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. Селекторы, свойства, значения. Классы, идентификаторы!

Подпишись на info-line:

Получать новые уроки на e-mail:

5 комментариев на “Теория CSS. Верстка HTML+CSS. Профессия верстальщик”

  1. against 2 мая 2012 в 15:55 #

    архивы то битые

    • Олег Зубцов 3 мая 2012 в 11:00 #

      Проверил. У меня все нормально скачивается и открывается. Попробуйте еще раз, может быть у вас загрузка прервалась или что-нибудь еще. Если опять возникнет проблема, скажите пожалуйста, у вас битые архивы только к этому уроку или к другим тоже? И что именно вы понимаете под битыми архивами, у вас выскакивает какая-то ошибка?

      • Олег Зубцов 13 декабря 2012 в 21:43 #

        P.S. Все архивы перезалиты и теперь распаковываются без подозрительных сообщений :))

  2. Александр€ 3 мая 2012 в 16:40 #

    При извлечении появляется сообщение о недостоверности информации, а так всё работает =)

    • Олег Зубцов 3 мая 2012 в 22:56 #

      Да, все верно, спасибо, так и есть)

      against, проверьте извлеченный материал, у меня все в порядке)

Оставить ответ