CSS имеет встроенный способ привязки внешних таблиц стилей к коду HTML — правило @import. Его нужно добавить в HTML-тег <style>. Например:

<style> 
    @import url(css/styles.css);
</style>

ПРИМЕЧАНИЕ Если используется тип документа HTML 4.01 или XHTML, нужно к открывающему тегу <style> добавить атрибут type="text/css”. В отличие от HTML-тега <link> правило @import — языковая конструкция CSS, обладающая некоторыми несвойственными HTML качествами.

1. Чтобы выполнить привязку к внешнему файлу CSS, нужно использовать url вместо href и заключать путь к CSS-файлу в круглые скобки. Так, в рассмотренном выше примере css/styles.css — путь к внешнему CSS-файлу. Кавычки, в которые заключен URL, не обязательны. Таким образом, url(css/styles.css) и url("css/styles.css") будут работать одинаково.

2. Посредством нескольких правил @import, как и с помощью нескольких тегов <link>, можно присоединить любое количество внешних таблиц стилей:

   <style> 
       @import url(css/styles.css); 
       @import url(css/forms.css);
   </style>
   

   После правила @import можно добавлять обычные CSS-стили, если, например, вы хотите создать стиль, который нужно применить только к одной веб-странице, используя для форматирования остального содержимого единый дизайн, уже описанный во внешней таблице стилей. Например:

    <style> 
        @import url(css/styles.css); 
        @import url(css/forms.css); 
        p { 
            color:red;
        }
    </style>
   

   Нужно поместить все правила @import перед CSS-стилями, как показано в примере. Веб-браузеры игнорируют любые таблицы стилей, импортируемые после CSS-правила, поэтому если изменить порядок показанного выше кода на обратный и стиль p появится первым, то браузер проигнорирует любые стили в таблицах стилей style.css или form.css. Так какой метод лучше использовать? Хоть оба они работают, применение тега <link> встречается чаще. В некоторых случаях правило @import может замедлять загрузку ваших таблиц стилей. Поэтому, если у вас нет явных предпочтений одному из методов, просто используйте тег <link>.

1. В редакторе HTML-кода откройте файл 02\index.html. Используя правило @import (читать выше) подключить файл со стилями css/style.css.
2. Открыть в браузере. Проверить, что все абзацы стали красного цвета.
3. Удалить тег <style> и все его содержимое из файла 02\index.html и перейти к следующему заданию.

Размещая код CSS непосредственно в HTML-коде страницы, вы создаете встроенный стиль. Встроенные стили не экономят ни время загрузки веб-страниц, ни трафик, поэтому нет никаких причин для их использования. В крайнем случае, если обязательно нужно изменить стиль единственного элемента одной веб-страницы, можно прибегнуть к встроенным стилям. (Например, создавая HTML-форматированные электронные письма, лучше использовать встроенные стили. Это, к слову, единственная возможность заставить CSS работать в Gmail.) Если вы все-таки применяете этот метод и хотите, чтобы стиль работал должным образом, то уделите особое внимание размещению команд форматирования внутри элементов, которые следует отформатировать. Рассмотрим пример, наглядно демонстрирующий, как это делается.

1. В редакторе HTML-кода откройте файл 02\index.html. Этот простой и изящно написанный HTML5-файл содержит несколько заголовков, абзац, маркированный список и информацию об авторском праве в элементе address. Начнем с создания встроенного стиля для элемента h1.
2. В открывающем элементе <h1> укажите свойство стиля style="color: #6A94CC;". Элемент должен выглядеть следующим образом: <h1 style="color: #6A94CC;"> Атрибут style относится к HTML, а не к CSS, поэтому после него указывается символ =, а значение атрибута — весь код CSS — заключено в кавычки. Код CSS — это только та часть, что находится в кавычках. В данном случае вы добавили свойство color, которое воздействует на цвет текста, и установили его значение равным #6A94CC, то есть шестнадцатеричному коду, определяющему синий цвет. Двоеточие отделяет имя свойства от значения, которое вы хотите установить для данного свойства. Далее проверим результат в браузере.
3. Откройте страницу index.html в браузере. Открыв страницу в браузере, вы увидите, что заголовок стал синим. Встроенные стили могут содержать несколько свойств CSS. Добавим в тег еще одно свойство.
4. Вернитесь в HTML-редактор. После точки с запятой за кодом #6A94CC наберите код font-size: 3em;. Точка с запятой отделяет два различных свойства. Тег <h1> должен выглядеть следующим образом: <h1 style="color: #6A94CC; font-size: 3em;">
5. Посмотрите на страницу в браузере. Нажмите кнопку Обновить (Reload), но сначала удостоверьтесь, что сохранили HTML-файл. Теперь заголовок стал гораздо больше. Вы почувствовали, как непросто добавлять встроенные стили? Придание соответствующего вида всем заголовкам h1 веб-страницы требует выполнения тех же действий над каждым из них. На это могут уйти часы и даже целые дни набора и добавления кода в ваш HTML-файл.
6. Вновь перейдите в редактор веб-страниц и удалите из элемента h1 весь код атрибута форматирования, вернув его к нормальному виду. Далее мы создадим таблицу стилей внутри веб-страницы.

Вместо встроенных стилей лучше использовать таблицу стилей, содержащую множество стилей CSS, каждый из которых придает внешний вид своему элементу страницы. Прочитав этот раздел, вы научитесь создавать стиль, который изменяет внешний вид всех заголовков первого уровня за один прием. Этот единственный стиль автоматически отформатирует все элементы h1 веб-страницы.

1. В файле index.html, открытом в текстовом редакторе, установите курсор сразу после закрывающего тега </title>, нажмите клавишу Enter и наберите код <style>. Теперь HTML-код должен выглядеть следующим образом:

   <title>Заголовок</title>
       <style>
   </head>
   

   Открывающий тег <style> указывает на начало таблицы стилей. Желательно сразу же, как только вы набираете открывающий тег, закрывать его, поскольку об этом очень легко забыть, переключив внимание на написание CSS. В данном случае вы закроете элемент style до того, как станете добавлять стили CSS.
2. Нажмите клавишу Enter дважды и наберите код </style>. Теперь вы добавите селектор CSS, обозначающий начало вашего первого стиля.
3. Щелкните кнопкой мыши между открывающим и закрывающим тегами элемента style и введите h1 {. Значение h1 определяет элемент, к которому браузер должен применить последующий стиль. Фигурную скобку после h1 называют открывающей. Она обозначает начало определения CSS-свойств для данного стиля. Иначе говоря, за ней начинается самое интересное. Надо отметить, что, как и в случае с закрывающими тегами, желательно указывать закрывающую скобку стиля до непосредственного добавления каких-либо свойств этого стиля.
4. Дважды нажмите клавишу Enter и укажите одну закрывающую скобку }. Ответная закрывающая скобка, соответствующая введенной в предыдущем шаге открывающей, должна сообщить браузеру, что этот CSS-стиль здесь заканчивается.
5. Перейдите к пустой строке между двумя скобками, нажмите клавишу Tab и введите код color: #6A94CC;. Это текст того же свойства стиля, что и во встроенном варианте, — свойство color со значением #6A94CC. Точка с запятой обозначает окончание объявления свойства.
6. Снова нажмите клавишу Enter и добавьте дополнительно два свойства, как показано ниже:

   font-size: 3em;
   margin: 0;
   

   Убедитесь в том, что вы не забыли указать точку с запятой в конце каждой строки, иначе код CSS некорректно отобразится в браузере. Каждое из этих свойств придает заголовку определенный визуальный эффект. Первое свойство назначает размер и шрифт текста, в то время как второе удаляет воздух (пустое пространство) вокруг заголовка. Поздравляю — вы только что создали внутреннюю таблицу стилей! Код, который вы добавили на веб-страницу, должен выглядеть так:

   <title>Заголовок</title>
   <style>
   h1 {
       color: #6A94CC;
       font-size: 3em;
       margin: 0;
   }
   </style>
   </head>
   

7. Сохраните страницу и просмотрите ее в браузере. Вы можете сделать это так, как описано в третьем шаге, или, если страница все еще открыта в окне браузера с предыдущего раза, нажмите кнопку Обновить (Reload). Теперь мы добавим другой стиль.
8. Переключитесь обратно в HTML-редактор, установите курсор после закрывающей фигурной скобки стиля h1, который вы только что создали, нажмите клавишу Enter и добавьте следующий стиль:

   p {
       font-size: 1.25em;
       color: #616161;
       line-height: 150%;
       margin-top: 10px;
       margin-left: 60px;
   }
   

   Этот стиль форматирует все абзацы веб-страницы. Не переживайте, что пока не знаете, что делает каждое из описываемых свойств CSS. Пока просто потренируйтесь правильно набирать код и прочувствуйте, каково это — добавлять CSS на страницу.
