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

Стрічка RSS

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

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

Ваш ip адрес:54.80.169.119

Доброї ночі!
Ви обновили сторінку в 3 : 41

Статистика

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

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;}

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *