css- կասկադային-ոճային աղյուսակներ

css ֆայլը իրենից ներկայացնում է որոշակի քանակությամբ ոճեր։ Ոճը դա հրահանգ է բրաուզերին՝ թե բրաուզերը տվյալ էլեմենտը ինչպես ցուցադրի վեբ-էջում։

css-ում ոճն ունի հետևյալ տեսքը։

սելեկտոր{

հատկություն{: արժեք;

հատկություն 2 : արժեք;

.

.

հատկություն n: արժեք;

}

Սելեկտորներ

css-ում սելեկտորները լինում ե հետևյալ տիպերի

1. թեգերի սելեկտոր
2. դասերի(class) սելեկտոր
3. id սելեկտոր
4. խմբային սելեկտոր
5. ժառանգների սելեկտոր

Թեգերի սելեկտորն ունի հետևյալ տեսքը՝

թեգի անունը{

հատկություն;արժեք

}

Դասերի սելեկտորն ունի հետևյալ տեսքը՝

դասի անունը{

հատկություն; արժեք

}

Id սելեկտորն ունի հետևյալ տեսքը՝

#id-ի անունը {

հատկություն։ արժեք;

}

Օրինակ՝

#paragraph1 {

color։ #0000ac;

}

Html-ի կոդը բրաուզերի համար իրենից ներկայացնում է ծառ, որի հիմքում ընկած է html թեգը։ Այսինքն html թեգը հանդիսանում է այդ ծառի արմատը։ Մյուս թեգերը հանդիսանում են հանգույցներ։ Html թեգը մնացած բոլոր թեգերի համար հանդիսանում է ծնող թեգ։ Իսկ մնացած թեգերը html թեգի համար հանդիսանում են ժառանգ թեգեր։

HOVER պսեվդոսելեկտորը

Եթե ընտրված էլեմենտին տալիս ենք HOVER պսեվդոսելեկտորը, մկնիկը վրան պահելիս նրա հատկությունները կփոխվեն(տառերի գույնը, չափը, ֆոնը և այլն)։

Տառատեսակները css-ում

css-ում տառատեսակը  տրվում  է font-family հատկության միջոցով։

Եթե Verdana տառատեսակը  չի աշխատում, միանում է Tahoma տառատեսակը։Նույն սկզբունքով են աշխատում նաև Verdana,Tahoma, sans-serif տառատեսակները։

Եթե տառատեսակի անվանումը բաղկացած է  մեկից ավելի բառերից, ապա դա գրվում է փակագծերի մեջ։

Տառաչափը css-ում

css-ում տառաչափը տրվում է font-size հատկության միջոցով։

css-ում օգտագործվում են չափման հետևյալ միավորները՝

1. em, 1em=12pt, բազային է 1em-ը
2. pixel, բազային է 16px-ը, 1em= 12pt= 16px
3. point, բազային է 12pt-ը, 1pt= 1/72in
4. բանալի բառեր, բազային է medium-ը

small- փոքր տառաչափ

large- մեծ տառաչափ

x-large- շատ մեծ տառաչափ

x-small- շատ փոքր տառաչափ

xx-large- շատ շատ մեծ տառաչափ

xx-small- շատ շատ փոքր տառաչափ

larger- ավելի մեծ տառաչափ

smaller- ավելի փոքր տառաչափ

medium- միջին տառաչափ

5. %, տառաչափը տրվում է ծնող էլեմենտի տառաչափի համեմատ

Տառերի հաստությունն ու թեքությունը

css-ում տառերի թեքությունը տրվում է font-style հատկության միջոցով։

css-ում տառերի հաստությունը տրվում է font-weight հատկության միջոցով, որի արժեքները կարող են տրվել ինչպես բանալի բառերով, այնպես էլ թվերով։

Թվերով տրման դեպքում font-weight հատկությունը կարող է ընդունել հետևյալ արժեքներից որևէ մեկը՝ 100;200․․․900։

Բառերով տրման դեպքում՝ font-weight հատկությունը կարող է ընդունել հետևյալ արժեքներից որևէ մեկը՝ bold, light, normal, bolder, lighter:

Բազային է normal-ը կամ 400-ը։

Տեքստի ձևավորում

css-ում ձևավորումը տրվում է text-decoration հատկության միջոցով, որը կարող է ընդունել հետևյալ արժեքներից որևէ մեկը՝

• underline- տեքստը կընդգծվի ներքևից
• overline- տեքստը կընդգծվի վերևից
• line-through- կընդգծվի տեքստի վրա
• none- վերացնում է տեքստի ընդգծումը

Տեքստի հավասարեցում և պարբերության սկիզբ

css-ում տեքստը հավասարեցնում են text-align հատկության միջոցով, որը կարող է ընդունել հետևյալ արժեքներից որևէ մեկը՝

left- տեքստը հավասարեցնել ձախից

right-տեքստը հավասարեցնել աջից

center- տեքստը հավասարեցնել կենտրոնով

justify- տեքստը հավասարեցնել երկու կողմից

Պարբերության սկիզբը css-ում տրվում է text-indent հատկության միջոցով, որի արժեքները կարող են տրվել չափի ցանկացած միավորներով։

Միջտողային տարածություն

css-ում միջտողային տարածությունը տրվում է line-height հատկության միջոցով:

Կրճատ գրառումներ

Տառատեսակներին վերաբերվող հատկությունները կարելի է գրել կրճատ՝ 1տողով:

Եզրագիծ

css-ում html-ի էլեմենտները կարող են ունենալ եզրագծեր։ Հաստությունը տրվում է border-width հատկության միջոցով։ Ձևը տրվում է border-style հատկության միջոցով։ Գույնը տրվում է border-color հատկության միջոցով։

Մեկնաբանությունները

css-ում մեկնաբանությունները ստեղծվում են հետևյալ կերպ՝ /*մեկնաբանություն*/

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

none- եզրագծի բացակայություն

dotted- կետային

dashed- կետագծային

solid-հոծ

double- կրկնակի

groove- ակոսի տեսքով

ridge- ռելիեֆային

inset- խտություն դեպի ներս

outset- խտություն դեպի դուրս

Բլոկային և inline էլեմենտներ

html-ում էլեմենտները կարող են լինել բլոկային և inline։ Բլոկային էլեմենտների լայնությունը ի սկզբանե հավասար է լինում էջի ամբողջ լայնությանը։ Հետևաբար նոր բլոկային էլեմենտ ստեղծելիս այն ստեղծվում է նոր տողից։ Բլոկային էլեմենտներն իրենց մեջ կարող են ներառել այլ բլոկային էլեմենտներ և inline էլեմենտներ։ Բլոկային էլեմենտներ են <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ol>, <ul>, <li> և այլն։ Բլոկային էլեմենտ է <div> երկտարր թեգը, որն իրենից ներկայացնում է ֆունդամենտալ բլոկ։

<div> թեգը իր մեջ կարող է ներառել այլ բլոկային էլեմենտներ և inline էլեմենտներ։ inline էլեմենտների լայնությունը ի սկզբանե հավասար է իրենց բովանդակության լայնությանը։ Հետևաբար նոր inline էլեմենտ ստեղծելիս՝ այն տեղադրվում է նախորդ inline էլեմենտի կողքին։ inline էլեմենտները իրենց մեջ կարող են ներառել այլ inline էլեմենտներ։ inline էլեմենտներ են <a>, <b>, <strong>, <em>, <input>, և այլ թեգերը։ inline էլեմենտ է իրենից ներկայացնում <span> երկտարր թեգը։

Ցուցակները css-ում

css-ում ցուցակների համարակալումը տրվում է list-style-type հատկության միջոցով, որը կարող է ընդունել հետևյալ արժեքներից որևէ մեկը՝

circle- օղակների տեսքով

square- քառակուսիների տեսքով

lower-latin — լատիներեն փոքրատառերով

upper-latin — լատիներեն մեծատառերով

lower-roman — հռոմեական փոքրատառերով

upper-roman — հռոմեական մեծատառերով

lower-armenian — հայերեն փոքրատառերով

upper-armenian — հայերեն մեծատառերով

none- վերացնում է համարակալումը

Ցուցակների համարակալումը կարող է լինել նաև նկարի տեսքով։ Որպեսզի ցուցակների համարակալումը լինի նկարի տեսքով, պետք է օգտվել list-style-image հատկության միջոցով։

Ցուցակների համարակալման դիրքը կարելի է տալ list-style-position հատկության միջոցով, որը կարող է ընդունել հետևյալ արժեքներից որևէ մեկը՝

inside- նշիչները կտեղակայվեն բլոկի ներսում

outside- նշիչները կտեղակայվեն բլոկից դուրս

Կարելի է ցուցակների համարակալմանը վերաբերվող հատկությունները գրել կրճատ՝ մեկ տողով, list-style հատկության միջոցով:

Էլեմենտների հատկությունների առաջնայնությունը

թեգերի սելեկտոր- 1 միավոր

դասերի(class) սելեկտոր- 10 միավոր

id սելեկտոր- 100 միավոր

ներկառուցված ոճ- 1000 միավոր

Padding(ներքին բացատ), margin(արտաքին բացատ)

css-ում բլոկի ներքին բացատը ստեղծվում է padding հատկության միջոցով։ Ներքին բացատը եզրագծի նման ունի 4 կողմ։ Դրանք են՝

• padding-top
• padding-right
• padding-left,
• padding-bottom

Բլոգի արտաքին բացատը ստեղծվում է margin հատկության միջոցով։ Արտաքին բացատը ներքին բացատի նման ունի 4 կողմ։ Դրանք են՝

• margin-top
• margin-right
• margin-left,
• margin-bottom

Բլոկի լայնությունը տրվում է width հատկության միջոցով, որի արժեքները կարելի է տալ չափի ցանկացած միավորներով։

Որպեսզի բլոկը տեղաշարժվի էջի կենտրոն, պետք է նրա margin left-ի և margin right -ի արժեքները լինեն auto։

Բլոկի բարձրությունը

Բլոկի բարձրությունը տրվում է height հատկության միջոցով։

Որպեսզի բովանդակությունը բլոկից դուրս չմնա, այդ բլոկին տալիս են overflow հատկությունը, որը կարող է ընդունել հետևյալ արժեքներից որևէ մեկը՝

• hidden- բլոկից դուրս մնացած տեքստը կդառնա անտեսանելի
• auto- կառաջանա ուղղաձիգ scroll
• scroll- կառաջանան ուղղաձիգ և հորիզոնական scroll-ներ

inline էլեմենտի փոխակերպումը բլոկային էլեմենտի, և բլոկային էլեմենտի փոխակերպումը inline էլեմենտի

inline էլեմենտներն ի տարբերություն բլոկային էլեմենտների կարող են ունենալ միայն padding-left և padding-right, ինչպես նաև margin-left և margin-right։

inline էլեմենտը բլոկային էլեմենտ դարձնում են display հատկության միջոցով, տալով block արժեքը։ Իսկ բլոկային էլեմենտը inline էլեմենտ դարձնում են display հատկության միջոցով, տալով inline արժեքը։

Ֆոնի գույն և պատկեր

ֆոնի գույնը տրվում է background-color հատկության միջոցով։

Ֆոնի գույնը տարածվում է բլոկի բովանդակության վրա և padding-ի վրա։

Ֆոնային պատկերը css-ում

Ֆոնային պատկերը css-ում տեղադրվում է  background-image հատկության  միջոցով։ Օրինակ՝ background-image: url(../images/bg.jpg);

․․/    նշանակում է վերադառնալ  մեկ թղթապանակ հետ։

outline  հատկությունը  ստեղծում է եզրագիծ, սակայն ի տարբերություն  border- ի այն բլոկի չափերը չի մեծացնում։

outline  հատկությունն օգտագործվում է վեբ էջում։

Ֆոնային պատկերի կրկնվելը

css-ում տրվում է background-repeat հատկության միջոցով, որը կարող է ընդունել հետևյալ արժեքներից որևէ մեկը՝

• no repeat- ֆոնային պատկերը չի կրկնվի
• repeat-x -ֆոնային պատկերը կկրկնվի հորիզոնական ուղղությամբ
• repeat-y -ֆոնային պատկերը կկրկնվի ուղղաձիգ ուղղությամբ