2015-09-06
462
С помощью таблиц стилей (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>