9. Просмотрите страницу в браузере. Вы видите, как изменился стиль абзаца под первым заголовком? Все то, чем вы занимались в практикуме, можно назвать «CSS в двух словах»: начать с HTML-страницы, добавить таблицу стилей, создать прочие CSS-стили, чтобы заставить страницу прилично выглядеть. В следующей части практикума вы увидите, как можно более эффективно работать, используя внешние таблицы стилей.

Поскольку во внутренних таблицах все стили сгруппированы в начале веб-страницы, создавать и редактировать их намного проще и удобнее, чем встроенные стили, с которыми вы имели дело до этого. Кроме того, внутренние таблицы стилей позволяют форматировать любое количество экземпляров элементов веб-страницы одновременно (как в примере с элементом h1), создав один простой стиль (правило). Внешние таблицы стилей не только наследуют преимущества внутренних таблиц, но и имеют дополнительные плюсы: в них можно хранить все стили для всех страниц сайта. Редактирование одного стиля во внешней таблице обновляет стиль целого сайта. В этом разделе вы возьмете стили, созданные в предыдущем уроке, и поместите их во внешнюю таблицу стилей.

1. В редакторе HTML-кода создайте новый файл и сохраните его под именем styles.css в той же самой папке, где находится веб-страница, над которой вы сейчас работаете. Файлы внешних таблиц стилей должны заканчиваться расширением .css. Имя файла styles.css указывает на то, что стили, содержащиеся в файле, используются глобально для всего сайта (вы, конечно, можете использовать любое понравившееся имя). Приступим к добавлению нового стиля к таблице стилей.
2. Наберите в файле styles.css следующее правило:

   html {
       padding-top: 25px;
       background-image: url(images/bg_page.png);
   }
   

   Это правило касается html — элемента, окружающего все остальные HTML-элементы, имеющиеся на странице. Свойство padding-top добавляет пространство между верхней частью элемента и помещаемым внутри него содержимым. Иными словами, набранный код приведет к добавлению 25 пикселов пустого пространства между верхней частью окна браузера и содержимым страницы. Свойство background-image добавляет к странице фоновое изображение. Свойство background-image может отобразить графику множеством различных способов, но в данном случае изображение будет выведено в виде неперекрывающейся мозаики слева направо и сверху вниз.
3. Добавьте второе правило сразу же после только что введенного в файле styles.css:

   body {
       width: 80%;
       padding: 20px;
       margin: 0 auto;
       border-radius: 10px;
       box-shadow: 10px 10px 10px rgba(0,0,0,.5);
       background-color: #E1EDEB;
   }
   

   Это правило относится к телу веб-страницы (элементу body), которое включает в себя всю информацию, видимую в окне браузера. В этом определении стиля задается множество различных свойств. Но если дать стилю краткое описание, он создает прямоугольную область (блок) для содержимого страницы, составляющую 80 % от ширины окна браузера, имеющую внутри себя небольшое пустое пространство, сдвигающее текст от краев блока (свойство padding), и производит центрирование блока на странице (свойство margin), в частности конкретный прием центровки содержимого страницы. И наконец, блок получает светло-синий цвет фона и прозрачную темную тень. Вместо повторного набора стилей, созданных в предыдущем уроке, просто скопируем стили, созданные ранее, и вставим их в эту внешнюю таблицу стилей.
4. Откройте страницу index.html, над которой работали, и скопируйте весь текст, содержащийся внутри тегов элемента style (не копируйте сами теги элемента style). Скопируйте код стилей тем же самым способом, которым скопировали бы любой текст.
5. В файл styles.css вставьте этот код стилей. Внешняя таблица стилей никогда не должна содержать HTML-код, именно поэтому вы и не копировали теги элемента style.
6. Сохраните файл styles.css. Теперь нужно из HTML-файла удалить CSS-код и связать новую таблицу стилей с этим файлом.
7. Вернитесь к файлу index.html в своем текстовом редакторе и удалите теги элемента style и все CSS-стили, определенные в нем ранее. Вам больше не нужны эти стили внутренней таблицы, поскольку они перенесены во внешнюю таблицу стилей, которую сейчас нужно присоединить к HTML-файлу. В этом уроке вы окунетесь в захватывающий мир веб-шрифтов. Существует множество различных способов применения веб-шрифтов, но в данном примере будет использована служба веб-шрифтов Google.
8. В позиции HTML-файла, где находилась встроенная таблица стилей (между закрывающими тегами </title> и <head>), введите следующий код: <link href="proxy.php?url=http%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DKurale" rel='stylesheet'> Как и прежде, вам пока не стоит вдаваться в подробности. На этом этапе нужно лишь знать, что, встретившись с данной ссылкой, браузер загружает с сервера Google шрифт, который называется Kurale и который могут свободно использовать ваши CSS-стили. Затем вы укажите ссылку на созданную ранее внешнюю таблицу стилей.
9. После только что добавленного элемента link наберите следующий код: <link href="proxy.php?url=https%3A%2F%2Fgithub.com%2Fstyles.css" rel="stylesheet"> Элемент link определяет местонахождение внешней таблицы стилей. Атрибут rel оповещает браузер о том, что ссылка ведет на таблицу стилей.

   ПРИМЕЧАНИЕ В данном примере файл внешней таблицы стилей расположен в той же самой папке, что и веб- страница, так что использование имени файла в качестве значения href предполагает простой путь относительно документа. А если бы он находился в любой другой папке, путь был бы иным. В таком случае для указания местонахождения файла нужно задавать путь либо относительно самого документа, то есть веб-страницы, либо относительно корневого каталога сайта. Применяется такая же методика, как и при указании гиперссылки на другую веб-страницу в HTML-теге .

10. Сохраните файл и просмотрите его в браузере. Вы увидите контент с теми же стилями для элементов h1 и p, которые были созданы ранее во внутренней таблице стилей. Кроме того, теперь есть пятнистый желто-коричневый фон (фоновое изображение, примененное в элементе html), а также светлый сине-зеленый прямоугольник. Он является элементом body, и его ширина составляет 80 % от ширины окна браузера. Попробуйте изменить размер окна браузера и обратите внимание, что размер прямоугольника также изменяется. Прямоугольник также отбрасывает тень, но сквозь нее можно увидеть пятнистый фон. Все это получается благодаря цветовой модели rgba, включающей установки прозрачности (которая будет рассмотрена далее).

    ПРИМЕЧАНИЕ Если на получившейся веб-странице отсутствует форматирование (к примеру, заголовок отображается шрифтом малого размера и никак не выделен), то, вероятно, в шаге 6 вы набрали код с ошибкой или сохранили файл styles.css в папке, отличной от той, в которой находится файл index.html. В этом случае просто переместите файл styles.css в ту же самую папку. Теперь вы увидите веб-шрифт, ссылка на который была добавлена в шаге 8.

11. Запустите текстовый редактор и вернитесь к файлу styles.css. Добавьте к стилю селектора h1 следующие две строки:

    font-family: 'Kurale', 'Arial Black', serif;
    font-weight: normal;
    

    В конечном результате стиль должен приобрести следующий вид:

    h1 {
        font-family: 'Kurale', 'Arial Black', serif;
        font-weight: normal;
        color: #6A94CC;
        font-size: 3em;
        margin: 0;
    }
    

    Теперь при просмотре страницы в браузере вы увидите заголовок, отформатированный шрифтом Kurale.

    ПРИМЕЧАНИЕ Если вы не видите новый шрифт с тонкими линиями (засечками) на концах букв, значит, какое-то из двух обстоятельств не сложилось, вы можете допустить опечатку либо в коде тега (при выполнении шага 8), либо в объявлении font-family (во второй строке показанного выше кода). Чтобы продемонстрировать пользу от хранения ваших стилей в их собственных отдельных файлах, вы можете прикрепить таблицу стилей к другой веб-странице.

12. Откройте файл 02\another_page.html. Эта веб-страница содержит те же самые HTML-элементы: h1, h2, p и др., с которыми вы уже работали.
13. Установите курсор после закрывающего тега </title> и нажмите клавишу Enter. Сейчас нужно добавить к этой веб-странице ссылку на веб-шрифт и уже созданную внешнюю таблицу стилей.
14. Наберите код элемента link, который применялся в шагах 8 и 9. Код веб-страницы должен выглядеть следующим образом:

    <title>Другая страница</title>
    <link href="proxy.php?url=http%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DKurale" rel='stylesheet'>
    <link href="proxy.php?url=https%3A%2F%2Fgithub.com%2Fstyles.css" rel="stylesheet">
    </head>
    

