From Test-Scratch-Wiki

Translate: - English (no prefix) - Türkçe - українська мова 

Користувачі, обізнані з каскадними таблицями стилів (CSS), можуть змінити для себе зовнішній вигляд Скретч вікі, створивши підсторінку своєї сторінки користувача із назвою, яка відповідає назві активного зараз скіну плюс розширення .css, як-от "User:Yourname/scratchwikiskin2.css". CSS, розміщений на такій сторінці, замістить CSS активного скіну. Це працює, лише якщо адміністратор дозволив це налаштування – якщо це так, нагорі сторінки з твоїм власним CSS ти побачиш текст поради скинути кеш бразуера. Наразі у Скретч вікі це має бути дозволено.

CSS також широко застосовується у блоках HTML розмітки, зокрема, <div>:

<div style=" ">

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

Параметри стилю

В наступній таблиці перелічено багато параметрів стилю CSS із поясненням використання. Повний перелік можна знайти на Mozilla Developer Network (MDN) (англ.)

Стилі CSS
Параметр Значення За замовчуванням Опис Приклад
background-color Будь-який колір (назва чи 16-річний код) transparent Фоновий колір батьківскього елемента
background-color: teal


background-color: #58FAAC
color Будь-який колір (назва чи 16-річний код) Немає Колір тексту переднього плану
color: blue


color: #F5A9D0
font-family Назва шрифта.
Поширені:
Arial, Helvetica, Times New Roman, Verdana
Загальні:
Serif, Sans serif, Cursive, Fantasy, Monospace
Немає Шрифт для відображення вмісту елемента; якщо список, перший у списку шрифт пріоритетний
font-family: Verdana, sans-serif


font-family: 'Times New Roman', serif
font-size Число, поєднане з одиницями виміру, або
xx-small, x-small, small, smaller, medium, large, larger, x-large, xx-large, %, Length
medium Розмір шрифта для відображення вмісту елемента
font-size:2em


font-size: 75%


font-size: larger
font-weight normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 normal Накреслення шрифта
font-weight: bolder


font-weight: 900
font-style normal, italic, oblique, inherit normal Стиль шрифта
font-style: oblique
font-variant small-caps, normal, inherit normal Варіант стилю "маленькі наче великі"
font-variant: small-caps
line-height Число з одиницею виміру, number, %, normal, inherit normal Висота рядка
line-height: 2


line-height: 1em
text-align left, right, center, justify Немає Вирівнювання текста в рядку
text-align: right


приклад вирівнювання
text-decoration none, underline, overline, line-through none Спеціальні ефекти тексту
text-decoration: overline


text-decoration: underline
list-style-position inside, outside outside Спосіб вирівнювання тексту в списку
  1. list-style-position: outside
  2. приклад2 довгий
  3. приклад3 довгий


  1. list-style-position: inside
  2. приклад2 довгий
  3. приклад3 довгий
list-style-type disk, circle, square, decimal, decimal-leading-zero, lower-alpha, upper-alpha, none, armenian, georgian, lower-greek, lower-latin, lower-roman, upper-latin, upper-roman, upper-greek disc Позначка ненумерованого списку
  1. list-style-type: lower-Greek
  2. приклад2
  3. приклад3


  1. list-style-type: square
  2. приклад2
  3. приклад3
display block, inline, none inline Спосіб розміщення елементу щодо рядка приклад
display: inline
приклад


приклад
display: block
приклад
top Число з одиницею виміру, auto auto Абсолютна чи відносна позиція верхнього краю елемента. В параметрі position Приклад тут
right Число з одиницею виміру (можливо %), auto auto Абсолютна чи відносна позиція правого краю елемента. В параметрі position Приклад тут
bottom Число з одиницею виміру (можливо %), auto auto Абсолютна чи відносна позиція нижнього краю елемента. В параметрі position Приклад тут
left Число з одиницею виміру (можливо %), auto auto Абсолютна чи відносна позиція лівого краю елемента. В параметрі position Приклад тут
position static, absolute, relative, fixed static Спосіб позиціонування елемента Приклад тут
visibility collapse, visible, hidden, inherit inherit Чи відображувати елемент
приклад


  1. приклад
  2. приклад2
  3. приклад3
