CSS Հատկություններ

Այստեղ պատկերված են CSS հատկություններն ըստ խմբերի: Ձախ կողմում հատկություններն են, իսկ աջ կողմում՝ նրանց բացատրությունները:

- նոր է CSS3-ում

Գույն

colorՀատկանշում է տեքստի գույնը:
opacity Հատկանշում է տարրի անթափանցիկության աստիճանը:

Ֆոն և եզրագիծ

backgroundՀատկանշում է ֆոնային բոլոր հատկությունները կրճատ գրելաձևով:
background-attachmentՀատկանշում է, արդյո՞ք ֆոնային պատկերը ֆիքսված է, թե պտտվում է էջի մնացած մասի հետ:
background-clip Հատկանշում է ֆոնի նկարչական տարածքը:
background-colorՀատկանշում է տարրի ֆոնային գույնը:
background-imageՀատկանշում է ֆոնային պատկեր տարրի համար:
background-origin Հատկանշում է ֆոնային պատկերի դիրքավորման տարածքը:
background-positionՀատկանշում է ֆոնային պատկերի նախնական դիրքավորումը:
background-repeatՀատկանշում է, թե ինչպես պետք է կրկնվի ֆոնային պատկերը:
background-size Հատկանշում է ֆոնային պատկերի չափսը:
borderՀատկանշում է եզրագծային բոլոր հատկությունները կրճատ գրելաձևով:
border-bottomՀատկանշում է ստորին եզրագծի բոլոր հատկությունները կրճատ գրելաձևով:
border-bottom-colorՀատկանշում է ստորին եզրագծի գույնը:
border-bottom-left-radius Հատկանշում է ստորին եզրագծի ձախ անկյան կորությունը:
border-bottom-right-radius Հատկանշում է ստորին եզրագծի աջ անկյան կորությունը:
border-bottom-styleՀատկանշում է ստորին եզրագծի ոճը:
border-bottom-widthՀատկանշում է ստորին եզրագծի լայնությունը:
border-colorՀատկանշում է չորս եզրագծերի գույնը:
border-image Հատկանշում է եզրագծային պատկերի բոլոր հատկությունները կրճատ գրելաձևով:
border-image-outset Հատկանշում է չափսը, որքանով որ եզրագծային պատկերի տարածքը դուրս է գալիս արկղի եզրագզից:
border-image-repeat Հատկանշում է, արդյո՞ք եզրագծային պատկերը պետք է կրկնվի, կլորանա կամ ձգվի:
border-image-slice Հատկանշում է եզրագծային պատկերի ներքին խառնուրդը (offset):
border-image-source Հատկանշում է որպես եզրագիծ օգտագործվող պատկեր:
border-image-width Հատկանշում է եզրագծային պատկերի լայնությունները:
border-leftՀատկանշում է ձախ եզրագծի բոլոր հատկությունները կրճատ գրելաձևով:
border-left-colorՀատկանշում է ձախ եզրագծի գույնը:
border-left-styleՀատկանշում է ձախ եզրագծի ոճը:
border-left-widthՀատկանշում է ձախ եզրագծի լայնությունը:
border-radius Հատկանշում է չորս եզրագծերի անկյունների կորությունները կրճատ գրելաձևով:
border-rightՀատկանշում է աջ եզրագծի բոլոր հատկությունները կրճատ գրելաձևով:
border-right-colorՀատկանշում է աջ եզրագծի գույնը:
border-right-styleՀատկանշում է աջ եզրագծի ոճը:
border-right-widthՀատկանշում է աջ եզրագծի լայնությունը:
border-styleՀատկանշում է չորս եզրագծերի ոճը:
border-topՀատկանշում է վերին եզրագծի բոլոր հատկությունները կրճատ գրելաձևով:
border-top-colorՀատկանշում է վերին եզրագծի գույնը:
border-top-left-radius Հատկանշում է վերին եզրագծի ձախ անկյան կորությունը:
border-top-right-radius Հատկանշում է վերին եզրագծի աջ անկյան կորությունը:
border-top-styleՀատկանշում է վերին եզրագծի ոճը:
border-top-widthՀատկանշում է վերին եզրագծի լայնությունը:
border-widthՀատկանշում է չորս եզրագծերի լայնությունը:
box-shadow Կցորդում է շողք արկղին:

Արկղի բազային

