Как хорошо, что я занимаюсь саморазвитием.

Я выучу CSS за месяц, а то и быстрее

Шаг 4: Просмотр HTML страницы в браузере

Откройте пример в браузере и убедитесь, что результат нашего примера соответствует изображению:

Подключение внешней таблицы стилей

Сейчас мы с Вами создадим отдельный файл, который будет содержать таблицу стилей и подключим его к нашему HTML документу.

1. В программе Notepad++ создайте новый пустой файл и сохраните его под именем page.css (при сохранении файла необходимо выбрать Cascade Style Sheets *.css ) в той же папке, где вы создавали HTML документ.
2. Перенесите из предыдущего примера код CSS (содержимое тега

   Hello, world!

   
   В данном примере определен стиль тега

   , который затем можно повсеместно использовать на данной веб-странице.

   Замечание

   Таблица глобальных стилей может размещаться не только внутри контейнера , но также в любом месте кода HTML-документа.
   Внутренние стили

   Внутренний стиль является по существу расширением для одиночного тега используемого на веб-странице. Для определения стиля используется параметр тега style, а его атрибуты указываются с помощью языка таблицы стилей, см. пример 4.

   Пример 4. Использование внутренних стилей
   

   Заголовок

   
   В данном примере стиль тега

   задается с помощью параметра style, в котором через точку с запятой перечисляются стилевые атрибуты.

   Замечание

   Внутренние стили рекомендуется применять на сайте ограниченно или вообще отказаться от их использования. Дело в том, что добавление таких стилей увеличивает общий объем файлов, что ведет к повышению времени их загрузки в браузере, и усложняет редактирование документов для разработчиков.

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

   Пример 5. Сочетание разных методов подключения стилей
   

   "font-size: 36px; font-family: Times, serif; color: red" > Заголовок 1

   Заголовок 2

   
   В данном примере первый заголовок задается красным цветом размером 36 пикселов с помощью внутреннего стиля, а следующий - зеленым цветом через таблицу глобальных стилей.

   Импорт CSS

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

   @import url ("имя файла") типы носителей; @import "имя файла" типы носителей;

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

   Пример 6. Импорт CSS в глобальную таблицу стилей
   

   Заголовок 1

   Заголовок 2

   
   В данном примере показано подключение файла header.css, который расположен в папке style.

   Третья статья из цикла «подключение CSS» посвящена внешним таблицам стилей . Использование внешних таблиц — самый гибкий, мощный, удобный и правильный способ соединить HTML и .

   Суть способа в том, что CSS выноситься в отдельный файл (или файлы). А в HTML указывается, какие именно CSS-файлы к нему нужно применить.

   Представляем внешнюю таблицу

   Внешняя таблица стилей — это обычный текстовый файл с расширением css. Вообще говоря, это расширение не обязательное, но очень рекомендуемое, дабы избежать проблем с некоторыми особо старыми браузерами.

   Файл с таблицей стилей должен содержать только правила и комментарии CSS. Наличие во внешней таблице стилей, например, HTML-разметки может привести к тому, что некоторые ее части или вообще вся таблица будут проигнорированы.

   Тег link для внешних таблиц стилей

   Для подключения внешнего CSS используется тег .

   Знакомься, тег link:

   • устанавливает связь с внешними документами, чаще всего с таблицами стилей;
   • должен располагаться в секции ;
   • в одном документе может быть несколько тегов link.

   Примеры подключения CSS

   Как правило, используются три атрибута:

   • — отвечает за установку взаимосвязи и в данном случае имеет значение "stylesheet";
   • — MIME-тип подключаемого объекта. У нас это таблица стилей — значит тип "text/сss";
   • — абсолютный или относительный путь к самому CSS-файлу.

   Также есть возможность подключать индивидуальные CSS в зависимости от устройства отображения. Для этого служит атрибут media. Подробнее с его значениями можно ознакомиться в .

   Пример подключения дополнительной таблицы стилей для устройств печати:

   Пример подключения CSS с использованием (ie6.css будет подключен только, если страница просматривается с помощью браузера, который идентифицируется, как IE6):

   Достоинства внешних CSS

   Кроме того, что все правила четко погруппированы в отдельном файле и их легко находить и, при необходимости, править, у внешних таблиц есть ряд существенных плюсов, по сравнению с . Например:

   1. Один и тот же CSS-файл может «обслуживать» сколько угодно HTML-страниц. Объем HTML уменьшится, вносить изменения, общие для всех страниц сайта, значительно проще.
   2. Можно разделить правила на логические блоки (общие стили, стили для конкретных разделов сайта), расположить их в нескольких разных CSS-файлах и, для отдельных страниц, подключать только нужные. Только учти, что тут палка о двух концах — с одной стороны получаем меньший размер подключенного CSS (ненужные файлы стилей не грузятся), с другой стороны — больше мелких файлов со стилями — это больше обращений к серверу, что, понятно, не очень хорошо скажется на быстродействии.
   3. Можно выделять стили для конкретных браузеров и подключать их с помощью условных комментариев. Это используется для укрощения особо упрямых браузеров. Правда, с помощью условных комментариев так же можно подключить и вложенную таблицу, но выглядеть такая конструкция будет реально громоздко.

   Резюме

   Использование внешних таблиц стилей — самый удобный и грамотный способ связать воедино HTML и CSS. Надеюсь, вывод ясен. В реальных проектах используй именно внешние таблицы стилей.

   Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением. Далее рассмотрим их подробнее.

   Внешняя таблица стилей

   Стили располагаются в отдельном файле с расширением css, для связывания HTML-документа с CSS-файлом применяется элемент . Он располагается внутри , как показано в примере 1.

   Пример 1. Подключение внешних стилей

   Заголовок

   Значение атрибута rel у всегда будет stylesheet и остаётся неизменным. В качестве значения href указывается путь к CSS-файлу; путь может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте. В примере выше мы подключаем кириллический шрифт Lobster с сайта Google Fonts.

   Содержимое файла style.css показано в примере 2.

   Пример 2. Содержимое файла style.css

   H1 { font-family: "Lobster", cursive; color: green; }

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

   Внутренняя таблица стилей

   Стили пишутся в самом HTML-документе внутри элемента

   Заголовок

   В данном примере задан стиль элемента

   , который затем можно повсеместно использовать на данной веб-странице (рис. 1). Обратите внимание, что мы можем спокойно комбинировать со

   Заголовок 1

   Заголовок 2

   В данном примере для первого заголовка задан красный цвет и размер 36 пикселей с помощью атрибута style , для второго заголовка - зелёный цвет через элемент

   Заголовок 1

   Заголовок 2

   В данном примере показан импорт стилевого файла с сайта Google Fonts для подключения кириллического шрифта Lobster.