Ֆոնային պատկերի դիրքը


 CSS ում տրվում է background-position հատկության միջոցով, որի արժեքները կարելի է տալ ինչպես, կոորդինատներով, այնպես էլ բանալի բառերով։ 

Բանալի բառերի տրման դեպքում background-positionը կարող է ընդունել 

left-top

Left-center
Left-bottom
center-top

Center center
center bottom
right-top
right-center
right-bottom

Կոորդինատներով տալու դեպքում background-position հատկության արժեքները տալու դեպքում այն արելի է տալ ինչպես px,  այնպես էլ %

Ֆոնի ֆիկսումը

CSS ում ֆոնային պատկերը ֆիկսվում է bacjground-atachment հատկութան միջոցով։

Ֆոնայինհատկություններիկրճատգրառումը 

Ֆոնային պատկերի չափերը կարելի է փոփոխել background-size հատկության միջոցո, որը կարող է ունենալ 2 արժեք`

    Background-size: 100% 100%

Առաջին արժեքը ցույց է տալիս ֆոնային պատկերի լայնությունը, իսկ երկրորդ արժեքը ցույց է տալիս ֆոնային պատկերի բարձրությունը։ 

Background-size հատկության արժեքները կարելի է տալ չափի ցանկացած միավորով։

Float հատկություն

Ընտհանրապես վեբ էջերի կմաղքը ստեղծում են css ի float հատկութան միջոցով։ 

HTML5ի նոր թեգեր

<section></section> ստեղծում է բլոկ

<article></article> ստեղծում է բլոկ հոդվածների համար

<header></header> ստեղծում է բլոկ կայքի գլխարկի համար

<footer></footer> ստեղծում է բլոկ կայքի ստորին մասի համար

<aside></aside> ստեղծում է կողքի բլոկ

<nav></nav> ստեղծում է նավիգացիոն բլոկ

<main></main> ստեղծված է կայքի հիմնական բովանդակության համար

Դիրքորոշումը css-ում 

Բլոկի դիրքը css-ում տրվում է position հատկության միջոցով։

Position-որը կարող է ընդունել հետևյալ արժեքներից որևէ մեկը՝

Absolute-բացարձակ դիրքորոշում

Relative- Հարաբերական դիրքորոշում

fixed-ֆիքսված դիրքորոշում

Static-ստասիկ դիրքորոշում

Եթե մենք որևէ էլեմենտի տանք position absolut և չտանք կոորդինատներ ապա նրան հաջորդող էլեմենտները կգրավեն այդ էլեմենտի տեղը։ 

Եթե էլեմենտին տանք կոորդինատներ, ապա այդ էլեմենտի դիրքը կտրվի բրաուզերի պատուհանի նկատմամբ։ 

Եթե ծնող էլեմենտին տանք position:absolut և տանք կոորդինատներ ինչպես նաև ժառանգ էլեմենտին տանք position:absolut և տանք կոորդինատներ ապա ժառանգ էլեմենտի դիրքը կտրվի ծնող էլեմենտի նկատմամբ։

Leave a Reply

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