CSS-LISTS
list-style
list-style -ն ունիվերսալ հատկություն է, որում սահմանվում է ցուցակի մարկերների տեսակը, դրանց դիրքը, կամ մարկերների փոխարեն նկարներ օգտագործել։
Արժեքներն ունեն հետևյալ հերթականությունը՝
նախ նշվում է մարկերի տեսակը(list-style-type),
հետո դիրքը(list-style-position),
վերջում նշվում է նկարի հասցեն, որը պետք է ցուցադրվի որպես մարկեր(list-style-image):
Արժեքներն իրարից բաժանվում են պրոբելներով։ Ոչ մեկը չի հանդիսանում պարտադիր՝ կարելի է բաց թողնել ցանկացածը։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | Չկա |
| Ժառանգվում են | Ոչ |
| Կիրառվում են | <dd>, <dt>, <li>, <ol> <ul>-ի, ինչպես նաև բոլոր էլեմենտների հետ, որոնց մեջ նշված է՝ display:list-item |
| Ենթարկվում է անիմացիայի | Ոչ |
ul {
list-style: circle inside;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<ul>
Հետագայում կուսումնասիրենք հետևյալ լեզուները՝
<li>Bootstrap / Sass</li>
<li>Javascript</li>
<li>Jquery</li>
<li>React</li>
</ul>
</body>
</html>
list-style-type
list-style-type – սահմանում է ցուցակի մարկերների տեսակը։ Օգտագործվում է միայն, երբ list-style-image-ը հավասար է none -ի:
Մարկերներն իրարից տարբերվում են մարկերային ցուցակով(<ul>) և համարակալված ցուցակով(<ol>)։
Հակիրճ տվյալներն են՝
| Նախասահմանված արժեքը | disc-<ul>-ի համար decimal-<ol>-ի համար |
| Ժառանգվում են | Այո |
| Կիրառվում են | <li>, <ol> <ul>-ի, ինչպես նաև բոլոր էլեմենտների հետ, որոնց մեջ նշված է՝ display:list-item |
| Ենթարկվում է անիմացիայի | Ոչ |
Արժեքներն են՝
Մարկերային ցուցակ`
circle – շրջանաձև մարկերներ
disc – կետի տեսքով մարկերներ
square – քառակուսու տեսքով մարկերներ
Համարակալված ցուցակ՝
armenian – հայատառ համարակալում ( Ա, Բ, Գ, Դ․․․․․ )
decimal – արաբական թվեր ( 1, 2, 3, 4…..)
decimal-leading-zero – արաբական թվեր՝ դիմացից զրո, տասից փոքր թվերի համար ( 01, 02, 03, 04…..)
georgian – վրացատառ համարակալում
lower-alpha կամ lower-latin – լատինական փոքրատառերով համարակալում (a, b, c, d….)
lower-greek – հունական փոքրատառերով համարակալում (α, β, γ, δ,…)
lower-roman – հռոմեական թվերով համարակալում՝ լատինական փոքրատառ (i, ii, iii, iv, v…..)
upper-alpha կամ upper-latin – լատինական մեծատառերով համարակալում (A, B, C, D….)
upper-roman – հռոմեական թվերով համարակալում՝ լատինական մեծատառ(I, II, III, IV, V….)
none – չեղարկում է ցուցակի համար մարկերները։
ul {
list-style-type: armenian;
}
list-style-position
list-style-position – սահմանում է մարկերների դիրքը՝ տեքստի հետ, կամ տեքստից առանձին։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | outside |
| Ժառանգվում են | Այո |
| Կիրառվում են | <dd>, <dt>, <li>, <ol> <ul>-ի, ինչպես նաև բոլոր էլեմենտների հետ, որոնց մեջ նշված է՝ display:list-item |
| Ենթարկվում է անիմացիայի | Ոչ |
Արժեքներն են՝
inside – մարկերները հանդիսանում է տեքստի մասը։
outside – մարկերները տեղադրվում են տեքստից առանձին։
list-style-image
list-style-image – մարկերների փոխարեն սահմանում է որևէ նկար։
Հակիրճ տվյալներ՝
| Նախասահմանված արժեքը | none |
| Ժառանգվում են | Այո |
| Կիրառվում են | <dd>, <dt>, <li>, <ol> <ul>-ի, ինչպես նաև բոլոր էլեմենտների հետ, որոնց մեջ նշված է՝ display:list-item |
| Ենթարկվում է անիմացիայի | Ոչ |
Արժեքներն են՝
none – list-style-image հատկությունը ժառանգվում է բոլոր դուստր էլեմենտների կողմից։ Եթե անհրաժեշտ է դուստրերից որևէ մեկին առանց նկարի մարկեր սահմանել, ապա տվյալ էլեմենտի list-style-image-ը հավասար պետք է լինի none-ի։
url() – սահմանում է տվյալ նկարի հարաբերական կամ բացարձակ հասցեն․ հասցեն կարելի է նշել մեկ կամ կրկնակի չակերտներով( ‘ կամ “ ), կամ առանց դրանց։
ul {
list-style-image: url(icon20.png);
}
.li01 {
list-style-image: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<ul>
Հետագայում կուսումնասիրենք հետևյալ լեզուները՝
<li class="li01">Bootstrap / Sass</li>
<li>Javascript</li>
<li>Jquery</li>
<li>React</li>
</ul>
</body>
</html>
Armenian 
Russian