Поточний час:
Сьогодні 22 листопада, середа 2017 рік

Стрічка RSS

Введіть ваш Е-mail:

Zura-Blog 2 роки 11 місяців 3 дня

Ваш ip адрес:54.162.166.214

Добрий вечір!
Ви обновили сторінку в 20 : 27

Статистика

Кількість публікацій на блозі: 367
Кількість коментарів на блозі: 102
Кількість категорій на блозі: 17
Кількість міток на блозі: 28

Zura – Blog
Яндекс.Метрика UA TOP Bloggers

Для того щоб було легше працювати з 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;}

 

Leave a Reply

Your email address will not be published. Required fields are marked *