Справка:CSS

Материал из Space Station 14 Вики
Версия от 15:23, 17 июня 2024; AsnDen (обсуждение | вклад) (Половина текста готова)
(разн.) ← Предыдущая версия | Текущая версия (разн.) | Следующая версия → (разн.)

CSS (англ. Cascading Style Sheets) — язык, предназначенный для изменения внешнего вида веб-страницы. Все стандартные для вики параметры стилей находятся на странице Common.css.

Скриншот режима разработчика
Скриншот режима разработчика, может отличаться в зависимости от браузера

Как всё устроено

Нажмите клавишу F12 на клавиатуре, откроются инструменты разработчика. Выберите режимы «Элементы» и «Стили» (на скриншоте сверху и снизу соответственно). Вам понадобятся две кнопки: «Выбрать элемент на странице для проверки» и «Показать или скрыть панель инструментов устройства» (обе кнопки на скриншоте расположены в левом верхнем углу). Первая кнопка позволяет быстро выбрать нужный элемент, вторая позволяет посмотреть, как будет выглядеть страница на разных экранах. В блоке «Элементы» можно увидеть, как выглядит преобразованная в HTML вики-разметка.

Стили

Стиль элемента получается из четырёх элементов:

параметр «style»
стиль, который применяется только к одному элементу
ID
стиль, который применяются к одному элементу на странице
класс (он же class)
стиль, который может применяться к нескольким элементам на странице
тег
стиль, который влияет на все элементы на вики

К элементу могут применяться несколько одинаковых стилей сразу. В таком случае применится только один, более приоритетный, а другой будет зачёркнут, как на скриншоте: color: #000000. Приоритетность стилей определяется по принципу «от частного к общему». Таким образом параметр style имеет наивысший приоритет, за ним идут ID, классы, а затем теги с наименьшим приоритетом. Подробнее о приоритетах можно прочесть на doka.guide.

Использование стилей

Скриншот разметки стилей
Скриншот разметки стилей
Скриншот разметки таблицы
Скриншот разметки таблицы (прим. показана не вся таблица)

Редакторы могут изменять только параметр «style», который обычно применяется в тегах div, span или таблицах. Это не исключает возможность использования этого параметра в других тегах. Разница между div и span существенная: div делает перенос строки, тем самым стиль применяется ко всей строке, а span наоборот, не делает перенос и стиль применяется только к выделенной области разметки. Для применения стиля соблюдайте разметку:
<div id="имяID" class="имяКласса1, имяКласса2" style="параметр1: значение; параметр2: значение...">Ваш контент здесь</div>.
Таким образом текст «Ваш контент здесь» получит стили тега «div», затем к нему применятся стили классов «имяКласса1» и «имяКласса2», после ID «имяID» и только затем параметры в «style».

В таблице разметка идентична, только тег заменяется на разметку таблицы. Стили могу применятся как ко всей таблице (первая строчка на скриншоте), так и к ячейке (со второй по четвёртую строчки на скриншоте) и ячейкам. Для применения стиля к таблице, их нужно расположить сразу после {|, а для ячейки - между двумя | или ! и |, как на скриншоте.

Проблемы

При редактировании

Дальнейшее изучение