Būna atvejų, kai reikia tekste paryškinti, pabraukti svarbesnę mintį, sukurti unikalią sąrašo išvaizdą, pakeisti teksto šriftą. Taip, jūs nesuklydote. Tokiu atveju į pagalbą ateina CSS.

Šriftai

Šriftams apibūdinti CSS turi keletą savybių: font-family, font-size, font-weight, font-style, font-variant. Apžvelkime kiekvieną savybę individualiai.

• font-family
  
  Išvertus pažodžiui iš anglų kalbos, font-family lietuviškai yra šrifto-šeima. Font-family savybė nustato pririoritizuotą (surašytą pagal eiliškumą) šriftų sąrašą, kuriuos gali atvaizduoti naršyklė. Panagrinėkime pavyzdį.
  
  

  body { font-family: Arial, Tahoma, Verdana, sans-serif; }

  
  Kaip matote, savybei buvo nustatytos netgi keturios skirtingos reikšmės, atskirtos kableliais. Tačiau gali kilti klausimas, kam reikia tiek reikšmių? Iš tikrųjų ši savybė gali turėti vieną, dvi, tris, penkias ar daugiau reikšmių. Deja, ne kiekvienoje operacinėje sistemoje yra visi šriftai. Pavyzdžiui, įprastoje Linux sistemoje nerasite standartinių Windows OS šriftų (Arial, Verdana) arba Windows sistemoje — MAC OS šrifto „Monaco“. Todėl svarbu užtikrinti, kad lankytojai matys jūsų puslapį būtent taip, kaip jūs norite.
  
  Taigi šriftus vardinkite pagal prioritetą. Pavyzdžiui, aukščiau pateiktame kode matome, kad pirmenybė teikiama „Arial“ šriftui. Jeigu sistema jo neaptiko, ieškoma alternatyvos, t.y. „Tahoma“. Jeigu ir šis šriftas neegzistuoja sistemoje, vėl ieškoma alternatyvos — ir šitaip iki tol, kol bus rastas šriftas arba baigsis alternatyvos.
  
  O ką reiškia „sans-serif“? Sans-serif yra bendrinis šriftų šeimos pavadinimas. CSS2.1 yra 5 bendriniai pavadinimai: sans-serif, fantasy, monospace, cursive ir serif. Pažvelkite į paveikslėlį.
  
  
  
  Serif šriftų raidės dažnai turi brukšnelius (jie pažymėti paveikslėlyje), o sans-serif reiškia „be-brūkšnelių“. Visos monospace šriftų raidės užima vienodus tarpus, tokie šriftai atėjo dar iš tų laikų, kai atsirado spausdinimo mašinėlės, kuriose po kiekvienos raidės būdavo praleidžiami vienodi tarpai. Fantasy šriftai pasižymi ypatingai vaizdingomis raidžių dekoracijomis, tačiau netinka naudoti ilgiems tekstams. Cursive šriftai imituoja ranka rašytą tekstą; atkreipkite dėmesį į tai, kaip raidės yra papuošiamos įvairiomis banguotomis linijomis.
  
  Tad jeigu nutiko taip, kad iš jūsų nurodytų šriftų sąrašo nė vienas šriftas nebuvo rastas ir nurodėte gale sans-serif, naršyklė naudos numatytąjį sans-serif šriftą.
  
  
• font-size
  
  Ši savybė yra labai elementari ir aiškiai suprantama. Ją naudojame tada, kai norime nustatyti šrifto dydį. Jį galime nurodyti įvairiais būdais: procentais, em'ais, pikseliais (taškais), pavyzdžiui:
  
  

  .blokas { font-size: 14px; }
  .blokas p { font-size: 1.2em; }

  
  Taip pat galima dydį nusakyti ir žodžiais. Kai nueinate į drabužių parduotuvę, jums pažįstami užrašai: S, M, L, XL, XXL, kurie reiškia drabužių dydžius . CSS kalboje viskas labai panašu: xx-small, x-small, small, medium, large, x-large, xx-large.
  
  

  .blokas { font-size: x-large; }

  
  
