FANDOM


Туалет 01

Я почав писати цю статтю, проте терміново викликали в офіс.
Скоро повернуся і продовжу

Це написав Mix Gerder

Логотип CSS

CSS (каскадні таблиці стилів, СіЕсЕс, ЦеЕсЕс) — мова розмітки будь-якого XML-документа, що відповідає за його зовнішність.

Швидше за все, ви вже знайомі з локальними і глобальними сторінками CSS на Фендому, а написати свій власний код ніяк руки не доходили.

Ця довідкова стаття розповість вам про CSS і про те, як використовувати його на вікі.

Як визначити параметри CSS (селектори) на вашій вікі? Редагувати

Практично у всіх популярних браузерах процедура знаходження селектора в CSS однакова. У даному прикладі розглядається браузер Google Chrome.

Зазначені селектори переносяться на сторінки CSS, де до них додаються параметри. Вказувати всі селектори при цьому не треба.

Приклад такого коду (з того, що вказано на картинках):

.WikiaPageHeader h1 {
	text-decoration:underline;
	text-align:center;
	color:white;
	background-color:black;
}

В результаті ми отримуємо отакий текст:

Вікі Survarium

Не бійтеся експериментувати зі стилями у вашому браузері, можна пробувати різні значення параметрів і дивитися на них, не скидаючи кеш. Зміни, зроблені в рядку розробника, не зберігаються.

Список змінних параметрів CSS і їх значення Редагувати

Цей список містить параметри CSS і може бути не повним. Прохання по можливості додати пропущені параметри.

Анімація Редагувати

Ці параметри дозволяють налаштувати програвання анімації на сторінці або налаштувати рух різних елементів.

Параметри
Параметр Що зраджує? Значення
@keyframes Плавний перехід об'єкта з одного стану в інший from — перший кадр або 0%

to — останній кадр або 100%

% — один з моментів анімації, виражений у відсотках

animation Задає відразу кілька параметрів анімації animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state
animation-delay Встановлює час очікування перед запуском анімації s, ms — час
animation-direction Встановлює напрям руху анімації normal

Анімація йде з самого початку, після завершення циклу повертається до вихідного стану.

alternate

Анімація йде з початку до кінця, потім плавно повертається у вихідне положення.

reverse

Анімація йде з кінця циклу, після його завершення повертається до вихідного стану.

alternate-reverse

Анімація йде з кінця до початку, потім плавно повертається у вихідне положення.

animation-duration Задає час однієї анімації s, ms — час
animation-fill-mode Відповідає за стан анімації, коли вона не ворушиться none

До елемента не застосовуються які-небудь стилі.

forwards

До елементу по закінченню анімації застосовується стиль останнього ключового кадру. Яким буде цей кадр в послідовності анімації залежить від комбінації значень animation-direction і animation-iteration-count.

backwards

До елемента застосовується стиль першого ключового кадру і він залишається на протязі заданого періоду animation-delay. Перший ключовий кадр визначається на підставі значення animation-direction.

both

До елемента застосовуються обидва правила, як для forwards, так і для backwards.

animation-iteration-count Задає кількість повторів анімації infinite — нескінченно чи кількість разів числом (2, 4, 6 тощо)
animation-name Назва елемента анімації none (немає назви) чи назва латинськими літерами
animation-play-state Визначає, програвати анімацію чи поставити її на паузу. running

Програвати анімацію.

paused

Поставити анімацію на паузу.

animation-timing-function Час програвання анімації ease

Анімація починається повільно, потім прискорюється і до кінця руху знову сповільнюється. Аналогічно cubic-bezier(0.25,0.1,0.25,1).

ease-in

Анімація повільно починається, до кінця прискорюється. Аналогічно cubic-bezier(0.42,0,1,1).

ease-out

Анімація починається швидко, до кінця сповільнюється. Аналогічно cubic-bezier(0,0,0.58,1).

ease-in-out

Анімація починається і закінчується повільно. Аналогічно cubic-bezier(0.42,0,0.58,1).

linear

Однакова швидкість від початку і до кінця.

step-start

Як такої анімації немає. Стильові властивості одразу ж приймають кінцеве значення.

step-end

Як такої анімації немає. Стильові властивості знаходяться в початковому значенні заданий час, потім відразу ж приймають кінцеве значення.

steps

Ступінчаста функція, що має задане число кроків. animation-timing-function: steps(<число>, start | end) Тут: <число> — ціле число, більше нуля; start — задає півбезперервну знизу функцію; end — задає півбезперервну зверху функцію.

cubic-bezier Задає функцію руху у вигляді кривої Безьє.

transition Відразу задає значення параметрів transition-property, transition-duration, transition-timing-function і transition-delay. none (немає) чи значення, застосовні до даних параметрів
transition-delay Час перед запуском анімації. s, ms — час
transition-duration Час після запуска анімації. s, ms — час
transition-property Назва об'єкта, для якого буде застосовуватися анімація і ефекти переходу. none

Жодна властивість не задана.

all

Всі властивості будуть відслідковуватися.

<властивість>

Назва стильової властивості, регістр при її написанні не враховується. При вказівці декількох властивостей вони перераховуються одна за однією через кому.

transition-timing-function Встановлює швидкість властивості для переходу анімації. ease

Анімація починається повільно, потім прискорюється і до кінця руху знову сповільнюється. Аналогічно cubic-bezier(0.25,0.1,0.25,1).

ease-in

Анімація повільно починається, до кінця прискорюється. Аналогічно cubic-bezier(0.42,0,1,1).

ease-out

Анімація починається швидко, до кінця сповільнюється. Аналогічно cubic-bezier(0,0,0.58,1).

ease-in-out

Анімація починається і закінчується повільно. Аналогічно cubic-bezier(0.42,0,0.58,1).

