From Test-Scratch-Wiki
Користувачі, обізнані з каскадними таблицями стилів (CSS), можуть змінити для себе зовнішній вигляд Скретч вікі, створивши підсторінку своєї сторінки користувача із назвою, яка відповідає назві активного зараз скіну плюс розширення .css, як-от "User:Yourname/scratchwikiskin2.css". CSS, розміщений на такій сторінці, замістить CSS активного скіну. Це працює, лише якщо адміністратор дозволив це налаштування – якщо це так, нагорі сторінки з твоїм власним CSS ти побачиш текст поради скинути кеш бразуера. Наразі у Скретч вікі це має бути дозволено.
CSS також широко застосовується у блоках HTML розмітки, зокрема, <div>:
<div style=" ">
Тут елементи стилю, розділені крапкою з комою, додаються у лапки.
Параметри стилю
В наступній таблиці перелічено багато параметрів стилю CSS із поясненням використання. Повний перелік можна знайти на Mozilla Developer Network (MDN) (англ.)
| Параметр | Значення | За замовчуванням | Опис | Приклад |
|---|---|---|---|---|
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
|
Спосіб вирівнювання тексту в списку |
|
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
|
Позначка ненумерованого списку |
|
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
|
Чи відображувати елемент |
|
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
|
Напрямок написання тексту | |
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
|
Дивись також
- Довідка:Налаштування
- Довідка:HTML
- mediawikiwiki:Manual:Gallery of user styles (без офіційних скінів)
