Редактирование: различия между версиями
TeNoR (обсуждение | вклад) Нет описания правки |
TeNoR (обсуждение | вклад) Нет описания правки |
||
Строка 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>Есть более сложные способы разметки, например у |
<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>
float:left - указывает, что элементы могут облегать друг-друга, слева
width и height - размер, за который не может заходить контент, если не указать overflow-y:hidden; - контент будет вылазить за пределы
float:right; - указывает что элемент будет прилягать к правому краю страницы.
overflow:auto; - автоматическое заполнение оставшегося места, если контента больше чем блок - появится скроулинг
margin-left:20px; и margin-right:20px; указанные в блоке 4 и 2, определяют отступы от блоков, слева и справа.
Блок 3 должен записывать в самом конце, чтобы понимать до каких пределов ему можно растянуться (блок 1, 2 и 4 должны указать размер, который они займут)
Есть более сложные способы разметки, например, у блока указана ширина относительно оставшегося места на странице по окну браузера (параметр: 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:Название_Русской_Статьи]] Указывает что у страницы есть английская версия статьи