Оглавление

2.3. Вынесение таблицы стилей в отдельный файл

Таблицу стилей можно вынести в отдельный файл. Файл с таблицей стилей обычно имеет расширение css и может редактироваться любым текстовым редактором, например, Блокнотом.(1) Задать расширение файлу можно точно так же, как и при создании файла с расширением html.
Вынесем таблицу стилей в отдельный файл style.css (листинг 2) и подключим его к основному документу test.html (листинг 3).

 

Листинг 2. Содержимое файла style.css

/* Так можно вставить комментарий */  

 

.textl { /* Стиль для элементов с class="textl" */  

     font-size: 12pt; /* Размер шрифта */  

     color: red; /* Цвет текста */

      font-family: Arial /* Название шрифта */  

     }  

font { /* Стиль для всех тегов FONT */  

     font-size: 12pt; /* Размер шрифта */  

     color: green; /* Цвет текста */  

     font-family: Arial /* Название шрифта */  

     }  

font.text2 { /* Стиль для тегов FONT с class="text2" */  

     font-size: 12pt; /* Размер шрифта */  

     color: blue; /* Цвет текста */  

     font-family: Arial /* Название шрифта */  

     }

 

Листинг 3. Содержимое файла test.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  

             "http://www.w3.org/TR/html4/loose.dtd">

<html>  

<head>  

  <title>Пример использования cтилeй</title>

  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">  

  <link rel="stylesheet" type="text/css" href="style.css">  

</head>

<body>  

  <font class="textl">Текст1</font><br><!-- Красный текст --> 

  <font>Текст2</font><br><!-- Зеленый текст -->

    <font class="text2">Текст3</font><br><!-- Синий текст -->  

  <p class="text2">Текст4</p><!-- Цвет по умолчанию -->

    <p class="textl">Текст5</p><!-- Красный текст -->

</body>

</html>

 

Сохраним оба файла в одной папке и откроем файл test.html в Web-браузере. Результат будет таким же, как и в предыдущем примере.

 

Текст1
Текст2
Текст3

Текст4

Текст5

 

Отдельный файл с таблицей стилей прикрепляется к HTML-документу с помощью одинарного тега <iink>. В параметре href указывается абсолютный или относительный URL-адрес файла, а в параметре rel должно быть значение stylesheet, показывающее, что присоединяемый таким образом документ содержит таблицу стилей:
   <link rel="stylesheet" type="text/css" href="style.css">

 

Подключить внешний CSS-файл можно также с помощью правила ©import:

     ©import url(<URL-адрес>)[ <Тип устройства>];
     ©import  <URL-adpec>[ <Тип устройства>];


Правило ©import: должно быть расположено внутри тега <style>:

    <style type="text/css">  

      ©import url("style.ess");  

    </style>


В необязательном параметре <Тип устройства> можно указать устройство, для которого предназначена подключаемая таблица стилей. Например, all — для любых устройств, print — для предварительного просмотра и распечатки документа. Пример:

<style type="text/css">

©import "style.css" print;

</style>


Таблицу стилей, вынесенную в отдельный файл, можно использовать в нескольких HTML-документах.

Примечания:
  • Лучше использовать текстовый редактор с подсветкой, к примеру, Notepad++
3
 << Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити