Листы стилей
Моя первая страница в Интернете выглядела чудесно в браузере
Netscape, но, когда я увидел ее в Еxplorer, моя гордость сразу исчезла.
При выводе текстовой информации в странице возникают три проблемы:
1. В разных браузерах текст отображается по-разному, и приходится
подстраиваться под всех.
2. Описание аттрибутов текста часто занимает много места в исходном коде,
повторяясь в каждом файле HTML.
3. Многие возможности просто невозможно реализовать, например,
изменить расстояние между строками, между буквами, задавать произвольный
размер букв и т. д.
Использование таблиц стилей - наилучший способ решения данных проблем.
Для этой цели разработан язык CSS - Cascading Style Sheet.
Он предложен консорциумом W3 Consortium:
www.w3.org/
Язык стилей CSS включен в четвертые версии обоих основных браузеров.
Таблицы стилей позволяют управлять многими функциями макетирования и
тифографской разметки. К ним относятся фоновое оформление основного текста,
цвета заголовков, цвета связей, внешний вид первых строк и буковиц,
размеры отступов, промежутки между словами и буквами, жирность и
семейства шрифтов. И очень важно: если вставить ссылку на документ,
содержащий нужные Вам стили, то все документы, имеющие указатели на этот
документ, будут автоматически соответствовать тем же описаниям стилей.
Следует отметить, что дело это сравнительно новое, не все свойства стилей
включены в браузеры, не все, что работает в Еxplorer, будет работать в
Netscape. В общем, болезнь роста. Сколько существует Интернет,
столько существует эта болезнь. Хотя, может быть, это нормально?
Галерею примеров CSS вы можете увидеть по следующему адресу:
www.w3.org/style/css
Существует 4 способа внедрения стилей в HTML документ. Мы разберем один
основной, который , по мнению автора данной статьи, в наибольшей степени
соответствует цели создания стилей и очень удобен в работе.
Мы создаем в отдельном файле необходимые нам стили, а в HTML файлах
будем ссылаться на них.
Итак, с помощью любого текстого редактора создадим обычный файл
style.css
В нем создадим стиль s1 красного цвета , полужирный с помощью следующего
определения:
.s1{color: red; font-weight: bold;}
Теперь в заголовке (то есть между командами <HEAD>
и </HEAD> любого Вашего HTML - файла ) задайте команду - указатель на
этот css файл:
<link href="style.css" rel=stylesheet TYPE="text/css">
И, наконец, текст, который Вы хотите отобразить с помощью стиля s1,
обрамите вначале командой <A a class="s1">, в конце - командой
</A>
Например,
<A a class="s1">Редактируемый текст</A>
Рассмотрим примеры основных параметров стилей. Заметим, что количество
параметров в одном стиле не ограничено.
font-family: Arial, Helvetica, Times
Текст будет выводиться с помощью шрифта Arial, если его в браузере не будет,
то Helvetica, если же его не будет, то Times. А если и его не будет?
Тогда шрифт, принятый в браузере по умолчанию.
color: red
color: "FF00FF"
color: #FF00FF
color : rgb(0,0,0);
Любым из этих способов задается цвет текста
background: #00FFFF
Аналогично, задается цвет фона.
font-style: italic;
Задать наклонный шрифт
font-weight: bold;
font-weight: normal;
font-weight: 400;
Числа соответствуют толщине шрифта: от самого тонкого - 100
до самого толстого - 900. При этом 400 соответствует normal,
700 - bold.
font-size: 12pt;
font-size: 150%;
font-size: 1.5em; (em - элемент)
Задается размер шрифта: в первом примере абсолютное значение,
во втором и в третьем - относительно стандартного размера в процентах и в
частях.
word-spacing: 0.4em
Дополнение к стандартному размеру между словами, эта величина может быть
отрицательной.
letter-spacing: 0.1em
Аналогично, дополнение к стандартному размеру между буквами, эта величина
также может быть отрицательной.
vertical-align: top;
vertical-align: middle;
vertical-align: botton;
Вертикальное расположение элемента.
text-align: left;
text-align: center;
text-align: right;
Вертикальное расположение текста.
margin-top: 10%;
margin-bottom: 40 px;
margin-left: 2 em;
margin-right: 40 px;
margin: 5%;
Задаются границы текста: сверху, снизу, слева, справа, со всех сторон.
border: thin;
border: medium;
border: thick;
border: solid 0.5em;
Задается толщина рамки, ограничивающей текст
border-color: red;
Задается цвет рамки, ограничивающей текст;
Существует еще много менее существенных параметров.
В имеющейся литературе обычно предлагается создать стили для конкретных
элементов - например, для заголовка, для абзаца.
Пример:
H1.s1{color: black;
font: 20pt Arial}
задает стиль для заголовка H1.
Это совершенно необязательно - любой созданный стиль может быть
использован для любого текста - и для заголовков, и для обычных строк.
Примеры задания стилей:
<a class="s1"> Исходный текст</a>
<td class="s1"> Исходный текст</td>
<p class="s1"> Исходный текст</p>
Интернет 