bottomՀատկանշում է դիրքավորված տարրի ստորին դիրքավորումը:
clearՀատկանշում է, թե տարրի որ կողմերում այլ լողացող տարրեր չեն թույլատրվում:
clipԿտրում է բացարձակապես դիրքավորված տարրը:
displayՀատկանշում է, թե տարրն ինչպես պետք է պատկերվի:
floatՀատկանշում է, արդյո՞ք արկղը պետք է լողա, թե ոչ:
heightՀատկանշում է տարրի բարձրությունը:
leftՀատկանշում է դիրքավորված տարրի ձախ դիրքավորումը:
overflowՀատկանշում է, թե ինչ պետք է լինի, երբ պարունակությունը լրացնում է տարրի արկղը:
overflow-x Հատկանշում է, արդյո՞ք կտրել պարունակության ձախ/աջ եզրերը, երբ պարունակությունը լրացնում է տարրի պարունակության տարածքը:
overflow-y Հատկանշում է, արդյո՞ք կտրել պարունակության վերին/ստորին եզրերը, երբ պարունակությունը լրացնում է տարրի պարունակության տարածքը, թե ոչ:
paddingՀատկանշում է լիցքային բոլոր հատկությունները կրճատ գրելաձևով:
padding-bottomՀատկանշում է տարրի ստորին լիցքը:
padding-leftՀատկանշում է տարրի ձախ լիցքը:
padding-rightՀատկանշում է տարրի աջ լիցքը:
padding-topՀատկանշում է տարրի վերին լիցքը:
positionՀատկանշում է տարրի համար օգտագործվող դիրքավորման տեսակը:
rightՀատկանշում է դիրքավորված տարրի աջ դիրքավորումը:
topՀատկանշում է դիրքավորված տարրի վերին դիրքավորումը:
vertical-alignՀատկանշում է տարրի ուղղահայաց հավասարեցումը:
visibilityՀատկանշում է, արդյո՞ք տարրը տեսանելի է, թե ոչ:
widthՀատկանշում է տարրի լայնությունը:
z-indexՀատկանշում է դիրքավորված տարրի շերտային հերթականությունը:

Ճկվող արկղի նախագծում

align-content Հատկանշում է հավասարեցում գծերի միջև, ճկվող կոնտեյների ներսում, երբ տարրերը չեն զբաղեցնում ողջ հասանելի տարածքը:
align-items Հատկանշում է հավասարեցում տարրերի միջև ճկվող կոնտեյների ներսում:
align-self Հատկանշում է հավասարեցում ընտրված տարրերի համար ճկվող կոնտեյների ներսում:
flex Հատկանշում է տարրի երկարությունը՝ հարաբերված մնացածի հետ:
flex-basis Հատկանշում է ճկվող տարրի սկզբնական երկարությունը:
flex-direction Հատկանշում է ճկվող տարրերի ուղղությունը:
flex-flow Հատկանշում է flex-direction և flex-wrap հատկույունները կրճատ գրելաձևով:
flex-grow Հատկանշում է, թե որքան պետք է աճի տարրը՝ հարաբերված մնացածի հետ:
flex-shrink Հատկանշում է, թե ինչպես տարրը պետք է նեղանա՝ հարաբերված մնացածի հետ:
flex-wrap Հատկանշում է, արդյո՞ք ճկվող տարրերը պետք է տեղափոխվեն, թե ոչ:
justify-content Հատկանշում է հավասարեցում տարրերի միջև, ճկվող կոնտեյների ներսում, երբ տարրերը չեն ձբաղեցնում ողջ հասանելի տարածքը:
marginՀատկանշում է սահմանային բոլոր հատկությունները կրճատ գրելաձևով:
margin-bottomՀատկանշում է տարրի ստորին սահմանը:
margin-leftՀատկանշում է տարրի ձախ սահմանը:
margin-rightՀատկանշում է տարրի աջ սահմանը:
margin-topՀատկանշում է տարրի վերին սահմանը:
max-heightՀատկանշում է տարրի մաքսիմալ բարձրությունը:
max-widthՀատկանշում է տարրի մաքսիմալ լայնությունը:
min-heightՀատկանշում է տարրի մինիմալ բարձրությունը:
min-widthՀատկանշում է տարրի մինիմալ լայնությունը:
order Հատկանշում է ճկվող տարրի հերթականությունը՝ հարաբերված մնացածի հետ:

Տեքստ

