Таблицы стилей

С помощью таблиц стилей (style sheets) можно контролировать внешний вид Web-страниц в гораздо большей степени, чем с помощью «простого» HTML. При использовании таблиц стилей функциональные возможности Web-страниц будут доступны всем пользователям без исключения. Перед пользователями, имеющими современные компьютеры и браузеры, Web-страницы предстанут в оригинальном виде. Все остальные пользователи увидят страницы в упрощенном варианте; тем не менее, они в полном объеме получат ту же информацию, что и пользователи современных браузеров.

Для того, чтобы все страницы Web-сайта выглядели единообразно, создают отдельный файл с таблицами стилей, и с ним связывают все Web-страницы. Расширение такого файла - .css (css – cascading style sheets). В результате появляется возможность для контроля внешнего вида Web-страниц, а также значительной экономии времени.

Структура файла с описанием стилей достаточно проста. Указывается тег, обозначающий способ форматирования текста, а за ним в фигурных скобках – переопределение стиля для этого тега. Ниже приводится текст файла style1.css:

.back {background: yellow}

.bigletter {font-family: Garamond, "Times New Roman"; font-size: 130pt; font-style: italic; color: #666633}

.maintext {font-family: "Times New Roman", Times, serif; font-size: 14pt; color: #990000; text-align: center; font-weight: bold }

a.changecolor {color:black; text-decoration: none}

a.changecolor:Hover {color:blue; text-decoration: underline}

В этом файле первая строка задает желтый фон элемента (background: yellow), вторая строка определяет, что текст класса bigletter пишется шрифтом Garamond или Times New Roman, размер шрифта – 130 пунктов, начертание – курсив (italic), цвет #666633, третья строка – что текст класса maintext пишется шрифтом Times New Roman, Times или serif, размер шрифта – 14 пунктов, цвет #990000, текст центрируется (text-align:center). Четвертая и пятая строки определяют, что ссылка <a> класса changecolor имеет черный цвет и не подчеркнута (text-decoration:none); при подводе к ней курсора мыши она меняет цвет на синий и становится подчеркнутой (text-decoration:underline). Этот эффект поддерживается только в Internet Explorer.

Для того, чтобы использовать стиль из файла style1.css, надо в HTML-файле к соответствующему тегу добавить параметр CLASS. Например,

<BODY CLASS=”BACK”>, <H1 CLASS=”BIGLETTER”>, <P CLASS=”MAINTEXT”>.

Для того, чтобы HTML-документ связать с файлом по имени style1.css, содержащим таблицы стилей, надо добавить в него внутри контейнера <HEAD></HEAD> тег<LINK REL=STYLESHEET HREF=”style1.css” TYPE = ”text/css”>. Например:

<html>

<head>

<title>style</title>

<link href=" style1.css" rel=stylesheet>

</head>

<body class="back">

<div class="bigletter">Это bigletter </div>

<p class="maintext">Это maintext</p>

<p class="maintext">Эта <a class = "changecolor" href = "http:// www.spbstu.ru/mmf/index.html"> ссылка</a> меняет цвет на синий только в Internet Explorer</p>

</body>

</html>