Каскадные таблицы стилей, CSS

Каскадные таблицы стилей (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 мм). Но его важность заключается в том, что размер символов и толщины линий измеряются только в пунктах.

Пика – единица равная 1/72 фута, 1/6 дюйма или 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>.

Замечание

Обратите внимание, что, в отличии от JavaScript, ошибки, допущенные в описании стиля, не блокируют всю таблицу стилей. Не будет применяться только единичный некорректный стиль.

Естественно, что достаточно разумно (для реального Интернет-проекта) проверить работоспособность всех стилей во всех основных браузерах. Для этого удобно создать отдельный "скрытый" файл, не используемый сайтом, где элементы текста содержат названия примененных к ним стилей.

Некоторые полезные ресурсы

Приведенные ресурсы во много раз превышают объем изучаемого!
  1. Официальная домашняя страничка рабочей группы CSS (the same in english).
  2. Стандарты CSS (english).
  3. Замечательный сайт с систематичным изложением, посвященный CSS.
  4. Справочник-руководство (кратко и четко).
  5. Использование в формах (english).
  6. Википедия.
  7. Справочник.
См. также Примеры

Copyright © 1993–2020 Мацкявичюс Д.А. Все права защищены.
Никакая часть сайта не может быть воспроизведена никаким способом без письменного разрешения правообладателя и явной ссылки на данный ресурс.