letter-spacingԱվելացնում կամ նվազեցնում է տարածությունը սիմվոլների միջև տեքստում:
line-heightՀատկանշում է տողի բարձրությունը:
text-alignՀատկանշում է տեքստի հորիզոնական հավասարեցումը:
text-indentՀատկանշում է առաջին տողի հեռավորությունը տեքստում:
text-transformԿառավարում է տեքստի կապիտալիզացիան:
user-selectԿառավարում է նշված տեքստի կամ այլ տարրելի պահելաձևը էջում:
white-spaceՀատկանշում է, թե ինչպես է սպիտակ տարածությունը կարգավորվում տարրի ներսում:
word-break Հատկանշում է տողադարձի կանոններ ոչ CJK սքրիփթների համար:
word-spacingԱվելացնում կամ նվազեցնում է տարածությունը բառերի միջև տեքստում:
word-wrap Թույլատրում է երկար, չկոտրվող բառերին կոտրվել և տեղափոխվել հաջորդ տող:

Տեքստի դեկորացիա

text-decorationԱվելացնում է դեկորացիա տեքստին:
text-shadow Ավելացնում է շողք տեքստին:

Տառատեսակ

fontՀատկանշում է տառատեսակային բոլոր հատկությունները կրճատ գրելաձևով:
font-familyՀատկանշում է տառատեսակի ընտանիք տեքստի համար:
font-sizeՀատկանշում է տեքստի տառատեսակի չափսը:
font-styleՀատկանշում է տառատեսակի ոճ տեքստի համար:
font-variantՀատկանշում է, արդյո՞ք տեքստը պետք է պատկերվի small-caps տառատեսակով, թե ոչ:
font-weightՀատկանշում է տառատեսակի հաստությունը:

Գրելու եղանակներ

directionՀատկանշում է տեքստի գրելու ուղղությունը:
unicode-bidiՕգտագործվում է direction հատկության հետ միասին հատկանշելու համար, արդյո՞ք տեքստը պետք է փոփոխվի բազմակի լեզուներ սպասարկելու համար փաստաթղթում, թե ոչ:

Աղյուսակ

border-collapseՀատկանշում է, արդյո՞ք պետք է աղյուսակի եզրագծերը միացված լինեն, թե ոչ:
border-spacingՀատկանշում է հարևան արկղերի միջև հեռավորությունը:
caption-sideՀատկանշում է աղյուսակի վերնագրի դիրքավորումը:
empty-cellsՀատկանշում է, արդյո՞ք պետք է պատկերվեն եզրագծեր և ֆոն աղյուսակի դատարկ արկղերում, թե ոչ:
table-layoutՀատկանշում է աղյուսակի համար օգտագործվող նախագծման ալգորիթմ:

Ցանկեր և հաշվիչներ

counter-incrementԱվելացնում է մեկ կամ ավելի հաշվիչներ:
counter-resetՍտեղծում կամ զրոյացնում է մեկ կամ ավելի հաշվիչներ:
list-styleՀատկանշում է ցանկի բոլոր հատկությունները կրճատ գրելաձևով:
list-style-imageՀատկանշում է պատկեր, որպես ցանկի տարրի նշագիր:
list-style-positionՀատկանշում է, արդյո՞ք ցանկի տարրերի նշագրերը պետք է հայտնվեն պարունակության հոսքի ներսում, թե դրսում:
list-style-typeՀատկանշում է ցանկի տարրերի նշագրման տեսակը:

Անիմացիա

animation Հատկանշում է անիմացիոն բոլոր հատկությունները կրճատ գրելաձևով, բացի animation-play-state հատկությունից:
animation-delay Հատկանշում է, թե երբ պետք է անիմացիան սկսի:
animation-direction Հատկանշում է, արդյո՞ք անիմացիան պետք է խաղա հակառակ յուրաքանչյուր ցիկլում, թե ոչ:
animation-duration Հատկանշում է, թե քանի վայրկյան կամ միլիվայրկյան է անհրաժեշտ անիմացիային մեկ ցիկլ ավարտելու համար:
animation-fill-mode Հատկանշում է, թե ինչ արժեքներ են կիրառվում անիմացիայի կողմից նրա կատարման ժամանակից դուրս:
animation-iteration-count Հատկանշում է, թե քանի անգամ անիմացիան պետք է խաղա:
animation-name Հատկանշում է անվանում @keyframes անիմացիայի համար:
animation-play-state Հատկանշում է, արդյո՞ք անիմացիան պետք է սկսի, թե կանգնեցված լինի:
animation-timing-function Հատկանշում է անիմացիայի կորության արագությունը:

Փոխակերպում

