Встроенные стили
Встроенные стили прикрепляются напрямую к HTML-тегам значением атрибута style.
Они напоминают следующий код:
В результате применения этого стиля, параграф будет показан красного цвета.
Но, как ранее уже отмечалось, более верным подходом является создание HTML-документа без оформления и стилей. И вот почему использование встраиваемых стилей не рекомендуется.
Внутренние стили
Внедренные, или внутренние, стили применяются ко всей странице целиком. Теги style размещаются между тегами head.
Способ подключения и применения стилей выглядит так:
В результате использования этого стиля все параграфы на странице будут красного цвета, а все ссылки — синего.
Напомню, что хорошей практикой является разделение HTML-содержания и CSS-представления в разных файлах. И здесь приходит спаситель…
Внешние каскадные таблицы стилей
Внешние таблицы стилей применяются ко всему сайту со множеством страниц. Для этого создается CSS-файл приблизительно следующего содержания:
Если вы сохраните это в файле “web.css”, вам также потребуется указать в HTML-файле ссылку на внешнюю таблицу стилей. Выглядит это следующим образом (см последнюю строку):
В продвинутом руководстве по CSS мы покажем другие способы подключения внешней каскадной таблицы стилей, а пока достаточно и этого.
Чтобы следовать данному руководству наиболее эффективно, рекомендуется пробовать и тестировать код по мере прогресса. Поэтому используйте ваш текстовый редактор, чтобы создать полностью новый файл, а затем сохраните пустой документ как “web.css” в той же директории, что и HTML-файл.
Затем измените HTML-файл таким образом, чтобы он напоминал следующий код:
Сохраните HTML-файл. Этот файл ссылается на CSS-файл, который в настоящее время пуст. Поэтому ничего не изменится. Но по мере работы с Руководством по CSS для начинающих, вы научитесь, как добавлять и изменять CSS-файл, и сможете проверять результаты изменений обновлением окна браузера с открытым в нем HTML-документом, как это было сделано ранее.