Каскадные таблицы стилей (cascading style sheets – CSS) были придуманы в середине 1990-х для упрощения оформления элементов Интернет-страниц, выводимых на экран.
Так или иначе, работа со стилями основывается на объектной парадигме: стилевое оформление присваивается объекту.
Основными объектами для Интернет-страниц будут: окно браузера, текст (абзац и символы), гиперссылка, список, изображение, таблица (сложный объект), элементы форм и т.д.
Классический пример. Вы (или ваш начальник-самодур) решили, что слова с определенным смыслом должны быть красными и сделали так:
<font color="#FF0000">Красиво-то как!</font>
Полюбовались, подивились своей эстетической гениальности и размножили этот шедевр по 400 страницам своего сайта. Всего получилось 5600 случаев, а работа отняла неделю и вам уже было плохо от ряби в глазах.
Прошло некоторое время и вам пришло в голову, что этот текст надо было сделать ещё полужирным. (А начальнику, как самодуру, могло прийти ещё что-то особо умное.)
<font color="#FF0000"><b>Красиво-то как!</b></font>
Как быть? В идеальном случае (угадайте, случится ли он?) тег для красного цвета шрифта больше нигде не применялся и можно сделать замену или даже воспользоваться программами, делающими это сразу со всеми файлами. Но как быть с закрывающим тегом? Ответ прост: ручками и под контролем зрения открыть все 400 файлов и поработать пару дней.
Расслабились? А начальник передумал и велел сделать опять иначе.
Не зарекайтесь, что вы придумаете раз и навсегда или что дураков на своем жизненном пути вы не встретите. Все мы ошибаемся, меняем свое восприятие и, в конце-концов, хотим обновить то, что сделали раньше.
Если бы вы использовали CSS, то любые изменения отняли у вас несколько секунд, хотя первый этап осталься бы таким же сложным.
Их много. Чтобы сделать правильный выбор, надо понимать, что проще и быстрее сделать компьютеру, пересчитывая ваши творческие изыски; насколько точно он сможет сделать то, что вы просите. (Хотя можно всё проигнорировать и делать «на глазок».)
Поскольку вывод производится на экран, главная единица измерения – пиксель (px). Попробуйте задать размер картинки в других единицах. Кроме того, для вывода в современных браузерах используется эталонная единица экранного разрешения 96ppi. Но не всё возможно измерить в пикселах в принципе.
Наибольшая часть информации выводится в виде символов, откуда появляется относительные единицы от размера шрифта (em) и от высоты строчных букв (ex).
Часть данных может выводиться в привычных нам относительных единицах – процентах (%).
Для тех случаев, когда не хочется связываться с точной оценкой, можно воспользоваться дюймами (in), сантиметрами (cm) или милиметрами (mm).
Более мелкими (а значит и точными) являютя пункты (pt) и пики (pc).
Пункт – 1/72 дюйма (~0.35 мм). Но его важность заключается в том, что размер символов и толщины линий измеряются только в пунктах.
Пика – единица равная 12 пунктам. Таким образом, она соответствует наиболее важному размеру шрифта.
Чтобы оформить одинаково фрагменты текста внутри абзацев, можно воспользоваться соответствующими стилями.
Например, создадим стиль term для одинакового выделения терминов.
span.term {color: Olive; font-style: italic; text-decoration: underline;}
Чтобы применить стиль к тексту, нужно заключить его в такие теги:
<span class="term">Пример термина</span>
Таким образом мы получим: Пример термина.
То есть символьный стиль задается парным тегом <span> и, при его описании, могут быть выделены следующие основные свойства:
Абзац задается тегом <p> и у него могут быть выделены следующие свойства:
Как мы уже знаем, HTML имеет 6 уровней встроенных заголовков, обозначаемых парными тегами от <h1> до <h6>. Во многом их внешний вид определяет эстетику восприятия авторских страниц. Полюбуйтесь оформлением по умолчанию для вашего браузера.
Что хотелось бы отметить из недостатков.
Исправив все эти свойства по своему вкусу, вы получите намного большее удовлетворение от своего сайта.
Изменению подлежат все атрибуты абзаца, перечисленные выше.
Список является прямоугольным контейнером с 4 сторонами.
Отсюда подлежат изменению 4 отступа: margin-top, margin-bottom, margin-left, margin-right.
Кроме того, есть строка (тег <li>), представляющий из себя абзац, только с выступом с маркером слева.
Оформление отдельного списка заданием картинки вместо маркеров:
<ul style="list-style-image: url('../../img/sqred.gif');">
даст, например, такой результат:
Помимо тех абзацев, что уже встроены в HTML, вы можете создать собственные, присвоив им подходящие имена.
Если для встроенных тегов применение правил форматирования не вызывает проблем, то собственные стили используется несколько иначе.
Например, для оформления абзацев, которые вы читаете, использован стиль «j». Вот его описание:
p.j {text-align: justify; text-indent: 1.5em; margin:0;}
Буква «p» означает, что описывается стиль абзаца. Точка отделяет имя стиля. Далее, в фигурных скобках приведены изменяемые атрибуты, каждый из которых оканчивается точкой с запятой.
Описано: выравнивать по формату, все поля сделать равными нулю, а красную строку – в полторы высоты текущего размера шрифта. Порядок расположения может быть любым.
Чтобы применить стиль к абзацу, он описывается таким тегом: <p class="j"> вместо просто <p>.