Редактирование: различия между версиями

Материал из Wild Terra 2 Wiki
Перейти к навигации Перейти к поиску
Содержимое добавлено Содержимое удалено
Нет описания правки
Нет описания правки
Строка 1: Строка 1:
__NOTITLE____NOEDITSECTION____NOTOC__
__NOTITLE____NOEDITSECTION____NOTOC__
=== Работа с текстом: ===
=== Работа с текстом: ===
'''Текст с абзаца:''' <span style="color:LimeGreen;"><nowiki><p>Текст с абзаца.</p><p>Еще один текст с абзаца.</p></nowiki></span>
'''Текст с абзаца (параграфы):''' <span style="color:LimeGreen;"><nowiki><p>Текст с абзаца.</p><p>Еще один текст с абзаца.</p></nowiki></span>
<div style="background: rgba(0, 0, 0, 0.3);padding-left:10px;padding-right:10px;display: inline-block;";><p>Текст с абзаца.</p><p>Еще один текст с абзаца.</p></div>
<div style="background: rgba(0, 0, 0, 0.3);padding-left:10px;padding-right:10px;display: inline-block;";><p>Текст с абзаца.</p><p>Еще один текст с абзаца.</p></div>
'''Отступ только для первой строки текста:''' <span style="color:LimeGreen;"><nowiki><p style="text-indent:10px;">Текст с абзаца.</p></nowiki></span>
'''Отступ только для первой строки текста:''' <span style="color:LimeGreen;"><nowiki><p style="text-indent:10px;">Текст с абзаца.</p></nowiki></span>
Строка 21: Строка 21:
<div style="background: rgba(0, 0, 0, 0.3);height:100px;margin-left:20px;margin-right:20px; overflow:auto;"><center>Блок 3<br>overflow:auto; - автоматическое заполнение оставшегося места, если контента больше чем блок - появится скроулинг<br>margin-left:20px; и margin-right:20px; указанные в блоке 4 и 2, определяют отступы от блоков, слева и справа.<br>Блок 3 должен записывать в самом конце, чтобы понимать до каких пределов ему можно растянуться (блок 1, 2 и 4 должны указать размер, который они займут)</center></div>
<div style="background: rgba(0, 0, 0, 0.3);height:100px;margin-left:20px;margin-right:20px; overflow:auto;"><center>Блок 3<br>overflow:auto; - автоматическое заполнение оставшегося места, если контента больше чем блок - появится скроулинг<br>margin-left:20px; и margin-right:20px; указанные в блоке 4 и 2, определяют отступы от блоков, слева и справа.<br>Блок 3 должен записывать в самом конце, чтобы понимать до каких пределов ему можно растянуться (блок 1, 2 и 4 должны указать размер, который они займут)</center></div>
{{NewLine}}
{{NewLine}}
<div style="background: rgba(0, 0, 0, 0.3);position:relative;margin:20px;"><center>Блок 5<br>Есть более сложные способы разметки, например у данного блока указана ширина относительно оставшегося места на странице по окну браузера (параметр: position:relative ), для демонстрации попробуйте зажать Ctrl и покрутить колесико мыши.</center></div>
<div style="background: rgba(0, 0, 0, 0.3);position:relative;margin:20px;"><center>Блок 5<br>Есть более сложные способы разметки, например, у блока указана ширина относительно оставшегося места на странице по окну браузера (параметр: position:relative ), для демонстрации попробуйте зажать Ctrl и покрутить колесико мыши.</center></div>
{{NewLine}}
{{NewLine}}
'''3. Новые строки.''' Из-за свойств обтекания (<span style="color:LimeGreen;">float</span>) может случится, что следующий элемент будет пытаться наследовать это обтекание. Для этого нужно задавать свойство <span style="color:LimeGreen;">clear:left;</span>, что запрещает обтекание элементов и создает их с новой строки.
Для удобства у этой Вики есть шаблон, достаточно добавить:
<br>
<span style="color:LimeGreen;"><nowiki>{{NewLine}}</nowiki></span> - чтобы гарантировано получить новую строку.
<br>
<span style="color:LimeGreen;"><nowiki><br></nowiki></span> - стандартный перенос на новую строку, удобно использовать внутри текста.
----
----
=== Спойлеры: ===
=== Спойлеры: ===

