logo search
Lektsii_OIS-2010

Таблицы стилей в отдельных файлах

При использовании тега <style> требуется вставлять таблицу стилей в каждый документ. Это может показаться довольно неэкономным как с точки зрения объема файлов, так и времени, необходимого на разработку страницы. Поэтому есть способ автоматического применения таблицы стилей, сохраненной в отдельном файле. Это файл должен иметь расширение *. css.

Для применения стилей, описанных в этом файле, к данному документу используется специальная инструкция, которую нужно вставить между тегами <style>…</style>:

@import URL("адрес_файла_стилей ")

Например:

@import URL("http://www.yourdoman.ru/style.css")

Другой способ использования внешних таблиц стилей основан на применении тега <LINK> внутри тега <HEAD>:

<HEAD>

<LINK REL=STYLESHEET TYPE="text/css" HREF="адрес_таблицы_стилей"

TITLE="Style">

</HEAD>

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

Содержимое файла primercss1.htm:

<html>

<head>

<title>Untitled Document</title>

<LINK REL=STYLESHEET TYPE="text/css" HREF="style.css">

<TITLE>Пример использования таблиц стилей</TITLE>

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

<body >

<DIV class=first>Каскадные таблицы стилей -</DIV>

<DIV class=second>это</DIV>

<DIV class=third>круто!</DIV>

</body>

</html>

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

body {

font-family: Arial, sans-serif;

text-align: center;

}

.first {

color: brown;

margin-top: 60px;

font-size: 40px;

}

.second {

color: green;

margin-top: -50px;

font-size: 100px;

}

.third {

color: black;

margin-top: -80px;

font-size: 120px;

font-weight: bold;

}

Внешний вид в браузере:

      1.