Встроенные стили
Встроенные стили прикрепляются напрямую к HTML-тегам значением атрибута style.
Они напоминают следующий код:
<p style="color: red">text</p>
В результате применения этого стиля, параграф будет показан красного цвета.
Но, как ранее уже отмечалось, более верным подходом является создание HTML-документа без оформления и стилей. И вот почему использование встраиваемых стилей не рекомендуется.
Внутренние стили
Внедренные, или внутренние, стили применяются ко всей странице целиком. Теги style размещаются между тегами head.
Способ подключения и применения стилей выглядит так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<style type="text/css">
p {
color: red;
}
a {
color: blue;
}
</style>
В результате использования этого стиля все параграфы на странице будут красного цвета, а все ссылки — синего.
Напомню, что хорошей практикой является разделение HTML-содержания и CSS-представления в разных файлах. И здесь приходит спаситель…
Внешние каскадные таблицы стилей
Внешние таблицы стилей применяются ко всему сайту со множеством страниц. Для этого создается CSS-файл приблизительно следующего содержания:
p {
color: red;
}
a {
color: blue;
}
Если вы сохраните это в файле “web.css”, вам также потребуется указать в HTML-файле ссылку на внешнюю таблицу стилей. Выглядит это следующим образом (см последнюю строку):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>CSS Example</title> <link rel="stylesheet" type="text/css" href="web.css" />
В продвинутом руководстве по CSS мы покажем другие способы подключения внешней каскадной таблицы стилей, а пока достаточно и этого.
Чтобы следовать данному руководству наиболее эффективно, рекомендуется пробовать и тестировать код по мере прогресса. Поэтому используйте ваш текстовый редактор, чтобы создать полностью новый файл, а затем сохраните пустой документ как “web.css” в той же директории, что и HTML-файл.
Затем измените HTML-файл таким образом, чтобы он напоминал следующий код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>My first web page</title> <link rel="stylesheet" type="text/css" href="web.css" /> </head>
Сохраните HTML-файл. Этот файл ссылается на CSS-файл, который в настоящее время пуст. Поэтому ничего не изменится. Но по мере работы с Руководством по CSS для начинающих, вы научитесь, как добавлять и изменять CSS-файл, и сможете проверять результаты изменений обновлением окна браузера с открытым в нем HTML-документом, как это было сделано ранее.