15. Сохраните страницу и просмотрите ее в браузере. Достаточно всего двух строк кода, чтобы мгновенно преобразить внешний вид веб-страницы. Чтобы показать, насколько просто обновить стиль, описанный во внешней таблице стилей, попробуйте отредактировать один из стилей или добавить другие.
16. Откройте файл styles.css и добавьте объявление свойства font-family: "Palatino Linotype", Baskerville, serif; — в начале стиля элемента p. Код должен выглядеть следующим образом:

     p {
         font-family: "Palatino Linotype", Baskerville, serif;
         font-size: 1.25em;
         color: #616161;
         line-height: 150%;
         margin-top: 20px;
         margin-left: 60px;
     }
    

    В данном случае веб-шрифт не используется и все зависит от наличия перечисленных шрифтов на машине посетителя сайта (все вопросы об использовании шрифтов будут рассмотрены позже). Затем создайте новый стиль для элемента h2.
17. Установите курсор после заключительной фигурной скобки } стиля элемента p, нажмите клавишу Enter и добавьте такое правило:

    h2 {
        color: #B1967C;
        font-family: 'Kurale', 'Arial Black', serif;
        font-weight: normal;
        font-size: 2.2em;
        border-bottom: 2px white solid;
        background: url(images/head-icon.png) no-repeat 10px 10px;
        padding: 0 0 2px 60px;
        margin: 0;
    }
    

    С большинством этих CSS-свойств вы уже знакомы, однако некоторые из них новые, например border-bottom, используемое для добавления линии под заголовком. Свойство background вообще предоставляет возможность комбинировать различные свойства — в данном случае это background-image и background-repeat — в одно. Стили, которые вы создавали до сих пор, работают с основными элементами h1, h2 и p, изменяя оформление каждого их экземпляра. Другими словами, стиль p, который вы создали, форматирует каждый абзац на странице. Но если вы хотите воздействовать на конкретный абзац, нужно использовать другой вид стиля.
18. Перейдите к концу стиля h2, нажмите клавишу Enter после закрывающей скобки } и наберите следующий код:

    .intro {
        color: #666666;
        font-family: 'Kurale', Helvetica, sans-serif;
        font-size: 1.2em;
        margin-left: 0;
        margin-bottom: 25px;
    }
    

    Если вы просмотрите файл index.html в браузере, то пока не заметите никаких изменений. Этот тип стиля, называемый селектором класса, форматирует только отдельные элементы, к которым вы примените класс. Для того чтобы этот новый стиль работал, придется немного отредактировать HTML-код.
19. Сохраните файл styles.css и перейдите к файлу index.html в своем текстовом редакторе. Найдите открывающий тег <p>, следующий за элементом h1, и добавьте код class="intro". Открывающий тег должен выглядеть так: <p class="intro"> Вам не нужно добавлять точку перед словом intro, как вы это делали, создавая стиль в шаге 18. Дополнительный HTML-код применяет стиль к первому абзацу (и только к первому). Повторите этот шаг для файла another_page.html — добавьте class="intro" к первому тегу <p> на этой странице.
20. Сохраните все файлы и просмотрите страницы index.html и another_page.html в браузере. Обратите внимание, что вследствие простого редактирования CSS-файла внешний вид обеих веб-страниц изменился. Вам осталось выполнить еще одно небольшое изменение. Если вы посмотрите в нижнюю часть страницы в браузере, то увидите информацию об авторских правах. Форматирование этой строки отличается от стиля абзацев, расположенных над ней. Страница смотрелась бы гораздо лучше, если бы их стили совпадали.
21. Вернитесь к файлу styles.css в текстовом редакторе. Найдите стиль с селектором p. Добавьте запятую, пробел и слово address. Стиль должен выглядеть следующим образом:

    p, address {
        font-family: "Palatino Linotype", Baskerville, serif;
        font-size: 1.25em;
        color: #616161;
        line-height: 150%;
        margin-top: 20px;
        margin-left: 60px;
    }
    

    Вы изменили не свойства стиля, а его селектор. Фактически вы создали групповой селектор, который очень эффективен в случаях, когда необходимо применить один и тот же стиль ко множеству элементов страницы. Подробнее об этом способе вы узнаете позже. В данном случае стиль применился к двум элементам: p и address.
22. Сохраните все файлы и просмотрите страницу index.html.

На рисунке ниже представлен окончательный вид страницы.

Для практики попробуйте внести в файл styles.css какие-либо изменения. Поэкспериментируйте с различными значениями свойств. Можно, например, изменить значение свойства width стиля body или изменить размер шрифта.