Подключение CSS

Существует три способа подключения 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 файле, а результаты их работы можно будет увидеть, просто обновляя веб-страницу в браузере.

Войдите, чтобы оставлять комментарии