sihaya

Тем, кто верстает на дайри посты выкладок для битвы - любой! - это точно будет интересно. Как вы знаете, в этом году с дайри все сложно. И в сообществе капитанов ведутся активные обсуждения, где выкладываться в самом неудачном случае. Пока одна из альтернатив - https://archiveofourown.org

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

1. Все стандартные теги для форматирования текста поддерживаются ao3
Заголовки, блоки, цитаты, атрибут выравнивания и даже устаревший center
То есть смотрите, вы как писали раньше div, так и пишите. Отличие - вместо атрибута style, вы будете писать class. Чуть позже я более подробно расскажу, как это применять.

2. Для корректной работы CSS на ao3 надо создавать skins. Для этого вы заходите в профиль (My Dashboard), и выбираете четвертый пункт в самом верхнем блоке: Skins. Дальше необходимо щелкнуть на "My work skins" и сразу после на "Create work skin" (все изображения кликабельны):



На страничке создания Skin есть несколько параметров:

Type - уточнение, что именно вы создаете. Work Skin или Site Skin. Убедитесь, что выбрано именно Work Skin.
Title - Это название будущего skin для работы. Вы можете ввести любое название, которое вам удобно в использовании. Запомните его, потому что потом именно его нужно будет найти в списке в работе.
Description - это краткое описание, можете оставить поле пустым.
Upload a preview (png, jpeg or gif) - это превью - как должен выглядеть ваш примененный к работе skin. Используется только для публичных skin, и в общем-то нам тоже не важен.
Apply to make public - если вы поставите эту галочку, то skin станет публичным и любой может его увидеть и применить. Галочка должна быть снята.

Ниже идет блок CSS. Как раз он-то нам и нужен, для того, чтобы сделать нужную верстку.

Начнем с того, что именно в этом блоке поддерживается по умолчанию. Для более детального описания можно воспользоваться сайтами: http://htmlbook.ru http://caniuse.com https://www.htmlvalidator.com

background - настройки отображения фона. Сюда в пишете и url фонового изображения и цвет.
border - настраивает границы. Например: толщину и цвет, вид.
columns - свойство настраивает ширину и колличество колонок в тексте.
cue - это обобщенное свойство от cue-before и cue-after. Задает звуковые сигналы, обозначающие начало и конец элемента.
font - задает характеристики шрифта и текста.
layer-background - обобщение для layer-background-color и layer-background-image. Не CSS так таковой, аналог background (свойств цвета фона и фоновой картинки), поддерживается только Netscape 4.x.
layout-grid - относится и поддерживается только в Internet Explorer 5. Был удален из документации Mircosoft.
list-style - используется для маркированных списков, позволяет задать стиль маркера и его положение.
margin - устанавливает "внешный" отступ до края элемента.
marker - псевдо-элемент, аналог list-style по сути, на данный момент поддерживается только Safari Technology Preview.
outline - универсальное свойство, одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырех сторонах элемента. Отличается от border
overflow - свойство задает, как будет отображаться содержимое блоко, если контент по размеру превышает размеры блока.
padding - устанавливает отступ внутри элемента - от края до его содержимого.
page-break - обобщение для свойств page-break-inside, page-break-after и page-break-before запрещающих или разрешающих разрывы страницы (внутри, после или до элемента) при печати.
pause - сокращенный способ установки свойств pause-bofore и pause-after, устанавливает паузу до или после озвучивания контента элемента.
scrollbar - обобщение для блока свойств, каждый из которых отвечает за настройку прокрутки - цвет и вид.
text - обобщение для свойств text-align, text-decoration, text-indent, text-transform, text-overflow, text-shadow. Управляет отображением текста внутри элемента. Например: с тенью или без, какое выравнивание выравнивание, есть ли подчеркивание, перечеркивание, мигание, все строчными или все заглавными, как отображается текст, если он превышает размеры элемента, есть ли "красная строка".
transform - трансформирует элемент. Позволяет его масштабировать, поворачивать, наклонять, и т.д.
transition - универсальное свойство, которое позволяет одновременно задать значения transition-property, transition-duration, transition-timing-function и transition-delay. Устанавливает эффект перехода между двумя состояниями элемента.

Как видите - список основных свойств, считающихся едва ли не базовыми, достаточно широк. Но кроме этого есть еще больший список вообще поддерживаемых свойств, которые позволяют более гибко настраивать верстку. Про них я расскажу в следующем посте, завтра.
В третьей части я расскажу, как это применять на практике.