linear

Однакова швидкість від початку і до кінця.

step-start

Як такої анімації немає. Стильові властивості одразу ж приймають кінцеве значення.

step-end

Як такої анімації немає. Стильові властивості знаходяться в початковому значенні заданий час, потім відразу ж приймають кінцеве значення.

steps

Ступінчаста функція, що має задане число кроків. animation-timing-function: steps(<число>, start | end) Тут: <число> — ціле число, більше нуля; start — задає півбезперервну знизу функцію; end — задає півбезперервну зверху функцію.

cubic-bezier Задає функцію руху у вигляді кривої Безьє.

Межі (кордони) Редагувати

Ці властивості дозволяють створювати рамки і лінії навколо елементів.

Параметри
Параметр Що зраджує? Значення
background-clip Визначає, як колір фону або фонове зображення повинне виводитися під кордонами. padding-box

Фон відображається всередині кордонів.

border-box

Фон виводиться під кордонами.

content-box

Фон відображається тільки всередині контенту.

border Дозволяє одночасно встановити товщину, стиль і колір кордону навколо елемента. border-width, border-style, border-color
border-bottom Дозволяє одночасно встановити товщину, стиль і колір кордону внизу елемента. border-bottom-width, border-bottom-style, border-bottom-color
border-bottom-color Встановлює колір кордону внизу елемента. transparent (прозорий) чи у форматі RGB, RGBA, HEX, HSV
border-bottom-left-radius Встановлює радіус скруглення лівого нижнього кутка рамки. px, cm, in, em тощо, а також відсотки
border-bottom-right-radius Встановлює радіус скруглення правого нижнього кутка кордону. px, cm, in, em тощо, а також відсотки
border-bottom-style Встановлює радіус скруглення правого нижнього кутка кордону. none

Лінія не з'являється і її значення товщини обнуляється.

hidden

Має той же ефект, що і none за винятком застосування border-bottom-style до клітинок таблиці, у якій значення властивості border-collapse встановлено як collapse. У цьому випадку нижня межа в осередку не буде відображатися взагалі.

dotted

Лінія, що складається з набору точок.

dashed

Пунктирна лінія, що складається з серії коротких відрізків.

solid

Суцільна лінія.

double

Подвійна лінія.

groove

Створює ефект втиснутої лінії.

ridge

Створює ефект рельєфної лінії.

inset

Псевдотрехмерна лінія.

outset

Псевдотрехмерна лінія.

border-bottom-width Встановлює товщину кордону внизу елемента. Три змінні — thin (2 пікселя), medium (4 пікселя) і thick (6 пікселів) задають товщину кордону внизу. Для більш точного значення товщину можна вказувати в пікселях або інших одиницях.
border-color Встановлює колір кордону на різних сторонах елементу. transparent (прозорий) чи у форматі RGB, RGBA, HEX, HSV
border-image Використовується для відображення малюваної рамки навколо елемента. none чи URL до файлу з малюнком.
border-left Дозволяє одночасно встановити товщину, стиль і колір лівої межі елемента. border-left-width, border-left-style, border-left-color
border-left-color Задає колір кордону ліворуч від елемента. transparent (прозорий) чи у форматі RGB, RGBA, HEX, HSV
border-left-style Встановлює стиль кордону ліворуч від елемента. none

Лінія не з'являється і її значення товщини обнуляється.

hidden

Має той же ефект, що і none за винятком застосування border-bottom-style до клітинок таблиці, у якій значення властивості border-collapse встановлено як collapse. У цьому випадку нижня межа в осередку не буде відображатися взагалі.

dotted

Лінія, що складається з набору точок.

dashed

Пунктирна лінія, що складається з серії коротких відрізків.

solid

Суцільна лінія.

double

Подвійна лінія.

groove

Створює ефект втиснутої лінії.

ridge

Створює ефект рельєфної лінії.

inset

Псевдотрехмерна лінія.

outset

Псевдотрехмерна лінія.

border-left-width Встановлює товщину кордону ліворуч від елемента. Три змінні — thin (2 пікселя), medium (4 пікселя) і thick (6 пікселів) задають товщину кордону. Для більш точного значення товщину можна вказувати в пікселях або інших одиницях.
border-radius Встановлює радіус скруглення куточків рамки. Виражається в будь-яких одиницях, наприклад, в точках, можна вказувати необхідні кути цифрами (0 10 4 1px).
border-right Дозволяє одночасно встановити товщину, стиль і колір правої межі елемента. border-right-width, border-right-style, border-right-color
border-right-color Задає колір кордону праворуч від елемента. transparent (прозорий) чи у форматі RGB, RGBA, HEX, HSV
border-right-style Встановлює стиль кордону праворуч від елемента. none

Лінія не з'являється і її значення товщини обнуляється.

hidden

Має той же ефект, що і none за винятком застосування border-bottom-style до клітинок таблиці, у якій значення властивості border-collapse встановлено як collapse. У цьому випадку нижня межа в осередку не буде відображатися взагалі.

dotted

Лінія, що складається з набору точок.

dashed

Пунктирна лінія, що складається з серії коротких відрізків.

solid

Суцільна лінія.

double

Подвійна лінія.

groove

Створює ефект втиснутої лінії.

ridge

Створює ефект рельєфної лінії.

inset

Псевдотрехмерна лінія.

outset

Псевдотрехмерна лінія.

border-right-width Встановлює товщину кордону праворуч від елемента. Три змінні — thin (2 пікселя), medium (4 пікселя) і thick (6 пікселів) задають товщину кордону. Для більш точного значення товщину можна вказувати в пікселях або інших одиницях.
border-style Встановлює стиль рамки навколо елемента. none

Лінія не з'являється і її значення товщини обнуляється.

