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

Содержимое добавлено Содержимое удалено

Линейный

Версия от 21:40, 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 должны указать размер, который они займут)

Блок 4
Есть более сложные способы разметки, например у данного блока указана ширина относительно оставшегося места на странице (параметр: position:relative ), для демонстрации попробуйте зажать Ctrl и покрутить колесико мыши.

Спойлеры:

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:Название_Русской_Статьи]] Указывает что у страницы есть английская версия статьи

@@ Строка 19: / Строка 19: @@
 <div style="float:left;background: rgba(0, 0, 0, 0.3);display:inline-block;width:200px;height:100px;margin-left:20px;margin-right:20px;"><center>Блок 2<br>width и height - размер, за который не может заходить контент, если не указать overflow-y:hidden; - контент будет вылазить за пределы</center></div>
 <div style="float:right;background: rgba(0, 0, 0, 0.3);display:inline-block;width:200px;height:100px;margin-left:20px;margin-right:20px;"><center>Блок 4<br>float:right; - указывает что элемент будет прилягать к правому краю страницы.</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; указанные в блоке 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}}
 <div style="background: rgba(0, 0, 0, 0.3);position:relative;margin:20px;"><center>Блок 4<br>Есть более сложные способы разметки, например у данного блока указана ширина относительно оставшегося места на странице (параметр: position:relative ), для демонстрации попробуйте зажать Ctrl и покрутить колесико мыши.</center></div>