Версия от 21:51, 12 декабря 2020

Работа с текстом:

Текст с абзаца (параграфы): <p>Текст с абзаца.</p><p>Еще один текст с абзаца.</p>

Текст с абзаца.

Еще один текст с абзаца.

Отступ только для первой строки текста: <p style="text-indent:10px;">Текст с абзаца.</p>

Текст с абзаца.

Использование стилей внутри текстового поля: Допустим нам нужно <span style="color:#FFFF00;">перекрасить текст внутри</span> текстового поля

Допустим нам нужно перекрасить текст внутри текстового поля

Работа с разметкой:

Блоки <div>. Удобно использовать для оформления страницы, позволяет сохранять пропорции содержимого для разных расширений экрана.
1. Создаем блок по содержимому: <div style="background: rgba(0, 0, 0, 0.3);padding:10px;display:inline-block;">контент внутри определяет<br>размер блока</div>

контент внутри определяет
размер блока

2. Разметка и выравнивание блоков: <div style="float:left;background: rgba(0, 0, 0, 0.3);display:inline-block;width:200px;height:100px;margin-left:20px;"></div>

Блок 1
float:left - указывает, что элементы могут облегать друг-друга, слева
Блок 2
width и height - размер, за который не может заходить контент, если не указать overflow-y:hidden; - контент будет вылазить за пределы
Блок 4
float:right; - указывает что элемент будет прилягать к правому краю страницы.
Блок 3
overflow:auto; - автоматическое заполнение оставшегося места, если контента больше чем блок - появится скроулинг
margin-left:20px; и margin-right:20px; указанные в блоке 4 и 2, определяют отступы от блоков, слева и справа.
Блок 3 должен записывать в самом конце, чтобы понимать до каких пределов ему можно растянуться (блок 1, 2 и 4 должны указать размер, который они займут)
Блок 5
Есть более сложные способы разметки, например, у блока указана ширина относительно оставшегося места на странице по окну браузера (параметр: position:relative ), для демонстрации попробуйте зажать Ctrl и покрутить колесико мыши.

3. Новые строки. Из-за свойств обтекания (float) может случится, что следующий элемент будет пытаться наследовать это обтекание. Для этого нужно задавать свойство clear:left;, что запрещает обтекание элементов и создает их с новой строки. Для удобства у этой Вики есть шаблон, достаточно добавить:
{{NewLine}} - чтобы гарантировано получить новую строку.
<br> - стандартный перенос на новую строку, удобно использовать внутри текста.


Спойлеры:

1. Вариант - использование шаблона: <p style="float:left">Показать спойлер:</p> {{Show|текст спойлера}}

Показать спойлер:

: текст спойлера

2. Вариант - использование плагина: {{#spoiler:|spoiler_text}}

{{#spoiler:show=Показать содержимое под кнопкой|hide=Скрыть|spoiler_text}}


Оформление страниц:

В начале каждой страницы есть параметры (волшебные слова), рекомендуется использовать для каждой статьи (страницы):

__NOTITLE__ Скрыть заголовок

__NOEDITSECTION__ Cкрыть кнопку редактирования для заголовков

__NOTOC__ Cкрыть содержание страницы


В конце страницы указаны дополнительные параметры:

<noinclude></noinclude> Теги для скрытия параметров

[[Category:Название_категория| ]] Добавляет раздел в категорию для навигации

[[en:Page_English_Name]] Указывает что у страницы есть английская версия статьи

[[ru:Название_Русской_Статьи]] Указывает что у страницы есть английская версия статьи