hidden

Має той же ефект, що і none за винятком застосування border-bottom-style до клітинок таблиці, у якій значення властивості border-collapse встановлено як collapse. У цьому випадку нижня межа в осередку не буде відображатися взагалі.

dotted

Лінія, що складається з набору точок.

dashed

Пунктирна лінія, що складається з серії коротких відрізків.

solid

Суцільна лінія.

double

Подвійна лінія.

groove

Створює ефект втиснутої лінії.

ridge

Створює ефект рельєфної лінії.

inset

Псевдотрехмерна лінія.

outset

Псевдотрехмерна лінія.

border-top Дозволяє одночасно встановити товщину, стиль і колір кордону зверху елемента. border-top-width, border-top-style, border-top-color
border-top-color Задає колір кордону зверху елемента. transparent (прозорий) чи у форматі RGB, RGBA, HEX, HSV
border-top-left-radius Встановлює радіус скруглення лівого верхнього кутка рамки. Виражається в будь-яких одиницях, наприклад, в точках, можна вказувати необхідні кути цифрами (0 10 4 1px).
border-top-right-radius Встановлює радіус скруглення правого верхнього кутка рамки. Виражається в будь-яких одиницях, наприклад, в точках, можна вказувати необхідні кути цифрами (0 10 4 1px).
border-top-style Встановлює стиль кордону зверху елемента. none

Лінія не з'являється і її значення товщини обнуляється.

hidden

Має той же ефект, що і none за винятком застосування border-bottom-style до клітинок таблиці, у якій значення властивості border-collapse встановлено як collapse. У цьому випадку нижня межа в осередку не буде відображатися взагалі.

dotted

Лінія, що складається з набору точок.

dashed

Пунктирна лінія, що складається з серії коротких відрізків.

solid

Суцільна лінія.

double

Подвійна лінія.

groove

Створює ефект втиснутої лінії.

ridge

Створює ефект рельєфної лінії.

inset

Псевдотрехмерна лінія.

outset

Псевдотрехмерна лінія.

border-top-width Встановлює товщину кордону зверху елемента. Три змінні — thin (2 пікселя), medium (4 пікселя) і thick (6 пікселів) задають товщину кордону. Для більш точного значення товщину можна вказувати в пікселях або інших одиницях.
border-width Встановлює товщину кордону одночасно на всіх сторонах елементу або індивідуально для кожної сторони. Три змінні — thin (2 пікселя), medium (4 пікселя) і thick (6 пікселів) задають товщину кордону. Для більш точного значення товщину можна вказувати в пікселях або інших одиницях.
outline Встановлює колір, стиль, товщину на всіх сторонах елементу. outline-color, outline-style, outline-width
outline-color Вказує колір зовнішньої межі елемента. invert (контрастний) чи у форматі RGB, RGBA, HEX, HSV
outline-offset Встановлює відстань між рамкою, створеної за допомогою властивості outline, і краєм або кордоном елемента доданої через border. Будь-яка одиниця розміру в CSS.
outline-style Задає стиль зовнішньої межі елемента. none

Лінія не з'являється і її значення товщини обнуляється.

hidden

Має той же ефект, що і none за винятком застосування border-bottom-style до клітинок таблиці, у якій значення властивості border-collapse встановлено як collapse. У цьому випадку нижня межа в осередку не буде відображатися взагалі.

dotted

Лінія, що складається з набору точок.

dashed

Пунктирна лінія, що складається з серії коротких відрізків.

solid

Суцільна лінія.

double

Подвійна лінія.

groove

Створює ефект втиснутої лінії.

ridge

Створює ефект рельєфної лінії.

inset

Псевдотрехмерна лінія.

outset

Псевдотрехмерна лінія.

outline-width Задає товщину зовнішньої межі елемента. Три змінні — thin (2 пікселя), medium (4 пікселя) і thick (6 пікселів) задають товщину кордону. Для більш точного значення товщину можна вказувати в пікселях або інших одиницях.

Контент Редагувати

Ці параметри створюють текст, якого не було в документі.

Параметри
Параметр Що зраджує? Значення
content Додає текст на сторінку <рядок>

Текст, який додається на веб-сторінку, рядок при цьому повинний братися в подвійні або одинарні лапки. Допускається використовувати юнікод для вставки спецсимволов. Спецсимволи HTML які починаються з амперсанда (§ наприклад), будуть відображатися як є, тобто простим текстом (§, а не §).

attr(<атрибут>)

Повертає рядок, що є значенням атрибуту тега зазначеного в дужках. Наприклад, a::after {content:attr(href)} додасть після заслання її адресу, тобто значення атрибута href. Якщо зазначеного атрибута немає, то повернеться порожній рядок.

open-quote

Вставляє відкрити лапки, тип якої встановлюється з допомогою стильової властивості quotes.

close-quote

Вставляє закрити лапки.

no-open-quote

Скасовує додавання відкриваючей лапки.

no-close-quote

Скасовує додавання закриваючей лапки.

url

Абсолютний або відносний адресу вставленого об'єкта. Якщо вказаний файл браузер не може відобразити значення ігнорується.

counter

Виводить значення лічильника, заданого властивістю counter-reset.

none

Не додає ніякого вмісту.

normal

Задається як none для псевдоелементів ::before та ::after.

counter-increment Призначено для збільшення значення лічильника збільшень, який задається властивістю counter-reset. none

Забороняє збільшення лічильника для поточного селектора.

<змінна>

Задає одну або кілька змінних, для яких потрібно змінити значення лічильника. Змінні поділяються між собою пробілом.

<число>

Визначає значення приросту лічильника. За замовчуванням воно дорівнює 1. Дозволяється використовувати лише додатні цілі числа, негативні цілі числа і нуль.