z-index Число, auto auto Порядок накладення для об'єктів Приклад тут
border-style none, dotted, dashed, solid, double, groove, ridge, inset, outset Немає Коротка назва для стилю відображення межі об'єкта
border-style: dotted dashed


border-style: groove solid inset
border-width Число, thin, medium, thick Немає Коротка назва для ширини межі об'єкта
border-width: 0.2em


border-width: thick 2px
border-color Будь-який колір (назва чи 16-річний код), transparent Немає Коротка назва для кольору межі об'єкта
border-color: #0066FF


border-color: transparent red
border border-width+border-style+border-color Немає Коротка назва, вмикає відображення межі об'єкта
border: 2px black dotted


border: 0.5em #00FF80 ridge
float left, right, none none Спосіб позиціонування елемента Приклад тут
height Число з одиницею виміру, auto auto Висота об'єкта у відображенні
height: 25px
width Число з одиницею виміру, auto auto Ширина об'єкта у відображенні
width: 50px
margin Число з одиницею виміру, auto auto Коротка назва для відображенян полів об'єкта
margin: 20px
padding Число з одиницею виміру, auto auto Коротка назва для формування відступу навколо об'єкта
padding: 20px
cursor alias, all-scroll, auto, cell, context-menu, col-resize, copy, crosshair, default, e-resize, ew-resize, help, move. n-resize, ne-resize, nesw-resize, ns-resize, nw-resize, nwse-resize, no-drop, none, not-allowed, pointer, progress, row-resize, s-resize, se-resize, sw-resize, text, vertical-text, w-resize, wait, zoom-in, zoom-out, inherit auto Вигляд курсора
cursor: cell


cursor: no-drop
clear left, right, both, none none Стикувати края елемента з краями інших елементів з вільним позиціонуванням Приклад тут
clip rect, auto, inherit auto Обрізка абсолютно позиціонованих елементів Example located here
overflow visible, hidden, scroll, auto, inherit visible Спосіб обтікання елемента текстом
overflow: scroll приклад приклад приклад


overflow: visible; приклад приклад приклад


direction ltr, rtl, inherit ltr Напрямок написання тексту
direction: rtl приклад приклад приклад
letter-spacing Число з одиницею виміру, normal, inherit normal Відстань між літерами в тексті
letter-spacing: 4px


letter-spacing: -1px


text-indent Число з одиницею виміру (можливо %), inherit 0 Відступ пешого рядка текстового блоку
text-indent: 1em


text-indent: -3px
text-shadow h-shadow, v-shadow, blur(optional), color(optional) none Ефекти тіні
text-shadow: 5px 5px;


text-shadow: 5px 10px 2px blue;


text-transform none, capitalize, uppercase, lowercase, inherit none Великі чи малі літери тексту
TEXT-TRANSFORM: LOWERCASE
vertical-align baseline, sub, super, top, text-top, middle, bottom, text-bottom, inherit baseline Вирівнювання елемента по вертикалі є
vertical-align: 30%
є
white-space normal, nowrap, pre, pre-line, pre-wrap, inherit normal Обробка пропусків всередині елемента
white-space: pre

приклад

приклад
word-spacing Число з одиницею виміру, normal, inherit normal Ширина пропусків між словами
word-spacing: -3px приклад приклад
border-radius Число з одиницею виміру (можливо %) 0 Коротка назва для скруглених кутів межі
border-radius: 15px 5px 10px 20px
-moz-border-radius Число з одиницею виміру (можливо %) 0 Коротка назва для скруглених кутів межі, еквівалент Gecko до border-radius
-moz-border-radius: 5px 16px 8px 9px
-webkit-border-radius Число з одиницею виміру (можливо %) 0 Коротка назва для скруглених кутів межі, еквівалент Apple до border-radius
-webkit-border-radius: 12px 7px 19px 8px
box-shadow h-shadow, v-shadow, blur(optional) spread(optional) "inset"(optional) Немає Додавання тіней до області елемента
box-shadow: 8px 4px 10px 9px #5D5462 inset

Дивись також