Руководства/Вики-разметка и CSS

В данном руководстве находятся справочные материалы по редактированию статей.

Смотрите также:

Вики-разметка

Вики-разметка является упрощённым языком HTML, что позволяет сделать его более простым и доступным к использованию. Используется на многих Вики-хостингах, в том числе и на Фэндоме.

Ссылки

Ссылка перенаправляет пользователя на другую статью. Важно понимать, что нужно вводить точное название статьи, на которую необходимо сослаться. Для этого существует несколько правил вставки ссылок.

Чтобы сделать слово в виде ссылки, необходимо обнести его двойными квадратными скобками:

Исходный код	Результат
Привет, [[Вегги]].	Привет, Вегги.

Если окончание необходимого слова отличается от названия статьи, на которую дается ссылка, то код записывается следующим образом:

Исходный код	Результат
Алкоголь для [[Хаск]]а.	Алкоголь для Хаска.
Особняк [[Столас]]а.	Особняк Столаса.

Если слово в тексте полностью отличается от названия статьи, на которую необходимо сослаться, то код выглядит так:

Исходный код	Результат
[[Бакстер\|Учёный]] без своей лаборатории.	Учёный без своей лаборатории.

Для создания гиперссылок, ведущих на другие вики или сайты, код будет выглядеть немного иначе:

Исходный код	Результат
Она является поклонницей музыканта [https://ru.wikipedia.org/wiki/Странный_Эл_Янкович «Странного» Эла Янковича].	Она является поклонницей музыканта «Странного» Эла Янковича.
Другой вариант
Она является поклонницей музыканта [[wikipedia:ru:Странный_Эл_Янкович\|«Странного» Эла Янковича]].	Она является поклонницей музыканта «Странного» Эла Янковича.

Также можно ссылаться на разделы статей:

Исходный код	Результат
Впервые [[Незначительные_персонажи/Адский Босс#Бесы-пожарные\|бесы-пожарные]] были показаны в эпизоде «[[Убийственная семейка]]».	Впервые бесы-пожарные были показаны в эпизоде «Убийственная семейка».

Шрифт

Изменение оформления текста производится следующим образом: ' — клавиша "э", на английской раскладке.

Исходный код	Результат
''Курсив''	Курсив
'''Полужирный'''	Полужирный
'''''Полужирный курсив'''''	Полужирный курсив

Заголовки

Для создания заголовков используется следующий код:

Исходный код	Результат
== Заголовок 1 уровня == === Заголовок 2 уровня === ==== Заголовок 3 уровня ==== ===== Заголовок 4 уровня ===== ====== Заголовок 5 уровня ======	Заголовок 1 уровня Заголовок 2 уровня Заголовок 3 уровня Заголовок 4 уровня Заголовок 5 уровня

Списки

Исходный код	Результат
* Звёздочка создаёт список с маркером текста. ** Две звёздочки создают второй уровень списка.	Звёздочка создаёт список с маркером текста. Две звёздочки создают второй уровень списка.
# Решётка создает нумерованный список. # Это очень удобно. ## Также можно делать подпункты. # А затем продолжать список.	Решётка создает нумерованный список. Это очень удобно. Также можно делать подпункты. А затем продолжать список.

Изображения

Исходный код	Результат
[[Файл:Толстый Наггетс.png\|100px]]
Устанавливаем размер
[[Файл:Толстый Наггетс.png\|150px]]
Добавляем ссылку
[[Файл:Толстый Наггетс.png\|150px\|link=Толстый Наггетс]]
При необходимости можно добавить пояснение (показывается при наведении курсором)
[[Файл:Толстый Наггетс.png\|150px\|link=Толстый Наггетс\|Питомец Энджела]]

Другое

Исходный код	Результат
Перенос <br> строки.	Перенос строки.
<!--комментарий в исходном коде, не показывающийся в тексте статьи-->

CSS

Для оформления текста или таблиц можно использовать строковый CSS. Атрибуты стиля заключаются в теги <div style="...">...</div> или <span style="...">...</span>.

Границы

Атрибут "border" устанавливает толщину, тип и цвет рамки:

Также можно сделать закругленные углы:

Отступы

Атрибуты "margin" и "padding" устанавливают расстояние от внешних границ элемента (в случае с margin) и внутренних (padding) и поддерживают 4 стороны — право, низ, лево, верх:

Ширина и высота

С помощью атрибутов "width" и "height" можно задать ширину и высоту:

Выравнивание

Текст выравнивается с помощью атрибута "text-align".

Цвет текста

Цвет текста меняется с помощью атрибута "color":

Фон

С помощью атрибута "background" можно задать цвет фона:

Высота строки

Высота строки настраивается с помощью атрибута "line-height":

Размер шрифта

Размер шрифта можно изменить, указав его размер в пикселях с помощью атрибута "font-size":

Пример использования

CSS может применяться для оформления таблиц и шаблонов:

{|class="u-box" style="font-size: 100%; margin: 0 auto 10px auto; border-collapse: collapse"
|-
|style="width: 10px; padding: 2px 0px 2px 0.25em; text-align: center"|<div style="position:relative;top:12px">[[Файл:Чарли в профиль.png|80px|right|link=]]</div>
|align="center"|<span style="font-size:14px">Это [[:Категория:Незавершённые статьи|незавершённая статья.]]</span><br>Она содержит неполную информацию.<br> Вы можете помочь '''Hazbin Hotel Вики''', [{{SERVER}}{{localurl:{{NAMESPACE}}:{{PAGENAME}}|action=edit}} дополнив её].
|}

Это незавершённая статья.
Она содержит неполную информацию.
Вы можете помочь Hazbin Hotel Вики, дополнив её.

Более подробную информацию об атрибутах и их применении можно получить здесь.