Существует три способа подключения CSS к документу HTML.
Внутриэлементные стили
При внутриэлементном или строчном подключении стиля, он определяется непосредственно внутри тега HTML при помощи атрибута style.
Это выглядит следующим образом:
<p style="color: red">текст</p>
Данное определение сделает параграф красного цвета.
Однако, как вы, наверное, помните, лучший подход – это когда HTML документ полностью свободен от элементов и атрибутов визуального представления, поэтому внутриэлементный способ определения стилей следует стараться избегать.
Внутридокументные стили
Встроенные или внутридокументые стили используются для определения стилей элементов целой веб-страницы. В теге <head> определяется тег <style>, в котором задаются все стили для веб-страницы.
Такое определение выглядит следующим образом:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Пример CSS</title>
<style type="text/css">
p {
color: red;
}
a {
color: blue;
}
</style>
...
Следующее определение сделает все параграфы страницы красными, а все ссылки синими.
Помня о разделении файлов HTML и CSS, внутриэлементные стили также нужно стараться избегать.
Внешние стили
Внешние стили используются для подключения одновременно ко многим страницам сайта. Обычно это отдельный CSS файл, который выглядит приблизительно следующим образом:
p {
color: red;
}
a {
color: blue;
}
Если имя этого файла будет "web.css", то его подключают к HTML документу следующим образом при помощи тега <link>:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Пример CSS</title>
<link rel="stylesheet" type="text/css" href='web.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>Моя первая веб-страница</title>
<link rel="stylesheet" type="text/css" href='web.css' />
</head>
...
Сохраните HTML файл. Теперь к нему подключен CSS файл, который на данный момент пустой и поэтому никак не повлияет на HTML файл. По мере изучения учебника "CSS начального уровня" вы будете добавлять данные и менять их в CSS файле, а результаты их работы можно будет увидеть, просто обновляя веб-страницу в браузере.