backface-visibility Հատկանշում է, արդյո՞ք տարրը պետք է լինի տեսանելի, երբ այն էկրանի տեսադաշտում չէ:
perspective Հատկանշում է հեռանկար, թե ինպես են 3D տարրերը դիտվում:
perspective-origin Հատկանշում է 3D տարրերի ստորին դիրքավորումը:
transform Հատկանշում է 2D կամ 3D փոխակերպում տարրին:
transform-origin Թույլ է տալիս փոփոխել դիրքավորումը փոխակերպվող տարրերում:
transform-style Հատկանշում է, թե ինչես են գեներացվում ներդրված տարրերը 3D տարածությունում:

Անցումներ

transition Հատկանշում է չորս անցումային հատկությունները կրճատ գրելաձևով:
transition-delay Հատկանշում է, թե երբ պետք է անցումային ազդեցությունը սկսի:
transition-duration Հատկանշում է, թե քանի վայրկյան կամ միլիվայրկյան է հարկավոր անցումային ազդեցության ավարտի համար:
transition-property Հատկանշում է այն CSS հատկության անվանումը, որի համար նախատեսված է անցումային ազդեցությունը:
transition-timing-function Հատկանշում է անցումային ազդեցության կորության արագությունը:

Բազային օգտվողի ինտերֆեյս

box-sizing Հատկանշում է, թե ինչ չափսեր պետք է ներառվեն (լայնություն և բարձրություն):
contentՕգտագործվում է :before և :after կեղծ սելեքթորների հետ, գեներացված պարունակություն ներդնելու համար:
cursorՀատկանշում է մկնիկի ցուցադրվող սլաքի/կուրսորի տեսակը:
outlineՀատկանշում է ուրվագծի բոլոր հատկությունները կրճատ գրելաձևով:
outline-colorՀատկանշում է ուրվագծի գույնը:
outline-offset Հատկանշում է ուրվագծի և եզրագծի միջև հեռավորությունը:
outline-styleՀատկանշում է ուրվագծի ոճը:
outline-widthՀատկանշում է ուրվագծի լայնությունը:
resize Հատկանշում է, արդյո՞ք տարրի չափսերը փոփոխվող են օգտվողի կողմից, թե ոչ:
text-overflow Հատկանշում է, թե ինչ պետք է տեղի ունենա, երբ տեքստը լրացնում է պարունակիչ տարրը:

Բազմասյունակային նախագծում

column-count Հատկանշում է սյունակների թիվը, որին պետք է բաժանվի տարրը:
column-gap Հատկանշում է սյունակների միջև հեռավորությունը:
column-rule Հատկանշում է սյունակային կանոնների բոլոր հատկությունները կրճատ գրելաձևով:
column-rule-color Հատկանշում է սյունակների միջև կանոնի գույնը:
column-rule-style Հատկանշում է սյունակների միջև կանոնի ոճը:
column-rule-width Հատկանշում է սյունակների միջև կանոնի լայնությունը:
column-span Հատկանշում է, թե քանի սյունակների պետք է բաժանվի տարրը:
column-width Հատկանշում է սյունակների լայնությունը:
columns Հատկանշում է column-width և column-count հատկությունները կրճատ գրելաձևով:

Արտաբերված մեդիա

page-break-afterՀատկանշում է էջի ընդհատման պահելաձևը տարրից հետո:
page-break-beforeՀատկանշում է էջի ընդհատման պահելաձևը տարրից առաջ:
page-break-insideՀատկանշում է էջի ընդհատման պահելաձևը տարրի ներսում:

Արտաբերված մեդիայի գեներացված պարունակություն

quotesՀատկանշում է մեջբերման նշագրման տեսակը ներդրված/ներկառուցված մեջբերումների համար:

@-Կանոն

@font-face Հատկանշում է կանոն, որը թույլ է տալիս վեբ կայքերին ներբեռնել և օգտագործել web-safe տառատեսակներից բացի այլ տառատեսակներ:
@keyframes Հատկանշում է անիմացիա:
@media Այս կանոնի միջոցով դուք կարող եք գրել տարբեր CSS կոդ տարբեր մեդիա տեսակների համար:

Այլ

!important Սահմանում է ավելի կարևոր նշանակություն ունեցող կանոն:
linear-gradient Գրադիենտները թույլ են տալիս ցուցադրել հարթ փոխանցումներ երկու կամ ավելի հատկանշված գույների միջև:
radial-gradient Շառավղային գրադիենտը սահմանվում է իր կենտրոնից: