CSS (կասկադային–ոճայինաղյուսակներ)
CSSի կոդը կազմված է ոճերից։ Ոճը դա հրահանգ է բրաուզերին, թե բրաուզերը ինչպես պատկերի տվյալ էլեմենտը վեբ էջում։
Սելեկտը {
Հատկություն1 : արժեք
Հատկություն 2 : արժեք
Հատկություն n :արժեք
}
CSS ումսելեկտորներըլինումենհետևյալտիպերի։
Թեգի սելեկտոր
Դասերի սելեկտոր
id սելեկտոր
Խմբային սելեկտոտր
Ժառանգների սելեկտոր
Թեգերի սելեկտորն ունի հետևյալ տեսքը
Թեգի անուն {
Հատկություն։ արժեք;
}
.class{
հատկություն: արժեք;
}
#id{
Հատկություն։ արժեք:
}
HTMLի փաստաթուղթը բրաուզերի համար իրենից ներկայացնում է ծառ որի արմատը HTML թեգն է, մնացած բոլոր թեգերը հանդիսանում են առդ ծաջի ճյուղերը։
HTML թեգը մնացած բոլոր թեգերի համար հանդիսանում է ծնող թեգ, իսկ մյուս թեգերը հանդիսանում են ժառանգ թեգեր։
<html> – <head>- <link>, <meta>,<title>
<body>-<p>, <h1>,<table>,<tr>,<th>,<td>,
Css ում տառատեսակը տրվում է font-family հատկության միջոցով
Css ում տառաչափը տրվում է font-size հատկության միջոցով որի արժեքները կարելի է տալ հետևյալ չափման միավորներով։
- em 1em=12pt ի սկզբանե տեքստի տառաչափը տրվում է 1em
- Px 1em=12pt=16px
- pt 1pt= 1/72 in ի սկզբանե տեքստի տառաչափը = 1pt
- Տոկոսներով
- Բանալի բառեր
small
large
x-large
x-small
xx-large
Xx-small
medium
Larger
smaller
Hover պսևդոսելեկտոր
Եթե որևէ սելեկտորին տանք այս հատկությունը ապա բոլոր արժեքները երևելի կլինեն միայն մկնիկը տվյալ էլեմենտին մոտեցնելիս։
CSS-ում տառերի թեքությունը տրվում է font-style հտակության միջոցով։
Տառերի հաստությունը տրվում է font-weight հատկության միջոցով, որի արժեքները տրվում են ինչպես թվերով այնպես էլ բանալի բառերով։
Բանալի բառերով տրման դեպքում font-weիght հատկությունը կարող է ընդունել հետևյալ արժեքներից որևէ մեկը։
tough
light
lighter
bold
normal
default
Թվերով տրման դեպքում font-weight հատկությունը կարող է ընդունել հետևյալ արռեքներից որևէ մեկը։
800, 400, 500,
Տեքստի դեկորացիա՝ ձևավորում։
CSSում տեքստի ձևավորումը տրվում է text-decoration հատկության միջոցով, որը կարող է ընդունել հետևյալ արժեքնրից որևէ մեկը՝
underline
overline
line-through
none-կհեռացվիտեքստի ընդգծումը
CSS տեքստը հավասարեցնում են text-align հատկության միջոցով, որն ընդունում է այս արժեքներից որևէ մեկը՝ left, right, center, justify
Պարբերության սկիզբը տրվում է text-indent հատկության միջոցով
Մոջտողային տարծությունը css ստեղծվում է line-height.
Կրճատգրառումներ
CSS ում տառատեսակները հետ կապված հատկությունները կարելի է գրել կրճատ մեկ տողով։
Օրինակ՝ font: italic bold 15px/1.5 Tahoma, sans-serif;
Եզրագիծ
CSS ում եզրագծի հաստությունը ստեղծվում է border-with հատկության միջոցով, որի արժեքները կարըլի է տալ ցանկացած միավորով, բայց հարմար է տալ px-ով։
Եզրագծի գույնը տրվում է border-color հատկութան միջոցով։
Իսկ եզրագծի ձևը տրվում է border-style հատկության միջոցով։
Border-style հատությունը ստանում է հետևյալ արժեքները՝
none-բացահայութուն
solid-հոծ
dotted-կետային
dashed-կետագծային
double-կրկնակի
groove-ակոսիտեսքով
ridge-ռելիեֆային
insert-խորությունդեպիներս
outset-խորությունդեպիդուրս
Blockայինև inline էլեմենտներ
HTML ում բոլոր էլեմենտները հիմնականում բաժանվում են 2 խմբի ՝ Blockային և inline էլեմենտներ
Բլոկային էլեմենտների լայնությունը ի սկզբանե հավասար է ամբողջ էջի լայնությանը հետևաբար մյուս բոլոկային էլեմենտը ստեղծելիս այն տեղաերվումէ նոր տողից, աջաջինի տակ։
Block-յին էլեմենտում կարող են գտնվել այլ block-ային և inline էլեմենտներ։
Block-այի էլեմենտ՝
P, h1-h6, ol, ul, li և այլ թեգեր։
Block-ային էլեմենտ է <div></div> թեգը, որն իրենից ներկայացնում է ֆունդամենտալբլոկ, որի մեջ կարող են գտնվել այլblock-ային և inline էլեմենտներ։
Inline էլեմենտի լայնությունը ի սկզբանե հավասար է նրա բովանդակության լայնությանը, հետևաբար հաջորդ inline էլեմենտը ստեղծելիս այն տեղադրվում է նախորդ inline էլեմենտի կողքին։ Inline էլեմենտում կարող են գտնվել միայն այլ inline էլեմենտներ։
Inline էլեմենտներ են <a>, <input>:
Inline էլեմենտ է <span></span>
Էլեմենտների հատկությունների առաջնայնությունը։
Առաջնայնության աղյուսակ
Թեգերի սելեկտոր-1միավոր
Class սելեկտոր-10 միավոր
Id սելեկտոր-100 միավոր
Ներկառուցված ոճ-1000 միավոր
wrapper p=
CSSում ցուցակները տրվում են list -style- type հատկության միջոցով, որը կարող է ընդունել հետևյալ միավորները՝
none վերացնում է նշիչները
Circle-օղակների տեսքով
Square-քառակուսիների տեսքով
lower-armenian—համարակալումը տրվում է հայերեն փոքրատառերով
Upper-armynian—համարակալումը տրվում է հայերեն մեծատառերով
lower-latin—համարակալումը տրվում է անգլերեն փոքրատառերով
Upper-latin—համարակալումը տրվում է անգլերեն մեծատառերով
Lower-roman-համարակալում է հռոմեականն փոքրատառերով
Upper-roman– համարակալում է հռոմեականն մեծատառերով
Ցուցակների համարակալում կարելի է տալ նաև նկարների տեսքով։
Ցուցակների համարակալում կարելի է տալ նաև նկարների տեսքով։
Դրա համար տալիս ենք list-style-image
../ գրվումէ մեկթղթապանակիցդուրսկալուհամար։
Նշիչների դիրքը տրվում է ՝list-tyle-position հատկության միջոցով, որը կարող է ընդունել հետևյալ արժեքներից որևէ մեկը՝
Inside-նշիչները կտեղափոխվեն բլոկների մեջ
outside-նշիչները կտեղափոխվեն բոլոկներից դուրս