Объявление стилей в «голове» документа экономит пространство и делает код более единообразным, а его поддержку — удобной, однако требует создания копии стилей в каждом документе веб-сайта. Гораздо лучшее решение — переместить все стили во внешний файл. После этого с помощью элемента <link> данный файл можно будет вставить в любой документ, требующий применения стилей. Этот метод также позволяет быстро поменять весь набор стилей, всего лишь добавив ссылку на другой файл. Кроме того, становится проще модифицировать документы и адаптировать их к различным условиям и устройствам — мы научимся делать это в конце книги.
В главе 1 мы познакомились с тегом <link> и научились вставлять файлы CSS в наши документы. В строке кода <link rel="stylesheet" href="mystyles. css"> мы приказываем браузеру загрузить файл mystyles. css, так как он содержит все стили, необходимые для визуализации страницы. Этот прием широко практикуют дизайнеры, уже применяющие в своей работе HTML5. Тег <link> со ссылкой на файл CSS вставляется во все документы, в которых требуются стили (листинг 2.3).
Листинг 2.3. Применение стилей CSS из внешнего файла
<!DOCTYPE html>
<html lang="ru">
<head>
<^^^>Этот текст — заголовок документа<^^^>
<link rel="stylesheet" href="mystyles. css">
</head>
<body>
<p>Мой текст</p>
</body>
</html>
Начиная с этого момента, мы будем добавлять стили CSS в файл под названием mystyles. css. Создайте этот файл в той же папке, где находится ваш файл HTML, и копируйте в него стили CSS, чтобы на экране проверять, как они работают.
Файлы CSS представляют собой обычные текстовые файлы. Как и файлы HTML, их можно создавать в любых текстовых редакторах, например в Блокноте в Windows.
Добавить комментарий