ВикиСтили

Пожалуйста, экспериментируйте в песочнице!

авторам (основы)

Основы стилей

ВикиСтили позволяют авторам изменять цвет и другие параметры оформления содержимого страниц. Викистили пишутся между знаками процента, как например %red% или %bgcolor=blue%.

Чаще всего викистили применяют для изменения параметров текста, таких как цвет, фон и шрифт. В PmWiki определено несколько стилей для изменения цвета текста: %white%, %yellow% , %silver%, %gray%, %green%, %purple%, %red%, %blue%, %maroon%, %navy% и %black%.

В вазе лежали %red% яблоки, %blue% голубика, %purple% баклажаны, %green% зелень %% и прочее.

В вазе лежали яблоки, голубика, баклажаны, зелень и прочее.

Для задания своего цвета используйте викистиль %color=...%. (Примечание: Чтобы избежать срабатывания WikiWord для RGB цвета (#rrggbb) всегда необходимо применять строчные буквы)

Мне бы тоже хотелось поесть %color=#ff7f00%мандаринов%%!

Мне бы тоже хотелось поесть мандаринов!

Для изменения цвета фона используется %bgcolor=...%.

В этом предложении текст %bgcolor=green yellow% жёлтого цвета на зелёном фоне. 

В этом предложении текст жёлтого цвета на зелёном фоне.

Смотри PmWiki:WikiStyleColors для большего числа примеров цветов.

Область действия

Викистили также могут указывать область действия. Когда она не указана — викистиль действует на текст до следующего викистиля или до конца параграфа. Заданая явно область действия может быть целым параграфом (%p ...%), всем списком (%list ...%), элементом списка (%item ...%) или любым блоком (%block ...%).

%p bgcolor=#ffeeee% Викистиль в начале этой строки воздействует на весь параграф, даже если он %blue% содержит другой стиль %% посреди него самого.

Викистиль в начале этой строки воздействует на весь параграф, даже если он содержит другой стиль посреди него самого.

Модуль >>style<< используется для стилизации большего набора элементов. Её действие продолжается до того пока не встретится >><<.

>>blue font-style=italic bgcolor=#ffffcc<<
Всё после предыдущей строки стилизовано под синий курсив

Включая
    преформатированый текст
* списки
-> строки с отступом
>><<

Всё после предыдущей строки стилизовано под синий курсив

Включая

    преформатированый текст
  • списки
строки с отступом

Атрибуты викистилей

Атрибуты работающие в определениях викистилей:

    ------------ CSS -------------          --HTML--
    color               bgcolor             class 
    background-color    margin              id
    text-align          padding             hspace
    text-decoration     border              vspace
    font-size           float               target
    font-family         list-style          rel
    font-weight         width*              accesskey
    font-style          height*             value

    Специальные: define, apply

Атрибуты в первых двух колонках соответствуют одноимённым свойствам cascading style sheet (CSS). Атрибуты последней колонки действуют только на определённые элементы:

  • class= и id= назначают HTML элементу CSS класс или идентификатор
  • target=name открывает последующие ссылки в окне броузера с именем "name"
  • rel=name для ссылки указывает родство с указываемым документом
  • accesskey=x назначает 'x' на роль горячей клавиши для последующей ссылки
  • value=9 устанавливает номер текущего элемента нумерованого списка

* Атрибуты width и height помечены звёздочкой потому что для тэга <img .../> они работают по особому. Т.е. если их использовать отдельно от других атрибутов (между процентами), тогда они устанавливают ширину('width=') и высоту('height=') для любого последующего тэга <img ... />. В ином случае, они определяют (ширину)'width:' и (высоту)'height:' элементов через CSS.

Применение викистилей к блокам

Обычно стиль воздействует только на фрагмент текста (в строке), но атрибут apply= позволяет стилю воздействовать на что-то большее. Предопределённые значения apply= такие:

apply=imgстиль воздействует на все последующие изображения 
apply=pстиль воздействует на текущий параграф*
apply=preстиль воздействует на текущий преформатированый текст 
apply=listстиль воздействует на текущий список*
apply=itemстиль воздействует на текущий элемент списка*
apply=divстиль воздействует на текущий сегмент(div) 
apply=blockстиль воздействует на текущий блок
(параграф, список, элемент списка, заголовок или сегмент(div))
*

Строки помеченые звёздочкой обладают уже определёнными сокращениями стилей, какими как %p color=blue% — тоже самое что и %apply=p color=blue% и %list ROMAN% тоже что и %apply=list list-style=upper-roman%.

Некоторые сокращения стилей также применяют apply, соответственно %right% это сокращение для %text-align=right apply=block%.

Воздействие стиля имеет эффект только тогда, когда он расположен на первой строке блока. Другими словами, стиль в третьей строке параграфа не может изменить атрибуты параграфа.

здесь некий текст в
параграфе и если мы попробуем
%apply=p color=blue% изменить
цвет параграфа по середине, то
он не сработает потому что стиль поступил
уже после того как параграф был начат.

здесь некий текст в параграфе и если мы попробуем изменить цвет параграфа по середине, то он не сработает потому что стиль поступил уже после того как параграф был начат.

Однако, этот %p color=red% параграф
''будет'' красным, потому что блок стиля
указан в первой строке этого текта.

Однако, этот параграф будет красным, потому что блок стиля указан в первой строке этого текта.

* Элемент списка
* %list red% Упс, слишком поздно воздействовать на список!
  • Элемент списка
  • Упс, слишком поздно воздействовать на список!

Включение стилей

Стили не описаные выше могут быть разрешены администратором путём изменения файла local/config.php. К примеру, для разрешения атрибута стиля "line-height" добавьте в указаный файл следующую строчку:

    $WikiStyleCSS[] = 'line-height';

Собственные сокращения стилей

Атрибут define= применяется для назначения сокращённого имени любому определению викистиля. Это сокращение можно будет применить в других определениях стилей.

%define=box block bgcolor=#ddddff border="2px dotted blue"%

%box% [@
$ echo "Привет всем"
Привет всем
$ exit
@]

%box font-weight=bold color=green% [@
$ echo "Я сказал - ПРИВЕТ!"
@]
$ echo "Привет всем"
Привет всем
$ exit
$ echo "Я сказал - ПРИВЕТ!"

Совет: Общие определения стилей довольно часто помещают на заглавные страницы групп, так что они могут использоваться сразу по всей группе. Или стили могут предопределены администратором для всего сайта в качестве местных подстроек. (смотри Собственные ВикиСтили).

Совет: Cобственным стилям можно назначать осмысленые имена. К примеру, если все предупреждения обозначаются зелёным цветом, то определите стиль warn(warning->внимание) через %define=warn green%, и пользуйтесь им вместо %green%. Тогда, если позднее вы захотите изменить оформление предупреждений, то значительно проще изменить одно определение, чем заменять все %green%.

Предопределённые сокращения стилей

PmWiki определяет ряд сокращений стилей:

  • Цвета текста: black, white, red, yellow, blue, gray, silver, maroon, green, navy, purple (сокращение для %color=...%)
  • Выравнивание: %center%(центр) и %right%(справа)
  • Изображения и фрагменты
    • Фрагмент справа или слева: %rfloat%(справа) и %lfloat%(слева)
    • Фрагмент в рамке: %frame%, %rframe%(слева) и %lframe%(справа)
    • Уменьшить до миниатюры: %thumb%
  • Открывать ссылки в новом окне: %newwin% (сокращение для %target=_blank%)
  • Коментарии: %comment% (сокращение для %display=none%)
  • Пронумерованые списки: %decimal%(числами), %roman%(прописными римскими числами), %ROMAN%(заглавными римскими числами), %alpha%(прописными алфавитный заглавными), %ALPHA%(заглавными алфавитный заглавными) (ещё смотри Cookbook:OutlineLists)

Примеры

Примеры стилизации содержит ряд примеров использования стилей на страницах.

Известные проблемы

  • Проценты в определении стилей (вроде: %block width=50% %) надо использовать "pct" вместо "%".

Также смотри

Собственные ВикиСтили

<< Директивы таблиц | Документация | Примеры стилизации >>

Перевод страницы PmWiki.WikiStyles — Оригинал перевода PmWikiRu.WikiStylesСсылаются
PmWikiRu.WikiStyles: редакция от 10.09.2011 18:48
PmWiki.WikiStyles: редакция от 24.11.2022 10:22