CSS Հատկություններ
Այստեղ պատկերված են CSS հատկություններն ըստ խմբերի: Ձախ կողմում հատկություններն են, իսկ աջ կողմում՝ նրանց բացատրությունները:
- նոր է CSS3-ում
Ֆոն և եզրագիծ
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 | Շառավղային գրադիենտը սահմանվում է իր կենտրոնից: |