counter-reset Встановлює ідентифікатор, у якому буде зберігатися лічильник відображень певного елемента, а також початкове значення лічильника. none

Забороняє ініціацію лічильника для поточного селектора.

inherit Успадковує значення батька.

<змінна> Задає одну або кілька змінних, у яких буде зберігатися значення лічильника. Значення розділяються між собою пробілом.

<число> Початкове значення кожного ідентифікатора. За замовчуванням дорівнює 0.

quotes Встановлює тип лапок, який застосовується в тексті документа. Власне, зазначаються самі лапки ("«" "»").
::after Виводить вміст після зазначеного елемента.
::before Виводить вміст перед зазначеним елементом.

Відступи і поля Редагувати

Ці параметри визначають відступ елемента як всередині, так і навколо інших елементів. Основними параметрами є margin і padding, від яких ми можемо задати всі інші параметри.

Параметри
Параметр Що зраджує? Значення
margin Встановлює величину відступу від кожного краю елемента. auto — автоматично чи значення у відсотках або будь-яких одиницях розміру.
margin-bottom Встановлює величину відступу від нижнього краю елемента. auto — автоматично чи значення у відсотках або будь-яких одиницях розміру.
margin-left Встановлює величину відступу від лівого краю елемента. auto — автоматично чи значення у відсотках або будь-яких одиницях розміру.
margin-right Встановлює величину відступу від правого краю елемента. auto — автоматично чи значення у відсотках або будь-яких одиницях розміру.
margin-top Встановлює величину відступу від верхнього краю елемента. auto — автоматично чи значення у відсотках або будь-яких одиницях розміру.
padding Відступ від краю елемента. Значення у відсотках або будь-яких одиницях розміру.
padding-bottom Відступ від нижнього краю елемента. Значення у відсотках або будь-яких одиницях розміру.
padding-left Відступ від лівого краю елемента. Значення у відсотках або будь-яких одиницях розміру.
padding-right Відступ від правого краю елемента. Значення у відсотках або будь-яких одиницях розміру.
padding-top Відступ від верхнього краю елемента. Значення у відсотках або будь-яких одиницях розміру.

Друк Редагувати

Ці параметри керують вмістом сторінки перед її виходом у друк.

Параметри
Параметр Що зраджує? Значення
@page Показує, як будуть виглядати поля сторінки під час друку. Власне, :left дозволяє задати поля для всіх лівих сторінок :right — для всіх правих, а :first — для першої сторінки. Значення margin або його похідні — margin-top, margin-right, margin-bottom та margin-left, наприклад:
/* Відступи для всіх лівих сторінок */ 
@page :left {
	margin: 1cm 3cm 1cm 1.5cm;
   }
marks Відображає спеціальні мітки на сторінці при друку документа, призначені для подальшого обрізання сторінки або для рівного з'єднання декількох листів між собою. crop

Виводить мітки для подальшого обрізання сторінки після її друку.

cross

Виводить мітки, за якими відбувається суміщення з іншими сторінками, наприклад, при друку великої картинки на кількох листах.

none

Ніякі підписи не відображаються.

orphans Задає мінімальне число рядків тексту, який залишається на попередній сторінці при друку документа. Ціле число рядків.
page-break-after Додає розрив сторінки при друці документа після заданого елемента. always

Завжди додає розрив сторінки після елемента.

auto

Вставляє розрив сторінки.

avoid

Забороняє розрив сторінки після елемента.

left

Пропускає одну або дві сторінки після елемента, щоб наступна сторінка друку була парної.

right

Пропускає одну або дві сторінки після елемента, щоб наступна сторінка друку була непарною.

page-break-before Додає розрив сторінки при друці документа перед заданим елементом. always

Завжди додає розрив сторінки після елемента.

auto

Вставляє розрив сторінки.

avoid

Забороняє розрив сторінки після елемента.

left

Пропускає одну або дві сторінки після елемента, щоб наступна сторінка друку була парної.

right

Пропускає одну або дві сторінки після елемента, щоб наступна сторінка друку була непарною.

page-break-inside Дозволяє або забороняє розрив сторінки всередині елемента при друку. auto

Вставляє розрив сторінки.

avoid

Забороняє розрив сторінки всередині елемента.

widows Задає мінімальне число рядків тексту, яке розташовується на наступній сторінці при друку документа. Ціле число рядків.

Позиціонування Редагувати

Ці параметри керують вмістом сторінки перед її виходом у друк.

Параметри
Параметр Що зраджує? Значення
bottom Встановлює положення нижнього краю елемента. auto — без змін або будь-які одиниці довжини.
left Встановлює положення лівого краю елемента. auto — без змін або будь-які одиниці довжини.
right Встановлює положення правого краю елемента. auto — без змін або будь-які одиниці довжини.
top Встановлює положення верхнього краю елемента. auto — без змін або будь-які одиниці довжини.
position Показує, як об'єкт буде знаходитися відносно інших об'єктів на сторінці. absolute

Абсолютне позиціонування. Вказує, що елемент абсолютно позиціонується, при цьому інші елементи відображаються на веб-сторінці немов абсолютно позиційованого елемента і немає. Положення елемента задається властивостями left, top, right і bottom, також на положення впливає значення властивості position батьківського елемента. Так, якщо у батька значення position встановлено як static або батька немає, то відлік координат ведеться від краю вікна браузера. Якщо у батька значення position задано як relative, то відлік координат ведеться від краю батьківського елементу.

fixed

Фіксоване позиціонування. По своїй дії це значення близько до absolute, але на відміну від нього прив'язується до вказаної властивості left, top, right і bottom точки на екрані і не змінює свого положення при перегляді веб-сторінки.

relative

Відносне позиціонування. Положення елемента встановлюється щодо його початкового місця. Додавання властивостей left, top, right і bottom змінює позицію елемента і зрушує його в ту або іншу сторону від початкового розташування.

static

Статичне позиціонування. Елементи відображаються як зазвичай. Використання властивостей left, top, right і bottom не призводить до яких-небудь результатів.

sticky

Це поєднання відносного та фіксованого позиціонування. Елемент розглядається як позиційований щодо, поки він не перетинає певний поріг, після чого розглядається як фіксований. Зазвичай застосовується для фіксації заголовка на одному місці, поки вміст, до якого відноситься заголовок, прокручується на сторінці.

z-index Положення елемента по осі Z. auto (автоматично) або будь-яке ціле число.

Розміри Редагувати

Ці параметри дозволяють налаштувати розмір елементів.

Параметри
Параметр Що зраджує? Значення
box-sizing Визначає, як буде розраховуватися довжина і ширина елемента. content-box

Ґрунтується на стандартах CSS, при цьому властивості width і height задають ширину і висоту контенту і не включають в себе значення відступів, полів і кордонів.

border-box

Властивості width і height включають в себе значення полів і меж, але не відступ (margin). Ця модель використовується браузером Internet Exporer в режимі сумісності.

height Встановлює висоту елемента. auto — встановлює висоту за розмірами елемента чи значення розміру або відсотки.
max-height Встановлює максимальну висоту елемента. Одиниці вимірювання CSS чи none (скасовує цю властивість).
max-width Встановлює максимальну ширину елемента. Одиниці вимірювання CSS чи none (скасовує цю властивість).
min-height Встановлює максимальну ширину елемента. Одиниці вимірювання CSS.
min-width Встановлює мінімальну ширину елемента. Одиниці вимірювання CSS.
width Встановлює ширину блокових або замінних елементів. auto — встановлює ширину за розмірами елемента чи значення розміру або відсотки.

Списки Редагувати

Ці параметри дозволяють налаштувати списки на вікі, які використовують теги вікі-розмітки # і *.

Параметри
Параметр Що зраджує? Значення
list-style-type Змінює вигляд маркера для кожного елемента списку. Залежать від того, до якого типу списку вони застосовуються: маркірованого або нумерованого.
Маркірований список


circle

Маркер у вигляді кружка.

disc

Маркер у вигляді точки.

square

Маркер у вигляді квадрата.

Нумерований список


armenian

Традиційна вірменська нумерація.

decimal

Арабські числа (1, 2, 3, 4,...).

decimal-leading-zero

Арабські числа з нулем попереду для цифр менше десяти (01, 02, 03,...).

georgian

Традиційна грузинська нумерація.

lower-alpha

Рядкові латинські букви (a, b, c, d,...).

lower-greek

Малі грецькі літери (α, β, γ, δ,...).

lower-latin

Це значення аналогічно lower-alpha.

lower-roman

Римські числа в нижньому регістрі (i, ii, iii, iv, v,...).

upper-alpha

Заголовні латинські букви (A, B, C, D,...).

upper-latin

Це значення аналогічно upper-alpha.

upper-roman

Римські числа у верхньому регістрі (I, II, III, IV, V,...).

none

Скасовує маркери списку.

list-style-position Визначає, як буде розміщуватися маркер відносно тексту. inside

Маркер є частиною текстового блоку і відображається в елементі списку.

outside

Текст вирівнюється по лівому краю, а маркери розміщуються за межами текстового блоку.

list-style-image Встановлює адресу зображення, яке служить в якості маркера списку. none

Скасовує зображення в якості маркера для батьківського елемента.

url

Відносний або абсолютний шлях до графічного файлу. Значення можна вказувати в одинарних, подвійних лапках чи без них.

Таблиці Редагувати

Ці властивості впливають на відображення таблиць.

Параметри
Параметр Що зраджує? Значення
border-collapse Встановлює, як відображати межі навколо клітинок таблиці. collapse

Лінія між осередками відображається тільки одна, також ігнорується значення атрибута cellspacing.

separate

Навколо кожної комірки відображається своя власна рамка, в місцях зіткнення осередків показуються відразу дві лінії.

border-spacing Задає відстань між границями комірок в таблиці. Будь-яка одиниця розміру в CSS.
caption-side Визначає положення заголовка таблиці, що задається за допомогою тега <caption>. top

Має заголовок по верхньому краю таблиці.

bottom

Заголовок розташовується під таблицею.

empty-cells Задає відображення меж і фону в комірці, якщо вона порожня. show

Відображає межу навколо осередку і фон в ній.

hide

Межа і фон в порожніх клітинках не відображається. Якщо всі клітинки в рядку порожні, то рядок ховається цілком.

table-layout Визначає, як браузер повинен обчислювати ширину комірок таблиці, ґрунтуючись на її вміст. auto

Браузер завантажує всю таблицю, аналізує її для визначення розмірів комірок і тільки після цього відображає.

fixed

Ширина колонок в цьому випадку визначається за допомогою тега <col>, або обчислюється на основі першого рядка. Якщо дані про форматування першого рядка таблиці з якихось причин отримати неможливо, у цьому випадку таблиця ділиться на колонки рівної ширини. При використанні цього значення, вміст, який не поміщається в комірку вказаної ширини, буде «обрізано» або накладено поверх осередку. Це залежить від браузера, але в будь-якому випадку ширина комірки змінюватися не буде. Для коректної роботи цього значення обов'язково повинна бути задана ширина таблиці.

Текст і шрифт Редагувати

Визначає властивості шрифту тексту.

Параметри
Параметр Що зраджує? Значення
@font-face Визначає налаштування шрифтів, а також дозволяє завантажити специфічний шрифт на комп'ютер користувача. Набір властивостей для зміни параметрів шрифту (font-family, font-size, font-style тощо), а також посилання на шрифтовий файл. Посилання записується у вигляді src: url(URI), де URI — відносний або абсолютний шлях до файла.
direction Властивість призначена для проектів, в яких має значення напрямок тексту. ltr

Встановлює напрямок зліва направо.

rtl

Задає напрямок справа наліво.

font-family Встановлює шрифт, який буде використовуватися для оформлення тексту вмісту. Назва будь-якого шрифту або

serif

шрифти з зарубками (антіквенні), типу Times.

sans-serif

рублені шрифти (шрифти без зарубок чи гротески), типовий представник Arial.

cursive

курсивні шрифти.

fantasy

декоративні шрифти.

monospace

шрифт фіксованої ширини, ширина кожного символу в такому сімействі однакова (шрифт Courier).

font-kerning Змінює відстань між буквами чи кернінг[1]. auto

Браузер самостійно визначає необхідність кернінгу для тексту. Так, для дрібного шрифту кернінг відключається для збереження читаності тексту, для великого, навпаки, включається.

normal

До тексту застосовується кернінг.

none

Браузер не використовує кернінг тексту.

font-size Визначає розмір шрифту елемента. Будь-яка одиниця розміру в CSS.
font-stretch Встановлює вузьке, нормальне або широке накреслення шрифту, що дозволяє ущільнювати або розширювати текст.
Вузьке

ultra-condensed

extra-condensed

condensed

semi-condensed

Нормальне

normal

Широке

semi-expanded

expanded

extra-expanded

ultra-expanded

font-style Визначає шрифт — звичайний, курсив, підкреслений або похилий. normal

Звичайне накреслення тексту.

italic

Курсивне накреслення.

oblique

Похиле накреслення. Курсив і похилий шрифт при всій їх схожості не одне і те ж. Курсив — це спеціальний шрифт, що імітує рукописний, похилий ж утворюється шляхом нахилу звичайних знаків вправо.

font-variant Визначає, як потрібно представляти малі літери — залишити їх без модифікацій або робити їх все прописними зменшеного розміру. normal

Залишає регістр символів вихідним, заданим за замовчуванням.

small-caps

Модифікує усі рядкові символи як заголовні зменшеного розміру.

font-weight Встановлює насиченість шрифту. Насиченість шрифту задається за допомогою ключових слів: bold — жирне накреслення і normal — нормальний шрифт. Також допустимо використовувати умовні одиниці від 100 до 900. Значення bolder і lighter змінюють жирність щодо насиченості батьків, відповідно, в більшу і меншу сторону.

Ось як числові значення впливають на насиченість шрифту.

  • 100 — тонке накреслення;
  • 200 — надсвітле;
  • 300 — світле;
  • 400 — нормальне (аналогічно normal);
  • 500 — середне;
  • 600 — напівжирне;
  • 700 — жирне (аналогічно bold);
  • 800 — наджирне;
  • 900 — тяжке.
hyphens Відповідає за переноси слів. none

Слова не переносяться, навіть при наявності в тексті м'яких переносів ­.

manual

Переноси слів у тексті відбуваються в тих місцях, де доданий ­ або <wbr>, якщо їх немає, то переноси не робляться.

auto

Браузер автоматично додає переноси слів на основі вбудованого словника переносів.

letter-spacing Визначає інтервал між символами в межах елемента. Будь-які одиниці довжини в CSS або normal.
line-height Встановлює висоту рядка тексту. Будь-які одиниці довжини в CSS або normal.
tab-size Використовується для зміни ширини відступу, заданого за допомогою табуляції. Будь-яке додатне число.
text-align Визначає горизонтальне вирівнювання тексту в межах елемента. center

Вирівнювання тексту по центру. Текст розташовується по центру горизонталі вікна браузера або контейнера, де розташований текстовий блок. Рядки тексту ніби нанизуються на невидиму вісь, яка проходить по центру веб-сторінки. Подібний спосіб вирівнювання активно використовується в заголовках і різних підписів, зразок підмалюночних, він надає офіційний і солідний вигляд оформлення тексту. У всіх інших випадках вирівнювання по центру застосовується рідко з тієї причини, що читати великий обсяг такого тексту незручно.

justify

Вирівнювання по ширині, що означає одночасне вирівнювання по лівому і правому краю. Щоб зробити це дію браузер в цьому випадку додає пробіли між словами.

left

Вирівнювання тексту по лівому краю. У цьому випадку рядка тексту вирівнюється по лівому краю, а правий край розташовується «драбинкою». Такий спосіб вирівнювання є найбільш популярним на сайтах, оскільки дозволяє користувачеві легко відшукувати поглядом новий рядок і комфортно читати великий текст.

right

Вирівнювання тексту по правому краю. Цей спосіб вирівнювання виступає в ролі антагоніста попереднього типу. А саме, рядки вирівнюються по правому краю, а лівий залишається «рваним». З-за того, що лівий край не вирівнюється, а саме з нього починається читання нових рядків, такий текст читати важче, ніж, якби він був вирівняний по лівому краю. Тому вирівнювання по правому краю застосовується зазвичай для коротких заголовків обсягом не більше трьох рядків. Ми не розглядаємо специфічні сайти, де текст доводиться читати справа наліво, там, можливо, подібний спосіб вирівнювання і стане в нагоді.

start

Аналогічно значенню left, якщо текст йде зліва направо і right, коли текст йде справа наліво.

end

Аналогічно значенню right, якщо текст йде зліва направо і left, коли текст йде справа наліво.

text-align-last Задає вирівнювання останнього рядка тексту, коли властивість text-align встановлена як justify. start

Рядок вирівнюється по початковому краю блоку.

end

Рядок вирівнюється по кінцевому краю блоку.

left

Рядок вирівнюється по лівому краю.

right

Рядок вирівнюється по правому краю.

center

Рядок вирівнюється по центру.

justify

Рядок вирівнюється по ширині. Якщо в останньому рядку тільки одне слово, то воно буде показано по лівому краю.

text-decoration Додає оформлення тексту у вигляді його підкреслення, перекреслення, лінії над текстом. blink

Встановлює миготливий текст. Такий текст періодично, приблизно раз в секунду зникає, потім знову з'являється на колишньому місці. Це значення в даний час не підтримується браузерами.

line-through

Створює перекреслений текст (приклад).

overline

Лінія проходить над текстом (приклад).

underline

Встановлює підкреслений текст (приклад).

none

Скасовує всі ефекти, в тому числі і підкреслення у посилань, яке задано за замовчуванням.

text-decoration-color Встановлює колір лінії, яка додається через властивість <span class="attribute">text-decoration</span>. transparent (прозорий) чи у форматі RGB, RGBA, HEX, HSV
text-decoration-line Визначає, як повинна додаватися декоративна лінія тексту — підкреслення, закреслення, над текстом. line-through

Створює перекреслений текст (приклад).

overline

Лінія проходить над текстом (приклад).

underline

Встановлює підкреслений текст (приклад).

none

Скасовує всі ефекти, в тому числі і підкреслення у посилань, яке задано за замовчуванням.

text-decoration-style Встановлює стиль декоративної лінії, яка додається до тексту через властивість text-decoration або text-decoration-line. solid

Одна лінія.

double

Подвійна лінія.

dotted

Точкова лінія.

dashed

Пунктирна лінія.

wavy

Хвиляста лінія.

text-indent Встановлює величину відступу першого рядка блоку тексту. Будь-яка одиниця розміру в CSS.
text-overflow Визначає параметри видимості тексту в блоці, якщо текст цілком не поміщається в задану область. clip

Текст обрізається за розміром області.

ellipsis

Текст обрізається і до кінця рядка додається три крапки.

text-shadow Додає тінь тексту, а також встановлює її параметри. none

Скасовує додавання тіні.

<колір>

Колір тіні в будь-якому доступному CSS форматі. За замовчуванням колір тіні збігається з кольором тексту. Необов'язковий параметр.

<зсув по x>

Зміщення тіні по горизонталі відносно тексту. Позитивне значення цього параметра задає зсув тіні вправо, негативне — вліво. Обов'язковий параметр.

<зсув по y>

Зміщення тіні по вертикалі відносно тексту. Також допустимо використовувати від'ємне значення, яке піднімає тінь вище тексту. Обов'язковий параметр.

<радиус>

Задає радіус розмиття тіні. Чим більше це значення, тим сильніше тінь згладжується, стає ширше і світліше. Якщо цей параметр не заданий, за замовчуванням встановлюється рівним 0. Врахуйте, що алгоритм згладжування в браузерах зазвичай різний, тому вигляд тіні може дещо відрізнятися в залежності від заданих параметрів згладжування.

text-transform Керує перетворенням тексту елемента в заголовні або прописні символи. capitalize

Перший символ кожного слова в реченні буде головним. Інші символи не змінюють свій вигляд.

lowercase

Всі символи тексту стають малими (нижній регістр).

uppercase

Всі символи тексту стають великими (верхній регістр).

none

Не змінює регістр символів.

unicode-bidi Визначає, як повинен розташовуватися текст. normal

Браузер самостійно визначає, як йому слід відображати текст на основі символів юнікоду.

embed

Перевизначає параметри тексту, розташовуючи його, як зазначено у властивості direction.

bidi-override

Аналогічний embed, але при цьому також змінюється порядок символів у тексті, підкоряючись значенням direction.

white-space Встановлює, як відображати пробіли між словами. normal

Текст виводиться у вікні браузера як зазвичай, переноси рядків встановлюються автоматично.

nowrap

Пробіли не враховуються, переноси рядків в коді HTML ігноруються, весь текст відображається одним рядком; разом з тим, додавання
переносить текст на новий рядок.

pre

Текст показується з урахуванням всіх прогалин і переносів, як вони були додані розробником в коді HTML. Якщо рядок виходить занадто довгим і не поміщається у вікні браузера, то буде додана горизонтальна смуга прокрутки.

pre-line

У тексті прогалини не враховуються, текст автоматично переноситься на наступний рядок, якщо він не поміщається в задану область.

pre-wrap

В тексті зберігаються всі пробіли, і переноси, однак якщо рядок по ширині не поміщається в задану область, то текст автоматично буде перенесений на наступний рядок.

word-break Властивість word-break вказує, як робити перенос рядків усередині слів, які не вміщуються по ширині в задану область. normal

Використовуються правила переносу рядків за замовчуванням. Як правило, в цьому випадку рядок не переносяться або переносяться в тих місцях, де явно вказано перенесення (наприклад, з допомогою <br>).

break-all

Перенесення рядків додається автоматично, щоб слово помістилося в задану ширину блоку. Значення не працює для тексту китайською, корейською або японською мовою.

keep all

Не дозволяє перенесення рядків у словах китайською, корейською або японською мовою. Для інших мов діє як normal.

word-spacing Властивість word-break вказує, як робити перенос рядків усередині слів, які не вміщуються по ширині в задану область. Будь-яка одиниця розміру або normal.
word-wrap Вказує, переносити чи ні довгі слова, які не вміщуються по ширині в задану область. normal

Рядки не переносяться або переносяться в тих місцях, де явно вказано перенесення (наприклад, з допомогою <br>).

break-word

Перенесення рядків додається автоматично, щоб слово помістилося в задану ширину блоку.

writing-mode Встановлює напрямок тексту на сторінці. horizontal-tb

Встановлює напрямок тексту по горизонталі зліва направо і зверху вниз.

vertical-rl

Визначає напрямок тексту по вертикалі зверху вниз і справа наліво.

vertical-lr

Визначає напрямок тексту по вертикалі зверху вниз і зліва направо.

sideways-rl

Текст розташовується вертикально зверху вниз, а потім всі символи повертаються боком вправо.

sideways-lr

Текст розташовується вертикально зверху вниз, а потім всі символи повертаються боком вліво.

Деякі значення Редагувати

Кольори Редагувати

Кольори в CSS позначаються за допомогою шістнадцяткового коду (HEX)[2], у форматі «червоно-зелено-синій» (RGB) або англійською назвою. Наприклад, написавши #00FF00, ми отримаємо те ж саме, що і rgb(0,255,0) та green.

Час Редагувати

Час в CSS вказується в секундах (s) і/або мілісекундах (ms). Може вказуватися як цілим, так і дробовим числом. Слід пам'ятати, що 1s = 1000ms.

!important Редагувати

Даний тег використовується для того, щоб позначити пріоритет того чи іншого параметра над іншими такими ж параметрами. Він використовується після вказаного значення параметра, наприклад:

.WikiaArticle {
	font-size: 150% !important;
}

При використанні цього тега в особистому і загальному CSS браузер користується наступним методом:

  • !important доданий в загальний CSS — буде застосовуватися параметр, вказаний на сторінці MediaWiki:Wikia.css.
  • !important доданий в користувальницький CSS — буде застосовуватися параметр користувача.
  • !important немає як в загальному CSS, так і в CSS користувача — буде застосовуватися параметр, вказаний на сторінці MediaWiki:Wikia.css.
  • !important міститься в загальному CSS і CSS користувача — буде застосовуватися параметр користувача.

inherit Редагувати

За допомогою цього значення можна вказати властивості об'єкта від об'єкта, який є по відношенню до шуканого головним, наприклад, .WikiaArticle (текст статей на Фендому) успадковує параметри від body (весь текст на Фендому).

.WikiaArticle {
	font-weight: inherit;
	font-family: inherit;
}

initial Редагувати

Це значення допомагає браузеру відновити вихідне, початкове значення властивості, наприклад, початковий шрифт на вікі.

.WikiaArticle {
	font-family: initial;
}

url Редагувати

Дана властивість потрібна для того, щоб зробити посилання на будь-яку картинку, необов'язково на даному хостингу.

/* Змінює фон на вікі */
.WikiaSiteWrapper {
	background-image: url(http://oboi-na-stol.com/pub/original_images/oboi-na-stol.com-287061-raznoe-ukraina-golub-mir-uzor.jpg) no-repeat;
}

Кут Редагувати

Задає кут нахилу чи повороту. Позитивне значення відміряється за годинниковою стрілкою, негативне проти годинникової стрілки. Може задаватися в наступних одиницях:

  • У градусах. Після значення пишеться deg. Повне коло дорівнює 360deg.
  • У градах. Позначається як grad. Повне коло дорівнює 400grad,
  • В радіанах. Позначається як rad. Повне коло дорівнює 2π або приблизно 6.2832 rad.
  • У поворотах. Позначається як turn. Одне коло дорівнює одному повороту і пишеться як 1turn

Розмір Редагувати

Відносні одиниці Редагувати

Одиниця em це змінне значення, що залежить від розміру шрифту поточного елемента (розмір встановлюється через стильове властивість font-size). В кожному браузері закладений розмір тексту, що застосовується у тому разі, коли цей розмір явно не задано. Тому спочатку 1em дорівнює розміру шрифту, вказаного в браузері за замовчуванням або розміром шрифту батьківського елемента. Процентна запис ідентична em, в тому сенсі, що значення 1em і 100% рівні.

Одиниця ex визначається як висота символу «x» в нижньому регістрі. На ex поширюються ті ж правила, що і для em, а саме, він прив'язаний до розміру шрифту, вказаного в браузері за замовчуванням, або до розміру шрифту батьківського елемента.

Одиниця ch дорівнює ширині символу «0» для поточного елемента і подібно em залежить від розміру шрифту.

Різниця між em і rem наступна. em залежить від розміру шрифту батьків елемента і змінюється разом з ним, а rem прив'язаний до кореневого елементу, тобто розміру шрифту заданого елемента html.

Відносні одиниці виміру
Одиниця Опис
em Розмір шрифту поточного елемента
ex Висота символу x
ch Ширина символу 0 поточного елемента
rem Розмір шрифту кореневого елемента

Абсолютні одиниці Редагувати

Абсолютні одиниці являють собою фізичні розміри — дюйми, сантиметри, міліметри, пункти, піки, а також пікселі. Для пристроїв з низьким dpi (кількість точок припадають на один дюйм, визначає щільність точок) прив'язка йде до пікселя. У цьому випадку один дюйм дорівнює 96 пикселів. Очевидно, що реальний дюйм не буде збігатися з дюймом на такому пристрої.

Абсолютні одиниці виміру
Одиниця Опис
px Піксель
in Дюйм (1 дюйм дорівнює 2,54 см)
cm Сантиметр
mm Міліметр
pt Пункт (1 пункт дорівнює 1/72 дюйма)
pc Піка (1 піка дорівнює 12 пунктам)

Примітки Редагувати

  1. Кернінг — це зміна інтервалу між певними поєднаннями букв для збереження щільності літер у тексті. Це особливо важливо для літер, у яких є похилі лінії, начебто А, У, W, V.
  2. В шістнадцятковому коді колір вказується у форматі #Червоний Червоний Зелений Зелений Синій Синій = #RRGGBB

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.

Мережа Вікії

Випадкова вікі