• font-weight
  
  Font-weight savybė naudojama teksto ryškumui nustatyti. Apačioje nurodyta font-weight savybės reikšmių aibė.
  
  

  font-weight: { 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | bold | bolder | lighter | normal }

  
  Atminkite, kad daugelis šriftų nepalaiko visų „svorio“ (ryškumo) reikšmių (dauguma palaiko tik bold ir normal). Beje, reikšmės 400 ir normal bei 700 ir bold yra identiškos. Žemiau pateiktame pavyzdyje abu CSS aprašai bus atvaizduojami taip pat.
  
  

  a { font-weight: 700; }

  
  

  a { font-weight: bold; }

  
  
• font-variant
  
  Ši savybė nustato teksto variantą, kuris bus naudojamas. Savybės reikšmės gali būti normal arba small-caps. Pastaroji reiškia, kad didžiosios raidės bus šiek tiek sumažintos. Tiesa, šios savybės nepalaiko Safari 1.3, 2.0 ir 3.0 versijos.
  Visos IE verijos, įtraukiant ir IE7, šią savybę palaiko, tačiau tada iškyla problemų su savybės text-transform funkcionalumu.

Sąrašų sudarymas ir stilizavimas

Iš HTML kalbos jau turėtumėte žinoti, kad sąrašus sudarinėjame pagal tokį trafaretą:

<... html kodas ...>

<ul>
  <li>...</li>
  <li>...</li>
  ............
</ul>

<... html kodas ...>

arba

<... html kodas ...>

<ol>
  <li>...</li>
  <li>...</li>
  ............
</ol>

<... html kodas ...>

tačiau sąrašų išvaizdai keisti naudosiu <ul></ul>.

<... html kodas ...>

Mano pirmasis sąrašas:

<ul>
  <li>pirmas dalykas;</li>
  <li>antras dalykas;</li>
  <li>dar vienas dalykas.</li>
</ul>

<... html kodas ...>

Turėtumėte pamatyti panašų vaizdą kaip parodyta paveikslėlyje.

CSS pagalba galime pakeisti sąrašo žymeklį. Pasitelksime savybe list-style-type.

Galimos list-style-type reikšmės:

• circle
  
  

  ul { list-style-type: circle; }

  
  
  
  
• disc
  
  

  ul { list-style-type: disc; }

  
  Tai numatytoji reikšmė, jos rezultatą matėte šiame paveikslėlyje.
  
  
  
  
• square
  
  

  ul { list-style-type: square; }

  
  
  
  
• armenian
  
  

  ul { list-style-type: armenian; }

  
  
  
  
• decimal
  
  

  ul { list-style-type: decimal; }

  
  
  
  
• decimal-leading-zero
  
  

  ul { list-style-type: decimal-leading-zero; }

  
  
  
  
• georgian
  
  

  ul { list-style-type: georgian; }

  
  
  
  
• lower-alpha
  
  

  ul { list-style-type: lower-alpha; }

  
  
  
  
• lower-greek
  
  

  ul { list-style-type: lower-greek; }

  
  
  
  
• lower-roman
  
  

  ul { list-style-type: lower-roman; }

  
  
  
  
• upper-alpha
  
  

  ul { list-style-type: upper-alpha; }

  
  
  
  
• upper-latin
  
  

  ul { list-style-type: upper-latin; }

  
  Tai yra upper-alpha analogas.
  
  
• upper-roman
  
  

  ul { list-style-type: upper-roman; }

  
  
  
  
• none
  
  

  ul { list-style-type: none; }

  
  

Tačiau palaukite, smagumas tuo nesibaigė! Galime pasirinkti ir savo žymeklį pasinaudoję list-style-image savybe.

Žemiau pateiktas pavyzdys.

