Каскадные таблицы стилей, CSS
Каскадные таблицы стилей (cascading style sheets — CSS) были придуманы в середине 1990-х для упрощения оформления элементов Интернет-страниц, выводимых на экран.
Так или иначе, работа со стилями основывается на объектной парадигме: стилевое оформление присваивается объекту.
Основными объектами для Интернет-страниц будут: окно браузера, текст (абзац и символы), гиперссылка, список, изображение, таблица (сложный объект), элементы форм и т.д.
Зачем это нужно
Классический пример. Вы (или ваш начальник-самодур) решили, что слова с определенным смыслом должны быть красными, и сделали так:
<font color="#FF0000">Красиво-то как!</font>
Полюбовались, подивились своей эстетической гениальности и размножили этот шедевр по 400 страницам своего сайта. Всего получилось 5600 случаев, а работа отняла неделю и вам уже было плохо от ряби в глазах.
Прошло некоторое время, и вам пришло в голову, что этот текст надо было сделать ещё полужирным. (А начальнику, как самодуру, могло прийти ещё что-то особо умное.)
<font color="#FF0000"><b>Красиво-то как!</b></font>
Как быть? В идеальном случае (угадайте, случится ли он?) тег для красного цвета шрифта больше нигде не применялся и можно сделать замену или даже воспользоваться программами, делающими это сразу со всеми файлами. Но как быть с закрывающим тегом? Ответ прост: ручками и под контролем зрения открыть все 400 файлов и поработать пару дней.
Расслабились? А начальник передумал и велел сделать опять иначе.
Не зарекайтесь, что вы придумаете раз и навсегда или что дураков на своем жизненном пути вы не встретите. Все мы ошибаемся, меняем свое восприятие и, в конце концов, хотим обновить то, что сделали раньше.
Если бы вы использовали CSS, то любые изменения отняли у вас несколько секунд, хотя первый этап остался бы таким же сложным.
Единицы измерения
Их много. Чтобы сделать правильный выбор, надо понимать, что проще и быстрее сделать компьютеру, пересчитывая ваши творческие изыски; насколько точно он сможет сделать то, что вы просите. (Хотя можно всё проигнорировать и делать «на глазок».)
Поскольку вывод производится на экран, главная единица измерения — пиксель (px). Попробуйте задать размер картинки в других единицах. Кроме того, для вывода в современных браузерах используется эталонная единица экранного разрешения 96ppi. Но не всё возможно измерить в пикселах в принципе.
Доступ к этим материалам предоставляется только зарегистрированным пользователям!
Символьные стили
Чтобы оформить одинаково фрагменты текста внутри абзацев, можно воспользоваться соответствующими стилями.
Например, создадим стиль term для одинакового выделения терминов.
span.term {color: Olive; font-style: italic; text-decoration: underline;}
Чтобы применить стиль к тексту, нужно заключить его в такие теги:
<span class="term">Пример термина</span>
Таким образом мы получим: Пример термина.
То есть символьный стиль задается парным тегом <span> и, при его описании, могут быть выделены следующие основные свойства:
- семейство шрифта (font-family) с принятием решения об использовании конкретного шрифта браузером
- serif (шрифт с засечками)
- sans-serif (шрифт без засечек, рубленный)
- monospace (моноширинные, все символы имеют одинаковую ширину)
- cursive (рукописные)
- courier (похожий на пишущую машинку)...
- конкретное имя шрифта (а если его нет у читателя сайта?)
задание font-family: MyFont, serif; позволит браузеру выбрать точно имеющуюся альтернативу при отсутствии основного шрифта
Да, если имя шрифта содержит в названии пробелы, его надо заключить в кавычки:
font-family: 'Times New Roman', serif;
- начертания (etc.)
- полужирное (font-weight: bold;)
- курсив (font-style: italic;)
- подчеркивание (text-decoration: underline;)
- капитель (font-variant: small-caps)
- первые заглавными (text-transform: capitalize;)
- всё заглавными (text-transform: uppercase;)
- атрибут font позволяет многое объединить, но обсуждаться не будет!
- размер символов (font-size) лучше задавать в пунктах (учтите, что если выбранный браузером шрифт является экранным, то у него есть только фиксированные размеры)
- уже перечисленного вполне достаточно почти для любых задач.
Стили абзацев
....
Все абзацы
Абзац задается тегом <p> и у него могут быть выделены следующие свойства:
- выравнивание (text-align)
- по левому краю (left)
- по правому краю (right)
- по центру (center)
- по формату/ширине (justify)
- отступы с 4 сторон:
- margin-top
- margin-bottom
- margin-left
- margin-right
- все 4 отступа сразу: margin
- красная строка: text-indent (может иметь отрицательное значение, но тогда следует делать и левый отступ)
- все атрибуты символов (ведь абзац потенциально содержит символы)
- цвет фона (background), который распространяется на всю прямоугольную область, занимаемую абзацем
- расстояние между строками или интерлиньяж (line-height), которым не стоит злоупотреблять
- много ещё чего, да и спецификации развиваются ;-)
Заголовки
Как мы уже знаем, HTML имеет 6 уровней встроенных заголовков, обозначаемых парными тегами от <h1> до <h6>. Во многом их внешний вид определяет эстетику восприятия авторских страниц. Полюбуйтесь оформлением по умолчанию для вашего браузера.
Что хотелось бы отметить из недостатков.
- Слишком крупный шрифт вначале, превращается в мелкий, почти нечитаемый.
- Всё выделение делается полужирным.
- Огромные, но везде одинаковые отступы от текста.
Исправив все эти свойства по своему вкусу, вы получите намного большее удовлетворение от своего сайта.
Изменению подлежат все атрибуты абзаца, перечисленные выше.
Стили списков
Список является прямоугольным контейнером с 4 сторонами.
Отсюда подлежат изменению 4 отступа: margin-top, margin-bottom, margin-left, margin-right.
Кроме того, есть строка (тег <li>), представляющий из себя абзац, только с выступом с маркером слева.
- list-style-type
- Для маркированных списков
- circle
- disc
- square
- Для нумерованных списков
- decimal (арабские цифры)
- lower-alpha (строчные буквы)
- upper-alpha (заглавные буквы)
- lower-roman (строчные римские)
- upper-roman (заглавные римские)
- none (также, как в предыдущем уровне)
Оформление отдельного списка заданием картинки вместо маркеров:
<ul style="list-style-image: url('../../img/smallnew.gif,');">
даст, например, такой результат:
- Пункт списка с картинкой
- Второй
Собственные стили абзацев
Помимо тех абзацев, что уже встроены в HTML, вы можете создать собственные, присвоив им подходящие имена. Если для встроенных тегов применение правил форматирования не вызывает проблем, то собственные стили используются несколько иначе.
Например, для оформления абзацев, которые вы читаете, использован стиль «j». Вот его описание:
p.j {text-align: justify; text-indent: 1.5em; margin:0;}
Буква «p» означает, что описывается стиль абзаца. Точка отделяет имя стиля. Далее, в фигурных скобках приведены изменяемые атрибуты, каждый из которых оканчивается точкой с запятой.
Описано: выравнивать по формату, все поля сделать равными нулю, а красную строку — в полторы высоты текущего размера шрифта. Порядок расположения атрибутов может быть любым.
Чтобы применить стиль к абзацу, он описывается таким тегом: <p class="j"> вместо просто <p>.
Замечание
Обратите внимание, что, в отличие от JavaScript, ошибки, допущенные в описании стиля, не блокируют всю таблицу стилей. Не будет применяться только единичный некорректный стиль.
Естественно, что достаточно разумно (для реального Интернет-проекта) проверить работоспособность всех стилей во всех основных браузерах. Для этого удобно создать отдельный «скрытый» файл, не используемый сайтом, где элементы текста содержат названия примененных к ним стилей.
Некоторые полезные ресурсы
Приведенные ресурсы во много раз превышают объем изучаемого! Скорее, они нужны для дальнейшего развития.
- Официальная домашняя страничка рабочей группы CSS (the same in english).
- Стандарты CSS (english).
- Замечательный сайт с систематичным изложением, посвященный CSS больше не существует.
- Справочник-руководство (кратко и четко) тоже удален.
- Использование в формах (english).
- Википедия.
- Справочник.
- Сайт с полезными генераторами кода.