HTML ir CSS pradedantiesiems (Dalis 35): Sąrašai ir skaitikliai

Naudodamiesi šiuo vadovėliu galite stilizuoti sąrašus naudodami CSS savybes, kurios yra parodytos. Informacija taikoma HTML elementams ul ir ol. Taigi, galite pritaikyti tvarką ir be tvarkos sąrašus savo pageidavimams.

Bendri sąrašo nurodymai

Stilių list-style sudaro trys šios savybės:

• list-style-type

• list-style-position

• list-style-image

Panaudoję stilių list-style, galite valdyti simbolių prie sąrašų ir jų įtraukimo įtraukimą. Nurodytos savybės yra kiekviena atskirta kableliu. Tvarka nesvarbi. Taip pat neprivalu nurodyti reikšmės kiekvienai savybei.

Čia pateikiamas pavyzdys:

<!DOCTYPE html>
 <html>
 <head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
 <style>
 ul {
    list-style:square;
 }
 </style>
 </head>
 <body>
 <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
 </ul>
 </body>
 </html>

Naršyklėje tai atrodo taip:

HTML & CSS pradedantiesiems (dalis 35): Sąrašai ir skaitikliai

Grafiniai sąrašų ženklai

Grafinį simbolį prie sąrašo galite nurodyti patys. Naudojama savybė list-style-image. Galimos šios reikšmės:

• url – vaizdo pavadinimas ir galbūt kelias iki failo

• none – simbolis nebus rodomas.

Pavyzdys:

ul { 
    list-style-image: url(bullet.gif); 
 }

Atkreipkite dėmesį, kad kelias iki nurodyto URL vaizdo yra teisingas.

HTML ir CSS pradedantiesiems (dalis 35): Sąrašai ir skaitikliai

Jei bus nurodytas neteisingas kelias, naršyklės turėtų grįžti prie standartinio sąrašo simbolio.

Sąrašo ženklų padėtis

Naudodami list-style-position, nustatote, kaip numeracijos ar sąrašo ženklai turėtų elgtis įtraukose atžvilgiu.

• inside – pirmas eilutė yra tokia toli įstumta, kad sąrašo ženklas ir sąrašo įrašas baigiasi kairiai

• outside – sąrašo ženklas stovi kairėje nuo sąrašo įrašo.

Šiame pavyzdyje naudojamos abi reikšmės inside ir outside.

<!DOCTYPE html>
 <html>
 <head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
 <style>
 ul.a {
    list-style-position:inside;
 }
 ul.b {
    list-style-position:outside;
 }
 </style>
 </head>
 <body>
 <p>Viduje sąrašas:</p>
 <ul class="a">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
 </ul>
 <p>Išorės sąrašas:</p>
 <ul class="b">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
 </ul>
 </body>
 </html>

Taigi galite iš karto pamatyti, kokių skirtingų poveikių turi šios dvi reikšmės.

HTML ir CSS pradedantiesiems (35 dalis): Sąrašai ir skaitikliai

Sąrašo ženklų išvaizda

Galite išreikštinai nustatyti simbolius, skirtus bullet ar numeruotų sąrašų zenklams. Taip pat galite paveikti numeruotų sąrašų rodymą. Naudokite savybę list-style-type. Šioje savybėje yra leidžiamos šios reikšmės:

• decimal – skirta ol sąrašams: Numeracija 1, 2, 3 ir tt.

• lower-roman – skirta ol sąrašams: Numeracija i., ii., iii. ir t.t.

• upper-roman – skirta ol sąrašams: Numeracija I., II., III., IV ir t.t.

• lower-alpha arba lower-latin – skirta ol- sąrašams: Numeracija I., II., III., IV. ir t.t.

• upper-alpha arba upper-latin – skirta ol sąrašams: Numeracija A., B., C., D. ir t.t.

• disc – skirta ul sąrašams: užpildytas apskritimas kaip ženklelis

• circle – skirta ul sąrašams: tuščias apskritimas kaip ženklelis

• square – skirta ul sąrašams: stačiakampis kaip ženklelis

• none – nei ženklelis, nei numeracija

• lower-greek – skirta ol sąrašams: numeracija graikų raidėmis

• hebrew – skirta ol sąrašams: numeracija hebrajų raidėmis

• decimal-leading-zero – skirta ol sąrašams: numeracija su pradine nulė 0: 01., 02., 03., 04. ir t.t.

• cjk-ideographic – skirta ol sąrašams: numeracija ideografiniais simboliais

• hiragana – skirta ol sąrašams: japoniška numeracija (mažosiomis raidėmis)

• katakana – skirta ol sąrašams: japoniška numeracija (didžiosios raidės)

• hiragana-iroha – skirta ol sąrašams: japoniška numeracija (mažosiomis raidėmis)

• katakana-iroha – skirta ol sąrašams: japoniška numeracija (didžiosios raidės)

Šiuo pavyzdyje naudojamos kai kurios iš išvardytų variantų.

<!DOCTYPE html>
 <html>
 <head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
 <style>
 ul.a {
    list-style-type:circle;
 }
 ul.b {
    list-style-type:square;
 }
 ol.c {
    list-style-type:upper-roman;
 }
 ol.d {
    list-style-type:lower-alpha;
 }
 </style>
 </head>
<body> 
   <ul class="a">   
      <li>HTML</li>   
      <li>CSS</li>
      <li>JavaScript</li>
   </ul> 
   <ul class="b">   
      <li>HTML</li>   
      <li>CSS</li>   
      <li>JavaScript</li> 
   </ul> 
   <ol class="c"> 
      <li>HTML</li>   
      <li>CSS</li>   
      <li>JavaScript</li> 
   </ol> 
   <ol class="d">   
      <li>HTML</li>   
      <li>CSS</li>   
      <li>JavaScript</li> 
   </ol> 
</body> 
</html>

Naršyklėje atsiranda toks vaizdas:

HTML ir CSS naujokams (dalis 35): Sąrašai ir skaitikliai

Skaitiklis

Per ol sąrašus galima numeruoti turinį. Sudėtingesnėse taikymo srityse šis numeravimo būdas vis dėlto nėra iš tikrųjų praktiškas. CSS čia siūlo alternatyvą - skaitiklius.

Toliau parodau, kaip galite naudoti skaitiklius.

Pirma, nustatysiu naują skaitiklį body elementui.

body { 
    counter-reset: kapitel; 
 }

Dėka šio apibrėžimo dokumente egzistuoja skaitiklis kapitel. Šį skaitiklį galima dabar naudoti.

h1 { 
    counter-increment: kapitel; 
 }

Naudodamasis parodyta sintakse, skaitiklis bus automatiškai padidinamas reikšme 1, kai pasirodys naujas h1 elementas. Problema: Kol kas tai nesimato numeravime. Tai galima lengvai pakeisti naudojant pseudo elementus.

h1::before {
   content: counter(kapitel) ". ";
 }

Pilnas taikymas galėtų atrodyti taip:

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>PSD-Tutorials.de</title>
 <style>
 body {
    counter-reset: kapitel;
 }
 h1 {
    counter-increment: kapitel;
 }
 h1::before {
    content: counter(kapitel) ". ";
 }
 </style>
 </head>
 <body>
 <h1>Kapitel</h1>
 <h1>Kapitel</h1>
 </body>
 </html>

O štai naršyklėje gaunamas rezultatas:

HTML ir CSS pradedantiesiems (35 dalis): Sąrašai ir skaitikliai

Rodant šį pavyzdį, ::before išvedamas atitinkamas numeris prieš h1 elementą. Kad skaičius tiesiogiai neiškrito į pavadinimo tekstą, po skaičiaus įdedamas taškas ir tarpas.

content: counter(kapitel) ". "

Taip pat galimos įdėjimai. Tam reikia apibrėžti skaitiklį ten, kur galiausiai jis turėtų pradėti nuo pradžios.

h1 {
   counter-increment: kapitel;
   counter-reset: unterkapitel;
 }

Taigi šiame pavyzdyje skaitiklis visada grąžinamas, kai pasirodo naujas h1 elementas. Sekantis pavyzdys parodo tipišką naudojimą su įdėtais skaitikliais.

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>PSD-Tutorials.de</title>
 <style>
 body {
    counter-reset:kapitel;
 }
 h1 {
    counter-reset:unterkapitel;
 }
 h1:before {
    counter-increment:kapitel;
    content: counter(kapitel) ". ";
 }
 h2:before {
    counter-increment:unterkapitel;
    content:counter(kapitel) "." counter(unterkapitel) " ";
 }
 </style>
 </head>
 <body>
 <h1>Kapitel</h1>
 <h2>Unterkapitel</h2>
 <h2>Unterkapitel</h2>
 <h2>Unterkapitel</h2>
 <h1>Kapitel</h1>
 <h2>Unterkapitel</h2>
 <h2>Unterkapitel</h2>
 <h2>Unterkapitel</h2>
 </body>
 </html>

Naršyklėje tai atrodo taip:

HTML ir CSS pradedantiesiems (35 dalis): Sąrašai ir skaitikliai

Pavyzdžiai parodė, kokios galingos yra skaitikliai.

HTML & CSS pradedantiesiems (34 dalis): Rėmelis

HTML ir CSS pradedantiesiems (dalis 36): Dėžių modelis.