ul { list-style-image: url(zymeklis_is_paveiksliuko.png); }

Būtina paminėti, kad nurodžius list-style-image, kita savybė — list-style-type — nebeveiks. Iš tikrųjų galime netgi labiau pakeisti sąrašo išvaizdą. Pavyzdžiui, pritaikyti stilių ne tik ul, tačiau ir li selektoriui.

ul { list-style-image: url(zymeklis_is_paveiksliuko.png); }
li 
{ 
    padding-top: 3px; 
    padding-bottom: 3px; 
    color: #666; 
    border-bottom: 1px solid #DDD; 
    font-style: italic; 
}

Teksto transformacijos

Čia turima omenyje savybė text-transform. Štai galimos reikšmės su paaiškinimais:

• lowercase
  
  Visos raidės bus transformuojamos į mažasias.
  
  
• uppercase
  
  Visos raidės bus transformuojamos į didžiasias.
  
  
• capitalize
  
  Kiekvieno žodžio pirmoji raidė bus transformuojama į didžiają.

Taip pat verta paminėti, kad IE naršyklėse, įskaitant ir IE7, text-transform savybės reikšmė visada (net jei nustatėte kitą reikšmę: lowercase, uppercase, capitalize) bus nustatyta į none, kas reikš, kad savybė nebus taikoma, jei nustatyta savyvbės font-variant reikšmė small-caps.

Teksto pagražinimai

Kartais mums reikia išskirti tam tikrą dalį iš viso teksto. Žinoma, tai galima padaryti įvairiai, tačiau pateiksiu keletą dažniausiai naudojamų variantų.

• font-weight
  
  Šią savybę aprašiau anksčiau šiame straipsnyje. Jeigu dėl tam tikrų priežasčių pražiopsojote — tai savybė nusakanti teksto ryškumą.
  
  

  .teksto-dalis { font-weight: bold; }

  
  

  <... html kodas ...>
  
  <body>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br />
  Etiam cursus, <span class="teksto-dalis">eros nec malesuada</span> tincidunt, elit leo iaculis est, non bibendum nulla mi at pede. <br />
  Donec ac erat ac est tincidunt accumsan. <br />
  Ut elementum turpis non felis.</p>
  </body>
  
  <... html kodas ...>

  Ekrane turėtumėte išvysti panašų vaizdą kaip parodyta žemiau.

  
  
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  Etiam cursus, eros nec malesuada tincidunt, elit leo iaculis est, non bibendum nulla mi at pede.
  Donec ac erat ac est tincidunt accumsan.
  Ut elementum turpis non felis.
  
  Font-weight: bold aprašas tekstą atvaizduoja visiškai taip pat kaip HTML žymės arba .
  
  
• font-style
  
  Savybė turi tris galimas reikšmes: normal, italic ir oblique. Oblique ir italic reikšmės yra labai panašios veikimo požiūriu, tačiau oblique dažniausiai asocijuojamas su sans-serif šriftais. Italic (oblique) naudojame tada, kai norime tekstą atvaizduoti kursyvu (pasviru šriftu). Normal reikšmė, kaip turbūt supratote, reiškia normalų šriftą.
  
  HTML atitikmuo CSS font-style savybės reikšmei italic yra <em> </em> arba <i> </i>.
  
  
• text-decoration
  
  Ši savybė suteiks tekstui tam tikrą dekoraciją. Štai galimos reikmšės: blink, line-trough, overline, underline, none.
  
  blink — nurodžius šią reikšmę tekstas blyksės.
  line-trough — pridedama horizontali linija per teksto eilutės vidurį.
  overline — horizontali linija virš teksto eilutės.
  underline — horizontali linija po teksto eilute (pabraukimas).
  none — anuliuojama bet kokia text-decoration reikšmė.
  
  

Apibendrinimas

Taigi sužinojome, kaip stilizuoti tekstą, sąrašus. Sėkmės!