Для того щоб було легше працювати з CSS я створю таблиці з повним списком властивостей, CSS працює з деякими елементами які в даному випадку називаються “властивостями”.
Нижче представлений повний список властивостей і їх опис.
Властивості фону
background-attachment | визначає чи буде прокручуватись фонове зображення разом з вмістом елемента
div { background-attachment:fixed;} div { background-attachment:scroll;} |
background-color | визначає колір фона
div { background-color:green;} div { background-color:#00ff00;} |
background–image | визначає, яке зображення буде використано для фону
div { background–image:url(images/img.jpg);} body{background–image:url(img.jpg);} |
background–position | визначає позицію фонового зображення
div { background–position:10x 50px;} div { background–position:bottom right;} |
background–repeat | визначає чи повторюється фонове зображення чи ні
div { background–repeat:repeat–x;} div { background–repeat:no–repeat |
background | являє собою єдину властивість фону, яка вказує на всі власні властивості в одній команді
div { background: green url(image.jpg)no–repeat fixed center center;} div { background:url(img.jpg) fixed;} |
Властивість границі (краю)
border–top–color | показує колір верхньої границі (края)
div {border–top–color:green;} div {border–top–color:#00ff00;} |
border–top–style | визначає стиль верхньої границі
outset div {border–top–style:solid;} div{border–top–style:inset;} |
border–top–width | вказує ширину верхньої границі
div{border–top–width:2px} div{border–top–width:thin;} |
border–top | використовується як легкий спосіб вказати в одній команді всі властивості верхньої границі
div{border–top:2px solid green;} div{border–top:thick double#00ff00;} |
border–right–color | визначає колір границі зправа
div{border–right–color:green;} div{border–right–color:#00ff00;} |
border–right–style | визначає стиль границі справа
div{border–right–style: solid;} div{border–right–style: inset;} |
border–right–width | визначає ширину правої границі
div {border–right–width:2px;} div {border–right–width:thin;} |
border–right | використовується як простий спосіб вказати всі властивості правої границі в одній команді
div {border–right:2px solid green;} div {border–right:thick double#00ff00;} |
border–bottom–color | визначає колір нижньої границі
div {border–bottom–color: green;} div {border–bottom–color:#00ff00;} |
border–bottom–style | визначає стиль нижньої границі
div {border–bottom–style: solid;} div {border–bottom–style: inset;} |
border–bottom–width | визначає ширину нижньої границі
div { border–bottom–width:2x;} div{b order–bottom–width:thin;} |
border–bottom | використовується як звичайний спосіб вказати всі властивості нижньої границі в одній команді
div { border–bottom;2px solid green;} div { border–bottom:thick double#00ff00;} |
border–left–color | визначає колір лівої границі
div { border–left–color:green div { border–left–color:#00ff00;} |
border–left–style | визначає стиль лівої границі
div { border–left–style:solid;} div { border–left–style:inset;} |
border–left–width | визначає ширину лівої границі
div { border–left–width:2pxl div { border–left–width:thin;} |
border–left | використовується як простий спосіб вказати всі властивості лівої границі в одній команді
div { border–left:2px solid green div { border–left:thick double #00ff00;} |
border–color | задає колір для всіх разом взятих границь
div {border–color:green red blue olive;} div {border–color:green;} div {border–color:red;} div {border–color:green red;} div {border–color:green red blue;} |
border–style | задає стиль для всіх разом взятих границь
div {border–style:solid dotted dashed double;} div {border–style:solid;} div {border–style:solid dotted;} div {border–style:solid dotted dashed;} |
border–width | задає ширину для всіх разом взятих границь
div {border–width:1px 3px 5px 2px;} div {border–width:thin;} div {border–width:2px 4px;} div {border–width:2px 4px 5px;} |
border | використовується в випадку, коли всі границі індентичні, для вказання всіх властивостей в одній команді
div {border:1px double green;} div {border:thin solid #00ff00;} |
Властивість позиції і класифікації
clear | встановлює, з якої сторони елемента дозволено або заборонено його обтікання іншими елементами
div {clear:right;} div {clear:both;} |
cursor | встановлює тип курсора, який буде використовуватись
div {cursor: crossharing;} div{cursor:url(image.csr);} div {cursor:url(image.csr), pointer;} |
display | визначає як буде відображатись елемент
div {display:none;} div {display:inline;} div {display:marker;} |
float | визначає, яким чином буде вирівнюватись елемент відносно сусідніх
div {float:left;} div {float:right;} |
visibility | визначає ступінь видимості елемента
div {visibility:visible;} div {visibility:hidden;} |
top | визначає відстань від верхнього краю вмісту до верхнього краю самого верхнього елементу
div {top:15px;} div {top:2%;} |
right | визначає відстань від вмісту до правого краю документа
div{right:15px} div{right:2%} |
bottom | визначає відстань від вмісту до нижнього краю документа
div{bottom:15px;} div{bottom:2%;} |
left | визначає відстань від вмісту до лівого краю документа
div{left:15px;} div{left:2%;} |
position | визначає позицію документа
fixed div{position:absolute;} div {position:relative;} |
vertical–align | визначає вертикальне вирівнювання вмісту
span {vertical–align:middle;} td {vertical–align:top;} |
z–index | визначає порядок елементів
div {z–index:2} div {z–index:-2;} |
Властивості розмірів
beight | визначає висоту елементів
div {height:200px;} div {height:50%;} |
max–height | визначає максимальну висоту документа
div {max–height:200px;} div {max–height:50%;} |
min–height | визначає мінімальну висоту документа
div {min–height:200px;} div {min–height:50%;} |
position | вказує ширину елемента
div{width:500px;} div{width:75%;} |
vertical–align | вказує максимальну ширину документа
div {max–width:500px;} div {max–width:75%} |
min–width | визначає мінімальну ширину документа
div{ min–width:500px;} |
Властивість шрифтів
font–family | вказує на назву шрифта який буде використовуватись
div { font–family:Arial;} div { font–family:Arial, Helvetica, sans–serif;} |
font–size | визначає розмір шрифта
div { font–size:70%;} div { font–size: 0.85em;} div { font–size:medium;} |
font–size–adjust | вказує розмір шрифта
div {font–size–adjust:0.46;} |
font–stretch | задає параметри розтягнутості шрифта
div {font–stretch:ultra–expanded;} |
font–style | визначає накреслення шрифта
div { font–style:italic;} div { font–style:oblique;} |
font–variant | визначає варіанти шрифтів(small caps, breakthrougt і.т.д)
div { font–variant:normal;} div { font–variant:small–caps;} |
font–weight | визначає насищенність шрифта(наскільки він буде жирним)
div { font–weight:border;} div { font–weight:200;} |
font | використовується для визначення всіх параметрів шрифта в одній команді
div {font:italic small–caps bold lem 1.2em Arial} |
Властивості списків
list–style–type | змінює вид маркера для кожного елементу списку
ol { list–style–type:upper–roman;} ul { list–style–position:outside;} |
list–style–position | визначає позицію маркера списку відносно контента
ol { list–style–position:inside;} ul { list–style–position: outside |
list–style–image | визначає зображення яке буде використовуватись в якості маркера списку
ul { list–style:disk inside url(image.gif);} ol { list–style:upper–roman outside;} |
Властивості країв
margin–top | визначає розмір верхнього краю документа
div { margin–top:5px;} div { margin–top:15 %;} |
margin–right | визначає розмір правого краю документа
div { margin–right:5px; } div { margin–right:15%;} |
margin–bottom | визначає розмір нижнього краю документа
div { margin–bottom:5px; } div { margin–bottom:15%;} |
margin–left | визначає розмір верхнього краю документа
div { margin–left:5px; } div { margin–left: 15%;} |
margin | використовується для вказівки всіх параметрів країв в одній команді
div { margin: 5px 12px 4px 7px; } div { margin: 5px; } div { margin: 5px 10px; } div { margin: 5px 7px 4px; } |
Властивості сторінок
marks | визначає які типи маркування будуть відображені
@page {mark:crop;} |
orphans | визначає кількість рядків, які повинні бути в параграфі
@page {orphans:2;} |
page | визначає тип сторінки |
page–break–before | визначає розрив сторінки до елементу при друку |
page–break–inside | визначає розрив сторінки на елементі при друку |
size | визначає розмір і орієнтацію сторінки |
widows | визначає кількість параграфів, які необхідно зберегти в верхній частині сторінки |
Властивості таблиць
border–collapse | визначає стиль в якому відображаються границі
table { border–collapse:separate;} |
border–spacing | визначає відстань між границями
table { border–spacing: 5px; } table { border–spacing: 5px 10px; } |
empty–cells | показує стиль, в якому відображаються пусті ячейки
table { empty–cells: show;} table { empty–cells: hide;} |
table–layout | визначає як браузер повинен вичисляти висоту і ширину ячеєк таблиці, які вказують на її вмістом
table { table–layout:auto;} table { table–layout:fixed;} |
Властивості текстів
color | визначає колір тексту
div {color:green;} div {color:rgb(0,255,0);} div {color:#00ff00;} |
direction | визначає направлення, в якому буде читатись текст(праве чи ліве)
div {direction:ltr;} div {direction:rti;} |
line–height | визначає відстань між рядками
div {line–height:2em;} div {line–height:125%;} |
letter–spacing | визначає відстань між буквами
div {letter–spacing:normal;} div {letter–spacing:5px;} div {letter–spacing:–1px;} |
text–align | вказує метод вирівнювання тексту
div { text–align:center;} div { text–align:right;} div { text–align: “.” justify;} |
text–decoration | вказує деталі особливостей тексту(підкреслювання і т.д.)
div { text–decoration:none;} div { text–decoration:underline;} |
text–indent | вказує особливості відступа
div { text–indent:12px;} div { text–indent:2%;} |
text–shadow | вказує дані про тінь, яка може бути застосована до тексту
div { text–shadow:green 2px 2px 7px;} div { text–shadow:olive–3px –4px 5px;} |
text–transform | визначає регістр букв ( верхній і нижній)
div { text–transform:uppercase;} div { text–transform:lowercase;} |
unicode–bidi | визначає деталі двонаправленого тексту
div { unicode–bidi:embed;} div { unicode–bidi:bidi–override;} |
white–space | визначає правила обробки пробілівdiv {white–space:pre;}div {white–space:nowrap;} |
word–spacing | вказує дані про простір між словамиdiv { word–spacing:normal;}div { word–spacing:1.5em;} |