{"id":335,"date":"2020-03-07T21:49:40","date_gmt":"2020-03-07T21:49:40","guid":{"rendered":"https:\/\/ramk.ee\/opikud\/veebidisain\/?post_type=chapter&p=335"},"modified":"2020-03-11T13:07:11","modified_gmt":"2020-03-11T13:07:11","slug":"teksti-kujundusvahendid","status":"publish","type":"chapter","link":"https:\/\/ramk.ee\/opikud\/veebidisain\/chapter\/teksti-kujundusvahendid\/","title":{"rendered":"Teksti kujundusvahendid"},"content":{"raw":"Teksti kujundamisv\u00f5tted on tekstit\u00f6\u00f6tlusest tuttavad. Veebilehel tuleb nendega ettevaatlikult \u00fcmber k\u00e4ia, sest ekraanilt lugemine on raskem kui paberilt. Teksti kujundamisvahendeid saab m\u00e4\u00e4rata k\u00f5igile teksti sisaldavatele veebilehe osadele (pealkirjad, l\u00f5igud, loendid, lingid jne).\r\n

Teksti v\u00e4rv<\/h1>\r\nVaikimisi kasutatav v\u00e4rv k\u00f5ikide tekstiobjektide jaoks on must. Soovitud v\u00e4rvi m\u00e4\u00e4ramiseks on omadus color! Veebilehele \u00fcldiselt saab teksti v\u00e4rvi m\u00e4\u00e4rata elemendile <body> loodud stiilis. N\u00e4iteks:\r\n
body { \r\n  color:white;\r\n}<\/pre>\r\nSelliselt m\u00e4\u00e4ratud v\u00e4rvi kasutatakse k\u00f5igil tekstielementidel (pealkirjad, l\u00f5igud jms), millele pole eraldi v\u00e4rvi m\u00e4\u00e4ratud.\r\n\r\nOmaduse color<\/em> v\u00f5ib lisada iga teksti sisaldava elemendi stiilile. N\u00e4iteks m\u00e4\u00e4rame pealkirja v\u00e4rvuseks oran\u017ei:\r\n
h1 {\r\n  color: #FF8040;\r\n}<\/pre>\r\nTekstiobjektidele saab m\u00e4\u00e4rata ka oma taustav\u00e4rvi. Selleks tuleb soovitud elemendi kujundusele lisada tausta omadus background-color<\/em>. N\u00e4iteks loome eraldi kujundusklassi l\u00f5ikudele (element <p><\/code>), anname sellele nimeks \"markeriga\" ja m\u00e4\u00e4rame taustav\u00e4rviks\r\nkollase:\r\n
p.markeriga {\r\n  background-color: #FFFF00;\r\n}<\/pre>\r\n
L\u00f5igu kujundus<\/h1>\r\nTekstil\u00f5ikude jaoks on veebis p\u00f5him\u00f5tteliselt samad vahendid nagu tavap\u00e4rases tekstit\u00f6\u00f6tluses.\r\n
L\u00f5igu joondus<\/h2>\r\n\u00dcsna tavap\u00e4rane on l\u00f5igu joonduse m\u00e4\u00e4ramine, selleks on kasutatakse omadust text-align<\/em>, millel v\u00f5imalikeks v\u00e4\u00e4rtusteks on left<\/em> (vasak, vaikimisi kasutatav), right<\/em> (parem), center<\/em> (keskel) ja justify<\/em> (r\u00f6\u00f6pselt). N\u00e4iteks joondame suure pealkirja (element <h1><\/code>) keskele:\r\n
h1 {\r\n  text-align: center;\r\n}<\/pre>\r\n
Taandrida<\/h2>\r\nTaandrea loomiseks kasutatakse omadust text-indent<\/em>, mille v\u00e4\u00e4rtus v\u00f5ib olla fikseeritud arv pikslites \u2013 px, punktides \u2013 pt, sentimeetrites \u2013 cm v\u00f5i ka em. Kasutada saab ka v\u00e4\u00e4rtust % selle elemendi laiusest, mille sisse k\u00e4sitletav tekstiobjekt kuulub. N\u00e4iteks m\u00e4\u00e4rame tekstil\u00f5ikudele (html element <p><\/code>) taandrea 20 pikslit:\r\n
p {\r\n  text-indent: 20px;\r\n}<\/pre>\r\nNB! Terve l\u00f5igu taande jaoks tuleb kasutada omadust margin<\/em>.<\/span>\r\n
Reasamm<\/h2>\r\nReasamm ehk rea k\u00f5rgus m\u00e4\u00e4ratakse omadusega line-height<\/em>, mille v\u00e4\u00e4rtusteks v\u00f5ivad olla: normal<\/em> (vaikev\u00e4\u00e4rtus), number (normaalk\u00f5rguse kordaja), fikseeritud suurus (m\u00f5\u00f5t\u00fchikutega px, pt v\u00f5i cm) v\u00f5i protsent teksti suurusest (font size<\/em>). N\u00e4iteks m\u00e4\u00e4rame tekstil\u00f5ikudele reak\u00f5rguseks 125% teksti suurusest:\r\n
p {\r\n  line-height: 125%;\r\n}<\/pre>\r\n
Font ja sellega seonduv<\/h1>\r\nFont t\u00e4histab tavaliselt kas konkreetset t\u00e4hem\u00e4rkide kujundust (font) v\u00f5i \u00fcldisemalt k\u00f5ike, mida saab t\u00e4hem\u00e4rkidega seoses m\u00e4\u00e4rata (lisaks suurus, stiil jms).\r\n\r\nT\u00e4hem\u00e4rkide kujunduse v\u00f5ib kirja panna l\u00fchendatud kujul, loetledes k\u00f5igi v\u00f5imalike omaduste v\u00e4\u00e4rtused j\u00e4rgmises j\u00e4rjekorras: font-style font-variant font-weight font-size\/lineheight font-family<\/em>. Kohustuslikud siinjuures on font-size<\/em> ja font-family<\/em>, \u00fclej\u00e4\u00e4nud v\u00f5ib \u00e4ra j\u00e4tta, sellisel juhul kasutatakse nende vaikev\u00e4\u00e4rtuseid.\r\n\r\nN\u00e4iteks:\r\n
p {\r\n  font:italic bold 14px\/30px Arial, sans-serif;\r\n}<\/pre>\r\n
Font<\/h2>\r\nNagu tekstit\u00f6\u00f6tluseski, saab m\u00e4\u00e4rata kasutatavat fonti. Selleks kasutatakse omadust font-family,<\/em> mille v\u00e4\u00e4rtusena tuleb kirja panna soovitud font. Fonte v\u00f5ib komadega eraldatult loetleda mitu! Sellisel juhul p\u00fc\u00fcab veebilehitseja k\u00f5igepealt kasutusele v\u00f5tta esimese, kui seda fonti s\u00fcsteem ei toeta (seda pole arvutisse paigaldatud vms), siis j\u00e4rgmise jne. N\u00e4iteks m\u00e4\u00e4rame suurtes pealkirjades (element <h1><\/code>) kasutatava fondi:\r\n
h1 {\r\n  font-family: trendy, joan, \"comic sans ms\";\r\n}\r\n<\/pre>\r\nCSS3 v\u00f5imaldab kasutada mistahes fonti ehk veebidisainer ei pea enam piirduma vaid fontidega, mis kindlasti kasutaja arvutisse installeeritud oleks.\r\n\r\nSelleks tuleb kasutada @font-face<\/em> reeglit (rule<\/em>), mis v\u00f5imaldab m\u00e4\u00e4rata kasutajas\u00f5braliku nime ja fondi faili URL-i. Disainer saab seega laadida fondi faili oma veebiserverisse ja see laetakse kliendile koos veebilehega.\r\n\r\nN\u00e4iteks:\r\n
@font-face {\r\n  font-family: omanimifondile;\r\n  src: url(URL\/FontFileName.nimelaiend);\r\n}<\/pre>\r\nJa seej\u00e4rel v\u00f5ib teistes stiilides (teiste selektorite jaoks) seda kasutada nagu fonte tavaliselt kasutatakse, n\u00e4iteks:\r\n
h1 {\r\n  font-family: omanimifondile:\r\n}<\/pre>\r\nFondi t\u00fc\u00fcpe on mitu:\r\n
    \r\n \t
  • TTF\u2013 True Type Fonts<\/em>, seda toetavad k\u00f5ik tuntumad brauserid.<\/li>\r\n \t
  • OTF \u2013 OpenType Fonts<\/em>, seda toetavad k\u00f5ik tuntumad brauserid.<\/li>\r\n \t
  • WOFF \u2013 Web Open Font Format, <\/em>seda toetavad k\u00f5ik tuntumad brauserid.<\/li>\r\n \t
  • WOFF2\u2013 Web Open Font Format, seda toetavad Chrome, Opera ja m\u00f6\u00f6ndustega Firefox.<\/em><\/li>\r\n \t
  • SVG \u2013 scalable-vector-graphic,\u00a0<\/em>seda toetavad Crome, Safari ja Opera.<\/li>\r\n \t
  • EOT \u2013 Embedded OpenType<\/em>, seda toetab Internet Explorer;<\/li>\r\n<\/ul>\r\nKui tarvis kasutada erinevate atribuutidega (bold<\/em>, italic<\/em>) kirju ja Teil on vastava kujundusega spetsiaalne font olemas, siis tuleb lisada veel teinegi samasugune @font-face<\/em> reeglit, milles kirjas sama fondi vastava atribuudiga versiooni URL ja lisaks vastav kujunduselement (fontstyle, font-weight, font-stretch<\/em>).\r\n\r\nMitmeid t\u00fc\u00fcpe fonte toetavad ainult veebilehitsejate uuendatud versioonid. Seega \u00fchildumaks k\u00f5igi veebilehitsejatega, v\u00f5ib oma fondi kirjeldada selliselt, et erinevate veebilehitsejate jaoks lisatakse komaga eraldatult eraldi URL-id.\r\n\r\nN\u00e4iteks:\r\n
    @font-face {\r\n  font-family: omanimifondile;\r\n  src: url(\"fondinimi.eot\"), \/*IE jaoks*\/\r\n  url(\"fondinimi.ttf\") format(\"truetype\");\/*teised veebilehitsejad*\/\r\n}<\/pre>\r\nFondi allikana v\u00f5ib p\u00fc\u00fcda kasutada ka lokaalset (kliendi arvutis paiknevat) fonti, mis s\u00e4\u00e4staks vajadusest fonti serverist alla laadida. Selleks m\u00e4\u00e4ratakse fondi allikas url-i asemel local. Sellisel juhul tuleks aga kindluse m\u00f5ttes komaga eraldatult lisada viide ka samale fondile veebis.\r\n\r\nN\u00e4iteks:\r\n
    @font-face {\r\n  font-family: minuEriFont;\r\n  src: local(Gentium Bold),\r\n  url(GentiumBold.woff);\r\n}\r\n<\/pre>\r\n
    Kirja suurus<\/h2>\r\nKirja suuruse m\u00e4\u00e4ramiseks kasutatakse omadust font-size, <\/em>mille v\u00e4\u00e4rtus pannakse enamasti kirja pikslites. N\u00e4iteks:\r\n
    h1 {\r\n  font-size: 40px;\r\n}<\/pre>\r\nNB! Murdarvude kasutamisel tuleb komakoha eraldajana kirjutada punkt!<\/span>\r\n\r\nTeksti suuruse v\u00f5ib m\u00e4\u00e4rata ka protsentuaalselt antud teksti sisaldava elemendi (parent<\/em>) teksti suuruse suhtes.\r\n\r\nOmaduse font-size<\/em> v\u00e4\u00e4rtustena v\u00f5ib kasutada ka konstante:\r\n
      \r\n \t
    • xx-small<\/em> \u2013 extra extra v\u00e4ike;<\/li>\r\n \t
    • x-small<\/em> \u2013 extra v\u00e4ike;<\/li>\r\n \t
    • small<\/em> \u2013 v\u00e4ike;<\/li>\r\n \t
    • medium<\/em> \u2013 keskmine;<\/li>\r\n \t
    • large<\/em> \u2013 suur;<\/li>\r\n \t
    • x-large<\/em> \u2013 extra suur;<\/li>\r\n \t
    • xx-large<\/em> \u2013 extra extra suur;<\/li>\r\n \t
    • smaller<\/em> \u2013 v\u00e4iksem, kui antud teksti sisaldaval elemendil ette n\u00e4htud;<\/li>\r\n \t
    • larger<\/em> \u2013 suurem, kui antud teksti sisaldaval elemendil ette n\u00e4htud.<\/li>\r\n<\/ul>\r\n
      Kaldkiri<\/h2>\r\nLoomulikult saab m\u00e4\u00e4rata, kas tegemist on kaldkirjaga v\u00f5i mitte. Selleks kasutatakse omadust font-style<\/em>, millel on tavap\u00e4rasteks v\u00e4\u00e4rtusteks on:\r\n
        \r\n \t
      • normal (vaikev\u00e4\u00e4rtus);<\/li>\r\n \t
      • italic (kaldkiri);<\/li>\r\n \t
      • oblique (ka kaldkiri).<\/li>\r\n<\/ul>\r\nN\u00e4iteks m\u00e4\u00e4rame kasutame teise taseme pealkirjadel (element <h2><\/code>) kaldkirja:\r\n
        h2 {\r\n  font-style: italic;\r\n}<\/pre>\r\n
        Paks kiri<\/h2>\r\nKirja paksus m\u00e4\u00e4ratakse omadusega font-weight<\/em>, mille v\u00e4\u00e4rtusteks on normal, bold, bolder, lighter<\/em>, 100, 200, 300, 400 (sama mis normal<\/em>), 500, 600, 700 (sama mis bold<\/em>), 800, 900.\r\n\r\nN\u00e4iteks m\u00e4\u00e4rame paksu kirjaga l\u00f5ikude kujunduse (loome eraldi klassi elemendile <p><\/code>):\r\n
        p.paks {\r\n  font-weight: 800;\r\n}<\/pre>\r\n
        Teksti joonimine, allajoonimine, l\u00e4bikriipsutamine<\/h2>\r\nV\u00f5imalik on ka teksti allajoonida v\u00f5i l\u00e4bi kriipsutada. Selleks teksti dekoreeritakse, milleks on omadus text-decoration,\u00a0<\/em>mis toimib l\u00fchendina j\u00e4rgnevatele omadustele:\r\n
          \r\n \t
        • text-decoration-line\u00a0<\/em>(kohustuslik)<\/li>\r\n<\/ul>\r\nM\u00e4\u00e4rab \u00e4ra, millist dekoratsiooni kasutada. V\u00f5imalikud valikud on:<\/span>\r\n
            \r\n \t
          • \r\n
              \r\n \t
            • none<\/em> (vaikev\u00e4\u00e4rtus);<\/li>\r\n \t
            • underline<\/em> - allajoonimine;<\/li>\r\n \t
            • overline<\/em> \u2013 joon teksti kohal;<\/li>\r\n \t
            • line-through<\/em> - l\u00e4bikriipsutamine.<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\nN\u00e4iteks m\u00e4\u00e4rame suurtele pealkirjadele allajoonimise:\r\n
              h1 {\r\n  text-decoration-line: underline;\r\n}<\/pre>\r\nKuna saame l\u00fchendina kasutada ka ainult text-decoration omadust, siis saame eelneva koodi kirjutada ka kujul:\r\n
              h1 { \r\n  text-decoration: underline; \r\n}<\/pre>\r\n
                \r\n \t
              • text-decoration-color<\/em><\/li>\r\n<\/ul>\r\nM\u00e4\u00e4rab \u00e4ra dekoratsiooni v\u00e4rvi. N\u00e4iteks m\u00e4\u00e4rame teise taseme pealkirjadele punase l\u00e4bikriipsutamise:\r\n
                h2 {\r\n  text-decoration-line: line-through;\r\n  text-decoration-color: red;\r\n}<\/pre>\r\nSama tulemuse saame kirjutades:\r\n
                h2 {\r\n  text-decoration: line-through red;\r\n}<\/pre>\r\n
                  \r\n \t
                • text-decoration-style<\/li>\r\n<\/ul>\r\nM\u00e4\u00e4rab \u00e4ra dekoratsiooni stiili. V\u00f5imalikud valikud on solid, double, dotted, dashed, wavy, initial<\/em> ja inherit<\/em>. N\u00e4iteks m\u00e4\u00e4rame teksil\u00f5igule lainelise sinise \u00fclajoone:\r\n
                  p {\r\n  text-decoration: overline blue wavy;\r\n}<\/pre>\r\nNeid omadusi saab ka koos kasutada, selleks tuleb soovitud v\u00e4\u00e4rtused t\u00fchikutega eraldatult kirja panna.\r\n\r\nN\u00e4iteks:\r\n
                  .imelikultJoonitud {\r\n  text-decoration: underline line-through;\r\n}<\/pre>\r\n
                  Suur- ja v\u00e4iket\u00e4hed<\/h1>\r\nSiinjuures on m\u00f5eldud v\u00f5imalusi kasutada vaid v\u00e4iket\u00e4hti (lowercase<\/em>), vaid suurt\u00e4hti (uppercase<\/em>) v\u00f5i s\u00f5nade alguses suurt\u00e4hti (capitalize<\/em>).\r\n\r\nTavap\u00e4raselt kasutatakse omadust text-transform<\/em>, mille vaikev\u00e4\u00e4rtuseks on none<\/em> \u2013 teksti n\u00e4idatakse nagu see kirjutati.\r\n\r\nN\u00e4iteks:\r\n
                  p.suurtahed {\r\n  text-transform: uppercase;\r\n}\r\np.vaiketahed {\r\n  text-transform: lowercase;\r\n}\r\np.sonasuuretahega {\r\n  text-transform: capitalize;\r\n}<\/pre>\r\nSuur- ja v\u00e4iket\u00e4htedega on seotud ka omadus font-variant<\/em> mis v\u00f5imaldab lisaks vaikev\u00e4\u00e4rtusele normal<\/em> veel tr\u00fckit\u00e4htede (kapiteelkiri ehk small caps<\/em>) kasutamist.\r\n
                  p.trykitahed {\r\n  font-variant: small-caps;\r\n}\r\n<\/pre>\r\n
                  T\u00e4he- ja s\u00f5nade vahe<\/h1>\r\nSarnaselt tekstit\u00f6\u00f6tlusprogrammidele saab ka veebilehel t\u00e4htede omavahelist vahet muuta ning seel\u00e4bi n\u00e4iteks h\u00f5rendatud teksti luua. Kasutusel on omadus letter-spacing<\/em> millel on v\u00f5imalikud v\u00e4\u00e4rtused normal<\/em>, inherit<\/em> (mille korral kasutatakse antud tekstiobjekti sisaldava elemendi t\u00e4hevahe) ja arvv\u00e4\u00e4rtus koos\r\n\r\nN\u00e4iteks:\r\n
                  p.horendatud {\r\n  letter-spacing: 3px;\r\n}<\/pre>\r\nV\u00f5imalik on m\u00e4\u00e4rata ka s\u00f5nade vahel kasutatavat ruumi, selleks on kasutusel omadus word-spacing<\/em>. Kasutada saab v\u00e4\u00e4rtuseid: normal<\/em> (vaikev\u00e4\u00e4rtus), inherit<\/em> (vastav omadus p\u00e4ritakse tekstiobjekti sisaldavalt elemendilt) ja arvv\u00e4\u00e4rtus.\r\n
                  p.suuremsonavahe {\r\n  word-spacing: 5px;\r\n}<\/pre>\r\n
                  Teksti \"murdmine\"<\/h1>\r\nTeksti murdmise v\u00f5imaldab s\u00f5nu vajadusel ridade vahel poolitada. Selleks on kaks omadust word-break<\/em> ja word-wrap<\/em>.\r\n\r\nEsimene neist, word-break<\/em>, poolitab s\u00f5nu mistahes kahe t\u00e4he vahel ja tal on v\u00f5imalikud v\u00e4\u00e4rtused:\r\n
                    \r\n \t
                  • normal<\/em> \u2013 s\u00f5nu poolitatakse tavap\u00e4raste reeglite j\u00e4rgi (vaikev\u00e4\u00e4rtus);<\/li>\r\n \t
                  • break-all<\/em> \u2013 teksti rida v\u00f5ib murda mistahes kahe tekstim\u00e4rgi vahel;<\/li>\r\n \t
                  • keep-all<\/em> \u2013 murdmine mistahes kahe t\u00e4he vahel on keelatud;<\/li>\r\n \t
                  • initial<\/em> \u2013 seab omaduse vaikev\u00e4\u00e4rtusele;<\/li>\r\n \t
                  • inherit<\/em> \u2013 omaduse v\u00e4\u00e4rtus p\u00e4ritakse vanem-elemendilt.<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n
                    p {\r\n  word-break: break-all;\r\n}<\/pre>\r\nTeine neist, word-wrap<\/em>, poolitab vaid pikki s\u00f5nu ja tal on j\u00e4rgmised omadused:\r\n
                      \r\n \t
                    • normal<\/em> \u2013 s\u00f5nu poolitatakse vaid lubatud kohtadel (vaikev\u00e4\u00e4rtus);<\/li>\r\n \t
                    • break-word<\/em> \u2013 lubab poolitada s\u00f5nu, mida ei tohiks (unbreakable words<\/em>);<\/li>\r\n \t
                    • initial<\/em> \u2013 seab omaduse vaikev\u00e4\u00e4rtusele;<\/li>\r\n \t
                    • inherit<\/em> \u2013 omaduse v\u00e4\u00e4rtus p\u00e4ritakse vanem-elemendilt.<\/li>\r\n<\/ul>\r\n
                      Teksti suund<\/h1>\r\nTavap\u00e4rane teksti lugemissuund on vasakult paremale, kuid vajadusel saab teksti ka vastupidises suunas kirjutada. Selleks kasutatakse omadust direction<\/em>, millel on kaks v\u00f5imalikku v\u00e4\u00e4rtust: ltr (left to right)<\/em> ja rtl (right to left)<\/em>.\r\n
                      div.pahupidi {\r\n  direction: rtl;\r\n}<\/pre>\r\n
                      T\u00fchja ruumi haldus<\/h1>\r\nCSS stiili abil saab m\u00e4\u00e4rata ka seda, kuidas k\u00e4itutakse veebilehe autori poolt lisatud t\u00fchikute, reavahetuste (sisestusklahvi (enter<\/em>) vajutused), tabulaatoriklahvi vajutuste jms \u201et\u00fchja ruumiga\u201c (white space<\/em>).\r\n\r\nKasutada saab omadust white-space<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:\r\n
                        \r\n \t
                      • normal<\/em> \u2013 kogu \u201et\u00fchi ruum\u201c (t\u00fchikute jada jms) pannakse kokku \u00fcheks t\u00fchikuks. Reavahetus (text wrap<\/em>) toimub vastavalt vajadusele. See on vaikev\u00e4\u00e4rtus.<\/li>\r\n \t
                      • nowrap<\/em> \u2013 kogu \u201et\u00fchi ruum\u201c (t\u00fchikute jada jms) pannakse kokku \u00fcheks t\u00fchikuks. Automaatset reavahetust ei toimu kunagi. Reavahetus toimub vaid HTML elemendi <br><\/code> kasutamisel.<\/li>\r\n \t
                      • pre<\/em> \u2013 kogu \u201et\u00fchi ruum\u201c s\u00e4ilitatakse nii nagu see on. Reavahetus toimub seal, kus autor on selle m\u00e4\u00e4ranud (sisestusklahviga (enter<\/em>)). See v\u00e4\u00e4rtus vastab HTML elemendile <pre><\/code>!<\/li>\r\n \t
                      • pre-line<\/em> \u2013 kogu \u201et\u00fchi ruum\u201c (t\u00fchikute jada jms) pannakse kokku \u00fcheks t\u00fchikuks. Reavahetus toimub automaatselt vastavalt vajadusele ning ka kohtades, kus autor on m\u00e4\u00e4ranud (sisestusklahviga (enter<\/em>)).<\/li>\r\n \t
                      • pre-wrap<\/em> \u2013 kogu \u201et\u00fchi ruum\u201c s\u00e4ilitatakse nii nagu see on. Reavahetus toimub automaatselt vastavalt vajadusele ning ka kohtades, kus autor on m\u00e4\u00e4ranud (sisestusklahviga (enter<\/em>)).<\/li>\r\n \t
                      • inherit<\/em> \u2013 objekt p\u00e4rib vastava omaduse teda sisaldavalt elemendilt (parent<\/em>).<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n
                        p.naguoli {\r\n  white-space: pre;\r\n}<\/pre>\r\n
                        Loendid<\/h1>\r\nLoendite (lists<\/em>, html elemendid <ol><\/code> ja <ul><\/code>) jaoks kehtivad k\u00f5ik eespool kirjeldatud teksti kujundusvahendid kuid lisaks saab neil m\u00e4\u00e4rata numbrite\/t\u00e4ppide stiili. Selleks kasutatakse omadust list-style-type<\/em>.\r\n\r\nLisaks loendi liigist olevatele spetsiifilistele v\u00e4\u00e4rtusele on m\u00f5lemal loendil ka \u00fchised v\u00e4\u00e4rtused:\r\n
                          \r\n \t
                        • none - loendit\u00e4hised puuduvad;<\/li>\r\n \t
                        • initial \u2013 seab selle omaduse esialgsele v\u00e4\u00e4rtusele;<\/li>\r\n \t
                        • inherit - loend p\u00e4rib vastava omaduse teda sisaldavalt elemendilt (parent);<\/li>\r\n<\/ul>\r\n
                          Nummerdatud loend<\/h2>\r\nNummerdatud loendi puhul (element <ol><\/code>) saab omaduse list-style-type<\/em> v\u00e4\u00e4rtustena lisaks \u00fchistele v\u00e4\u00e4rtustele kasutada j\u00e4rgmiseid v\u00e4\u00e4rtuseid:\r\n
                            \r\n \t
                          • decimal \u2013 tavalised k\u00fcmnends\u00fcsteemi araabia numbrid, see on ka vaikev\u00e4\u00e4rtus;<\/li>\r\n \t
                          • decimal-leading-zero \u2013 araabia numbritele lisatakse polsterdusena ette 0;<\/li>\r\n \t
                          • lower-roman \u2013 rooma numbrid v\u00e4iket\u00e4htedega;<\/li>\r\n \t
                          • upper-roman \u2013 rooma numbrid suurt\u00e4htedega (tavaline);<\/li>\r\n \t
                          • lower-alpha \u2013t\u00e4hestiku v\u00e4iket\u00e4hed;<\/li>\r\n \t
                          • upper-alpha \u2013t\u00e4hestiku suurt\u00e4hed;<\/li>\r\n \t
                          • lower-latin \u2013 ladina t\u00e4hestiku v\u00e4iket\u00e4hed;<\/li>\r\n \t
                          • upper-latin \u2013 ladina t\u00e4hestiku suurt\u00e4hed;<\/li>\r\n \t
                          • lower-greek, \u2013 kreeka t\u00e4hestiku v\u00e4iket\u00e4hed;<\/li>\r\n \t
                          • armenian \u2013 traditsioonilised armeenia numbrid;<\/li>\r\n \t
                          • georgian \u2013 traditsiooniline gruusia numeratsioon: an, ban, gan \u2026;<\/li>\r\n \t
                          • cjk-ideographic \u2013 ideograafilised numbrid;<\/li>\r\n \t
                          • hebrew \u2013 traditsioonilised heebrea numbrid;<\/li>\r\n \t
                          • hiragana \u2013 traditsioonilised Hiragana numbrid;<\/li>\r\n \t
                          • hiragana-iroha \u2013 traditsioonilised Hiragana iroha numbrid;<\/li>\r\n \t
                          • katakana \u2013 traditsioonilised Katakana numbrid;<\/li>\r\n \t
                          • katakana-iroha \u2013 traditsioonilised Katakana iroha numbrid.<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n
                            ol {\r\n  list-style-type: upper-roman;\r\n}\r\n<\/pre>\r\n
                            T\u00e4pploend<\/h2>\r\nT\u00e4pploendi puhul (element <ul><\/code>) saab omaduse list-style-type<\/em> v\u00e4\u00e4rtustena lisaks \u00fchistele v\u00e4\u00e4rtustele kasutada v\u00e4\u00e4rtuseid:\r\n
                              \r\n \t
                            • disc \u2013 t\u00e4ppideks on seest t\u00e4idetud ringid, see on ka vaikev\u00e4\u00e4rtus;<\/li>\r\n \t
                            • circle \u2013 t\u00e4ppideks on seest t\u00fchjad ringid;<\/li>\r\n \t
                            • square \u2013 t\u00e4ppideks on ruudud.<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n
                              ul {\r\n  list-style-type: square;\r\n}<\/pre>\r\nT\u00e4pploendi puhul saab t\u00e4ppidena kasutada ka pildifaili. Selleks kasutatakse omadust list-styleimage<\/em>, mille v\u00e4\u00e4rtuseks on soovitud pildifaili URL.\r\n\r\nN\u00e4iteks kasutame t\u00e4pploendis tavaliste t\u00e4ppide asemel pildifaili \"leht.png\":\r\n
                              ul {\r\n  list-style-image: url(\"leht.png\");\r\n}<\/pre>\r\n
                              Numbri\/t\u00e4pi paigutus<\/h2>\r\nLoendite puhul saab m\u00e4\u00e4rata ka seda, kas loendielemendi (list item<\/em> ehk html element <li><\/code>) marker (t\u00e4pp v\u00f5i number) paigutatakse v\u00e4ljapoole sisu piirkonda (content flow) ehk ettepoole sisu vasakut serva v\u00f5i piirkonna sisse.\r\n\r\nSelleks on kasutusel omadus list-style-position<\/em>, mille v\u00f5imalikud v\u00e4\u00e4rtused on:\r\n
                                \r\n \t
                              • outside<\/em> \u2013 t\u00e4pp\/number asub v\u00e4ljaspool sisu piirkonda, see on ka vaikev\u00e4\u00e4rtus;<\/li>\r\n \t
                              • inside<\/em> \u2013 t\u00e4pp\/number asub sisu piirkonnas;<\/li>\r\n \t
                              • inherit<\/em> \u2013 omaduse v\u00e4\u00e4rtus p\u00e4ritakse loendit sisaldavalt elemendilt;<\/li>\r\n \t
                              • initial<\/em> \u2013 seab selle omaduse esialgsele v\u00e4\u00e4rtusele.<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n\r\n[caption id=\"attachment_349\" align=\"aligncenter\" width=\"550\"]\"List Loendielemendi marker v\u00e4ljaspool sisu piirkonda (outside)[\/caption]\r\n\r\n[caption id=\"attachment_350\" align=\"aligncenter\" width=\"550\"]\"list Loendielemendi marker sisu piirkonnas (inside)[\/caption]\r\n
                                Loendi stiil l\u00fchidalt<\/h2>\r\nLoendite v\u00e4limuse saab seada ka ainult \u00fche omadusega list-style<\/em>. Selle v\u00e4\u00e4rtusena pannakse \u00fcksteise j\u00e4rel t\u00fchikutega eraldatult kirja list-style-type, list-style-position<\/em> ja list-style-image<\/em> v\u00e4\u00e4rused.\r\n\r\nN\u00e4iteks:\r\n
                                .minuloend {\r\n  list-style: circle inside url(\"leht.png\");\r\n}<\/pre>\r\nNB! Kui m\u00f5ni kolmest v\u00e4\u00e4rtusest on kirja panemata siis kasutatakse vastava omaduse vaikev\u00e4\u00e4rtust!<\/span>\r\n
                                Tsitaadid<\/h1>\r\nKa tsitaatide (quotes) jaoks pakub css oma vahendeid, millega m\u00e4\u00e4ratakse html elemendil <q><\/code> kasutatavad jutum\u00e4rgid. Seejuures saab m\u00e4\u00e4rata erinevaid m\u00e4rke tsitaatidele, mis on omakorda tsitaadi sees.\r\n\r\nKasutatakse omadust quotes<\/em>, mille v\u00e4\u00e4rtustena saab kasutada:\r\n
                                  \r\n \t
                                • none<\/em> \u2013 keelab content omadusega (:before<\/em> ja :after<\/em> pseudoelementides) open-quote<\/em> ja close-quote<\/em> abil jutum\u00e4rkide tekitamise.<\/li>\r\n \t
                                • V\u00e4\u00e4rtusteks on soovitavad m\u00e4rgid. Esimesed kaks m\u00e4rki on esimese taseme jutum\u00e4rgid ja teised kaks jutum\u00e4rki teise taseme jutum\u00e4rgid.<\/li>\r\n \t
                                • inherit<\/em> \u2013 omaduse v\u00e4\u00e4rtus p\u00e4ritakse loendit sisaldavalt elemendilt;<\/li>\r\n \t
                                • initial<\/em> \u2013 seab selle omaduse esialgsele v\u00e4\u00e4rtusele.<\/li>\r\n<\/ul>\r\nN\u00e4ide 1, \u00fcks jutum\u00e4rkide tase:\r\n
                                  #a {\r\n  quotes: \"'\" \"'\";\r\n}<\/pre>\r\nHTML:\r\n
                                  <p><q id=\"a\">N\u00e4idislause jutum\u00e4rkides.<\/q><\/p><\/pre>\r\nTulemus: 'N\u00e4idislause jutum\u00e4rkides.'\r\n\r\nN\u00e4ide 2, kaks jutum\u00e4rkide tase:\r\n
                                  #c {\r\n  quotes: \"<\" \">\" \"'\" \"'\";\r\n}<\/pre>\r\nHTML:\r\n
                                  <p><q id=\"c\">Siin on <q>tsitaat<\/q> tsitaadi sees.<\/q><\/p><\/pre>\r\nTulemus: <Siin on 'tsitaat' tsitaadi sees.>\r\n
                                  Tekstiefektid<\/h1>\r\nCSS3 pakub lisaks tavap\u00e4rastele teksti vormindamisvahenditele ka efekte.\r\n
                                  Teksti vari<\/h2>\r\nCSS-i kasutades pole tekstile varju lisamiseks vaja kasutada fotot\u00f6\u00f6tluse abi ning teksti veebilehele pildina lisada. Kasutada on omadus text-shadow.<\/em>\u00a0M\u00e4\u00e4rata tuleb kaks kohustuslikku parameetrit: horisontaalne nihe ja vertikaalne nihe. Lisaks saab m\u00e4\u00e4rata kaks valikulist parameetrit: h\u00e4gustamine ja varju v\u00e4rv.\r\n\r\nN\u00e4iteks:\r\n
                                  h2 {\r\n  text-shadow: 10px 10px 5px #ff0000;\r\n}<\/pre>\r\n[caption id=\"attachment_352\" align=\"aligncenter\" width=\"500\"]\"punane Varjuga tekst[\/caption]\r\n\r\nTekstile v\u00f5ib lisada mitu varju, selleks tuleb need lihtsalt komadega eraldatult j\u00e4rjest kirja panna!\r\n
                                  Tekst \u00fcle serva<\/h2>\r\nSageli ei mahu tekst etteantud pinnale \u00e4ra. Sellisel juhul v\u00f5ib n\u00fc\u00fcd anda visuaalse vihje, et tekst j\u00e4tkub!\r\n\r\nSelleks kasutatakse omadust text-overflow<\/em>, millel on v\u00f5imalikud v\u00e4\u00e4rtused:\r\n
                                    \r\n \t
                                  • clip<\/em> \u2013 viimane s\u00f5na j\u00e4\u00e4b poolikuks (vaikev\u00e4\u00e4rtus),<\/li>\r\n \t
                                  • ellipsis<\/em> \u2013 teksti j\u00e4tkumise tunnuseks traditsioonilised 3 punkti;<\/li>\r\n \t
                                  • string<\/em> \u2013 n\u00e4idatakse etteantud teksti;<\/li>\r\n \t
                                  • initial<\/em> \u2013 seab omaduse vaikev\u00e4\u00e4rtusele;<\/li>\r\n \t
                                  • inherit<\/em> \u2013 omaduse v\u00e4\u00e4rtus p\u00e4ritakse vanem-elemendilt.<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n
                                    div {\r\n  text-overflow: ellipsis;\r\n}<\/pre>\r\n
                                    Tekst mitmes veerus<\/h2>\r\nCSS-i abil on v\u00f5imalik teksti ajakirjanduslikus stiilis veergudesse (columns<\/em>) paigutada!\r\n\r\nSeda saab teha kahel moel:\r\n
                                      \r\n \t
                                    • andes ette veergude laiuse column-width, v\u00e4\u00e4rtus pikslites, protsentides, em-ides jms;<\/li>\r\n \t
                                    • v\u00f5i soovitud veergude arvu column-count, v\u00e4\u00e4rtuseks positiivne t\u00e4isarv.<\/li>\r\n<\/ul>\r\nM\u00f5lemal juhul saab m\u00e4\u00e4rata veel omadusi:\r\n
                                        \r\n \t
                                      • column-gap \u2013 veergude vahekaugus (v\u00e4\u00e4rtuseks positiivne arv pikslites, em-ides jms);<\/li>\r\n \t
                                      • column-rule \u2013 veergusid eraldav vertikaalne joon (v\u00e4\u00e4rtuseks t\u00fc\u00fcpiline border omadus).<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n
                                        div {\r\n  width: 900px;\r\n  column-count: 3;\r\n  column-gap: 50px;\r\n  column-rule: 2px solid red;\r\n}<\/pre>\r\n[caption id=\"attachment_354\" align=\"aligncenter\" width=\"600\"]\"veergudes Kolme veergu paigutatud tekst[\/caption]","rendered":"
                                        Teksti kujundamisv\u00f5tted on tekstit\u00f6\u00f6tlusest tuttavad. Veebilehel tuleb nendega ettevaatlikult \u00fcmber k\u00e4ia, sest ekraanilt lugemine on raskem kui paberilt. Teksti kujundamisvahendeid saab m\u00e4\u00e4rata k\u00f5igile teksti sisaldavatele veebilehe osadele (pealkirjad, l\u00f5igud, loendid, lingid jne).<\/p>\n
                                        Teksti v\u00e4rv<\/h1>\n
                                        Vaikimisi kasutatav v\u00e4rv k\u00f5ikide tekstiobjektide jaoks on must. Soovitud v\u00e4rvi m\u00e4\u00e4ramiseks on omadus color! Veebilehele \u00fcldiselt saab teksti v\u00e4rvi m\u00e4\u00e4rata elemendile <body> loodud stiilis. N\u00e4iteks:<\/p>\n
                                        body { \r\n  color:white;\r\n}<\/pre>\n
                                        Selliselt m\u00e4\u00e4ratud v\u00e4rvi kasutatakse k\u00f5igil tekstielementidel (pealkirjad, l\u00f5igud jms), millele pole eraldi v\u00e4rvi m\u00e4\u00e4ratud.<\/p>\n
                                        Omaduse color<\/em> v\u00f5ib lisada iga teksti sisaldava elemendi stiilile. N\u00e4iteks m\u00e4\u00e4rame pealkirja v\u00e4rvuseks oran\u017ei:<\/p>\n
                                        h1 {\r\n  color: #FF8040;\r\n}<\/pre>\n
                                        Tekstiobjektidele saab m\u00e4\u00e4rata ka oma taustav\u00e4rvi. Selleks tuleb soovitud elemendi kujundusele lisada tausta omadus background-color<\/em>. N\u00e4iteks loome eraldi kujundusklassi l\u00f5ikudele (element <p><\/code>), anname sellele nimeks “markeriga” ja m\u00e4\u00e4rame taustav\u00e4rviks
                                        \nkollase:<\/p>\n
                                        p.markeriga {\r\n  background-color: #FFFF00;\r\n}<\/pre>\n
                                        L\u00f5igu kujundus<\/h1>\n
                                        Tekstil\u00f5ikude jaoks on veebis p\u00f5him\u00f5tteliselt samad vahendid nagu tavap\u00e4rases tekstit\u00f6\u00f6tluses.<\/p>\n
                                        L\u00f5igu joondus<\/h2>\n
                                        \u00dcsna tavap\u00e4rane on l\u00f5igu joonduse m\u00e4\u00e4ramine, selleks on kasutatakse omadust text-align<\/em>, millel v\u00f5imalikeks v\u00e4\u00e4rtusteks on left<\/em> (vasak, vaikimisi kasutatav), right<\/em> (parem), center<\/em> (keskel) ja justify<\/em> (r\u00f6\u00f6pselt). N\u00e4iteks joondame suure pealkirja (element <h1><\/code>) keskele:<\/p>\n
                                        h1 {\r\n  text-align: center;\r\n}<\/pre>\n
                                        Taandrida<\/h2>\n
                                        Taandrea loomiseks kasutatakse omadust text-indent<\/em>, mille v\u00e4\u00e4rtus v\u00f5ib olla fikseeritud arv pikslites \u2013 px, punktides \u2013 pt, sentimeetrites \u2013 cm v\u00f5i ka em. Kasutada saab ka v\u00e4\u00e4rtust % selle elemendi laiusest, mille sisse k\u00e4sitletav tekstiobjekt kuulub. N\u00e4iteks m\u00e4\u00e4rame tekstil\u00f5ikudele (html element <p><\/code>) taandrea 20 pikslit:<\/p>\n
                                        p {\r\n  text-indent: 20px;\r\n}<\/pre>\n
                                        NB! Terve l\u00f5igu taande jaoks tuleb kasutada omadust margin<\/em>.<\/span><\/p>\n
                                        Reasamm<\/h2>\n
                                        Reasamm ehk rea k\u00f5rgus m\u00e4\u00e4ratakse omadusega line-height<\/em>, mille v\u00e4\u00e4rtusteks v\u00f5ivad olla: normal<\/em> (vaikev\u00e4\u00e4rtus), number (normaalk\u00f5rguse kordaja), fikseeritud suurus (m\u00f5\u00f5t\u00fchikutega px, pt v\u00f5i cm) v\u00f5i protsent teksti suurusest (font size<\/em>). N\u00e4iteks m\u00e4\u00e4rame tekstil\u00f5ikudele reak\u00f5rguseks 125% teksti suurusest:<\/p>\n
                                        p {\r\n  line-height: 125%;\r\n}<\/pre>\n
                                        Font ja sellega seonduv<\/h1>\n
                                        Font t\u00e4histab tavaliselt kas konkreetset t\u00e4hem\u00e4rkide kujundust (font) v\u00f5i \u00fcldisemalt k\u00f5ike, mida saab t\u00e4hem\u00e4rkidega seoses m\u00e4\u00e4rata (lisaks suurus, stiil jms).<\/p>\n
                                        T\u00e4hem\u00e4rkide kujunduse v\u00f5ib kirja panna l\u00fchendatud kujul, loetledes k\u00f5igi v\u00f5imalike omaduste v\u00e4\u00e4rtused j\u00e4rgmises j\u00e4rjekorras: font-style font-variant font-weight font-size\/lineheight font-family<\/em>. Kohustuslikud siinjuures on font-size<\/em> ja font-family<\/em>, \u00fclej\u00e4\u00e4nud v\u00f5ib \u00e4ra j\u00e4tta, sellisel juhul kasutatakse nende vaikev\u00e4\u00e4rtuseid.<\/p>\n
                                        N\u00e4iteks:<\/p>\n
                                        p {\r\n  font:italic bold 14px\/30px Arial, sans-serif;\r\n}<\/pre>\n
                                        Font<\/h2>\n
                                        Nagu tekstit\u00f6\u00f6tluseski, saab m\u00e4\u00e4rata kasutatavat fonti. Selleks kasutatakse omadust font-family,<\/em> mille v\u00e4\u00e4rtusena tuleb kirja panna soovitud font. Fonte v\u00f5ib komadega eraldatult loetleda mitu! Sellisel juhul p\u00fc\u00fcab veebilehitseja k\u00f5igepealt kasutusele v\u00f5tta esimese, kui seda fonti s\u00fcsteem ei toeta (seda pole arvutisse paigaldatud vms), siis j\u00e4rgmise jne. N\u00e4iteks m\u00e4\u00e4rame suurtes pealkirjades (element <h1><\/code>) kasutatava fondi:<\/p>\n
                                        h1 {\r\n  font-family: trendy, joan, \"comic sans ms\";\r\n}\r\n<\/pre>\n
                                        CSS3 v\u00f5imaldab kasutada mistahes fonti ehk veebidisainer ei pea enam piirduma vaid fontidega, mis kindlasti kasutaja arvutisse installeeritud oleks.<\/p>\n
                                        Selleks tuleb kasutada @font-face<\/em> reeglit (rule<\/em>), mis v\u00f5imaldab m\u00e4\u00e4rata kasutajas\u00f5braliku nime ja fondi faili URL-i. Disainer saab seega laadida fondi faili oma veebiserverisse ja see laetakse kliendile koos veebilehega.<\/p>\n
                                        N\u00e4iteks:<\/p>\n
                                        @font-face {\r\n  font-family: omanimifondile;\r\n  src: url(URL\/FontFileName.nimelaiend);\r\n}<\/pre>\n
                                        Ja seej\u00e4rel v\u00f5ib teistes stiilides (teiste selektorite jaoks) seda kasutada nagu fonte tavaliselt kasutatakse, n\u00e4iteks:<\/p>\n
                                        h1 {\r\n  font-family: omanimifondile:\r\n}<\/pre>\n
                                        Fondi t\u00fc\u00fcpe on mitu:<\/p>\n
                                          \n
                                        • TTF\u2013 True Type Fonts<\/em>, seda toetavad k\u00f5ik tuntumad brauserid.<\/li>\n
                                        • OTF \u2013 OpenType Fonts<\/em>, seda toetavad k\u00f5ik tuntumad brauserid.<\/li>\n
                                        • WOFF \u2013 Web Open Font Format, <\/em>seda toetavad k\u00f5ik tuntumad brauserid.<\/li>\n
                                        • WOFF2\u2013 Web Open Font Format, seda toetavad Chrome, Opera ja m\u00f6\u00f6ndustega Firefox.<\/em><\/li>\n
                                        • SVG \u2013 scalable-vector-graphic,\u00a0<\/em>seda toetavad Crome, Safari ja Opera.<\/li>\n
                                        • EOT \u2013 Embedded OpenType<\/em>, seda toetab Internet Explorer;<\/li>\n<\/ul>\n
                                          Kui tarvis kasutada erinevate atribuutidega (bold<\/em>, italic<\/em>) kirju ja Teil on vastava kujundusega spetsiaalne font olemas, siis tuleb lisada veel teinegi samasugune @font-face<\/em> reeglit, milles kirjas sama fondi vastava atribuudiga versiooni URL ja lisaks vastav kujunduselement (fontstyle, font-weight, font-stretch<\/em>).<\/p>\n
                                          Mitmeid t\u00fc\u00fcpe fonte toetavad ainult veebilehitsejate uuendatud versioonid. Seega \u00fchildumaks k\u00f5igi veebilehitsejatega, v\u00f5ib oma fondi kirjeldada selliselt, et erinevate veebilehitsejate jaoks lisatakse komaga eraldatult eraldi URL-id.<\/p>\n
                                          N\u00e4iteks:<\/p>\n
                                          @font-face {\r\n  font-family: omanimifondile;\r\n  src: url(\"fondinimi.eot\"), \/*IE jaoks*\/\r\n  url(\"fondinimi.ttf\") format(\"truetype\");\/*teised veebilehitsejad*\/\r\n}<\/pre>\n
                                          Fondi allikana v\u00f5ib p\u00fc\u00fcda kasutada ka lokaalset (kliendi arvutis paiknevat) fonti, mis s\u00e4\u00e4staks vajadusest fonti serverist alla laadida. Selleks m\u00e4\u00e4ratakse fondi allikas url-i asemel local. Sellisel juhul tuleks aga kindluse m\u00f5ttes komaga eraldatult lisada viide ka samale fondile veebis.<\/p>\n
                                          N\u00e4iteks:<\/p>\n
                                          @font-face {\r\n  font-family: minuEriFont;\r\n  src: local(Gentium Bold),\r\n  url(GentiumBold.woff);\r\n}\r\n<\/pre>\n
                                          Kirja suurus<\/h2>\n
                                          Kirja suuruse m\u00e4\u00e4ramiseks kasutatakse omadust font-size, <\/em>mille v\u00e4\u00e4rtus pannakse enamasti kirja pikslites. N\u00e4iteks:<\/p>\n
                                          h1 {\r\n  font-size: 40px;\r\n}<\/pre>\n
                                          NB! Murdarvude kasutamisel tuleb komakoha eraldajana kirjutada punkt!<\/span><\/p>\n
                                          Teksti suuruse v\u00f5ib m\u00e4\u00e4rata ka protsentuaalselt antud teksti sisaldava elemendi (parent<\/em>) teksti suuruse suhtes.<\/p>\n
                                          Omaduse font-size<\/em> v\u00e4\u00e4rtustena v\u00f5ib kasutada ka konstante:<\/p>\n
                                            \n
                                          • xx-small<\/em> \u2013 extra extra v\u00e4ike;<\/li>\n
                                          • x-small<\/em> \u2013 extra v\u00e4ike;<\/li>\n
                                          • small<\/em> \u2013 v\u00e4ike;<\/li>\n
                                          • medium<\/em> \u2013 keskmine;<\/li>\n
                                          • large<\/em> \u2013 suur;<\/li>\n
                                          • x-large<\/em> \u2013 extra suur;<\/li>\n
                                          • xx-large<\/em> \u2013 extra extra suur;<\/li>\n
                                          • smaller<\/em> \u2013 v\u00e4iksem, kui antud teksti sisaldaval elemendil ette n\u00e4htud;<\/li>\n
                                          • larger<\/em> \u2013 suurem, kui antud teksti sisaldaval elemendil ette n\u00e4htud.<\/li>\n<\/ul>\n
                                            Kaldkiri<\/h2>\n
                                            Loomulikult saab m\u00e4\u00e4rata, kas tegemist on kaldkirjaga v\u00f5i mitte. Selleks kasutatakse omadust font-style<\/em>, millel on tavap\u00e4rasteks v\u00e4\u00e4rtusteks on:<\/p>\n
                                              \n
                                            • normal (vaikev\u00e4\u00e4rtus);<\/li>\n
                                            • italic (kaldkiri);<\/li>\n
                                            • oblique (ka kaldkiri).<\/li>\n<\/ul>\n
                                              N\u00e4iteks m\u00e4\u00e4rame kasutame teise taseme pealkirjadel (element <h2><\/code>) kaldkirja:<\/p>\n
                                              h2 {\r\n  font-style: italic;\r\n}<\/pre>\n
                                              Paks kiri<\/h2>\n
                                              Kirja paksus m\u00e4\u00e4ratakse omadusega font-weight<\/em>, mille v\u00e4\u00e4rtusteks on normal, bold, bolder, lighter<\/em>, 100, 200, 300, 400 (sama mis normal<\/em>), 500, 600, 700 (sama mis bold<\/em>), 800, 900.<\/p>\n
                                              N\u00e4iteks m\u00e4\u00e4rame paksu kirjaga l\u00f5ikude kujunduse (loome eraldi klassi elemendile <p><\/code>):<\/p>\n
                                              p.paks {\r\n  font-weight: 800;\r\n}<\/pre>\n
                                              Teksti joonimine, allajoonimine, l\u00e4bikriipsutamine<\/h2>\n
                                              V\u00f5imalik on ka teksti allajoonida v\u00f5i l\u00e4bi kriipsutada. Selleks teksti dekoreeritakse, milleks on omadus text-decoration,\u00a0<\/em>mis toimib l\u00fchendina j\u00e4rgnevatele omadustele:<\/p>\n
                                                \n
                                              • text-decoration-line\u00a0<\/em>(kohustuslik)<\/li>\n<\/ul>\n
                                                M\u00e4\u00e4rab \u00e4ra, millist dekoratsiooni kasutada. V\u00f5imalikud valikud on:<\/span><\/p>\n
                                                  \n
                                                • \n
                                                    \n
                                                  • none<\/em> (vaikev\u00e4\u00e4rtus);<\/li>\n
                                                  • underline<\/em> – allajoonimine;<\/li>\n
                                                  • overline<\/em> \u2013 joon teksti kohal;<\/li>\n
                                                  • line-through<\/em> – l\u00e4bikriipsutamine.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
                                                    N\u00e4iteks m\u00e4\u00e4rame suurtele pealkirjadele allajoonimise:<\/p>\n
                                                    h1 {\r\n  text-decoration-line: underline;\r\n}<\/pre>\n
                                                    Kuna saame l\u00fchendina kasutada ka ainult text-decoration omadust, siis saame eelneva koodi kirjutada ka kujul:<\/p>\n
                                                    h1 { \r\n  text-decoration: underline; \r\n}<\/pre>\n
                                                      \n
                                                    • text-decoration-color<\/em><\/li>\n<\/ul>\n
                                                      M\u00e4\u00e4rab \u00e4ra dekoratsiooni v\u00e4rvi. N\u00e4iteks m\u00e4\u00e4rame teise taseme pealkirjadele punase l\u00e4bikriipsutamise:<\/p>\n
                                                      h2 {\r\n  text-decoration-line: line-through;\r\n  text-decoration-color: red;\r\n}<\/pre>\n
                                                      Sama tulemuse saame kirjutades:<\/p>\n
                                                      h2 {\r\n  text-decoration: line-through red;\r\n}<\/pre>\n
                                                        \n
                                                      • text-decoration-style<\/li>\n<\/ul>\n
                                                        M\u00e4\u00e4rab \u00e4ra dekoratsiooni stiili. V\u00f5imalikud valikud on solid, double, dotted, dashed, wavy, initial<\/em> ja inherit<\/em>. N\u00e4iteks m\u00e4\u00e4rame teksil\u00f5igule lainelise sinise \u00fclajoone:<\/p>\n
                                                        p {\r\n  text-decoration: overline blue wavy;\r\n}<\/pre>\n
                                                        Neid omadusi saab ka koos kasutada, selleks tuleb soovitud v\u00e4\u00e4rtused t\u00fchikutega eraldatult kirja panna.<\/p>\n
                                                        N\u00e4iteks:<\/p>\n
                                                        .imelikultJoonitud {\r\n  text-decoration: underline line-through;\r\n}<\/pre>\n
                                                        Suur- ja v\u00e4iket\u00e4hed<\/h1>\n
                                                        Siinjuures on m\u00f5eldud v\u00f5imalusi kasutada vaid v\u00e4iket\u00e4hti (lowercase<\/em>), vaid suurt\u00e4hti (uppercase<\/em>) v\u00f5i s\u00f5nade alguses suurt\u00e4hti (capitalize<\/em>).<\/p>\n
                                                        Tavap\u00e4raselt kasutatakse omadust text-transform<\/em>, mille vaikev\u00e4\u00e4rtuseks on none<\/em> \u2013 teksti n\u00e4idatakse nagu see kirjutati.<\/p>\n
                                                        N\u00e4iteks:<\/p>\n
                                                        p.suurtahed {\r\n  text-transform: uppercase;\r\n}\r\np.vaiketahed {\r\n  text-transform: lowercase;\r\n}\r\np.sonasuuretahega {\r\n  text-transform: capitalize;\r\n}<\/pre>\n
                                                        Suur- ja v\u00e4iket\u00e4htedega on seotud ka omadus font-variant<\/em> mis v\u00f5imaldab lisaks vaikev\u00e4\u00e4rtusele normal<\/em> veel tr\u00fckit\u00e4htede (kapiteelkiri ehk small caps<\/em>) kasutamist.<\/p>\n
                                                        p.trykitahed {\r\n  font-variant: small-caps;\r\n}\r\n<\/pre>\n
                                                        T\u00e4he- ja s\u00f5nade vahe<\/h1>\n
                                                        Sarnaselt tekstit\u00f6\u00f6tlusprogrammidele saab ka veebilehel t\u00e4htede omavahelist vahet muuta ning seel\u00e4bi n\u00e4iteks h\u00f5rendatud teksti luua. Kasutusel on omadus letter-spacing<\/em> millel on v\u00f5imalikud v\u00e4\u00e4rtused normal<\/em>, inherit<\/em> (mille korral kasutatakse antud tekstiobjekti sisaldava elemendi t\u00e4hevahe) ja arvv\u00e4\u00e4rtus koos<\/p>\n
                                                        N\u00e4iteks:<\/p>\n
                                                        p.horendatud {\r\n  letter-spacing: 3px;\r\n}<\/pre>\n
                                                        V\u00f5imalik on m\u00e4\u00e4rata ka s\u00f5nade vahel kasutatavat ruumi, selleks on kasutusel omadus word-spacing<\/em>. Kasutada saab v\u00e4\u00e4rtuseid: normal<\/em> (vaikev\u00e4\u00e4rtus), inherit<\/em> (vastav omadus p\u00e4ritakse tekstiobjekti sisaldavalt elemendilt) ja arvv\u00e4\u00e4rtus.<\/p>\n
                                                        p.suuremsonavahe {\r\n  word-spacing: 5px;\r\n}<\/pre>\n
                                                        Teksti “murdmine”<\/h1>\n
                                                        Teksti murdmise v\u00f5imaldab s\u00f5nu vajadusel ridade vahel poolitada. Selleks on kaks omadust word-break<\/em> ja word-wrap<\/em>.<\/p>\n
                                                        Esimene neist, word-break<\/em>, poolitab s\u00f5nu mistahes kahe t\u00e4he vahel ja tal on v\u00f5imalikud v\u00e4\u00e4rtused:<\/p>\n
                                                          \n
                                                        • normal<\/em> \u2013 s\u00f5nu poolitatakse tavap\u00e4raste reeglite j\u00e4rgi (vaikev\u00e4\u00e4rtus);<\/li>\n
                                                        • break-all<\/em> \u2013 teksti rida v\u00f5ib murda mistahes kahe tekstim\u00e4rgi vahel;<\/li>\n
                                                        • keep-all<\/em> \u2013 murdmine mistahes kahe t\u00e4he vahel on keelatud;<\/li>\n
                                                        • initial<\/em> \u2013 seab omaduse vaikev\u00e4\u00e4rtusele;<\/li>\n
                                                        • inherit<\/em> \u2013 omaduse v\u00e4\u00e4rtus p\u00e4ritakse vanem-elemendilt.<\/li>\n<\/ul>\n
                                                          N\u00e4iteks:<\/p>\n
                                                          p {\r\n  word-break: break-all;\r\n}<\/pre>\n
                                                          Teine neist, word-wrap<\/em>, poolitab vaid pikki s\u00f5nu ja tal on j\u00e4rgmised omadused:<\/p>\n
                                                            \n
                                                          • normal<\/em> \u2013 s\u00f5nu poolitatakse vaid lubatud kohtadel (vaikev\u00e4\u00e4rtus);<\/li>\n
                                                          • break-word<\/em> \u2013 lubab poolitada s\u00f5nu, mida ei tohiks (unbreakable words<\/em>);<\/li>\n
                                                          • initial<\/em> \u2013 seab omaduse vaikev\u00e4\u00e4rtusele;<\/li>\n
                                                          • inherit<\/em> \u2013 omaduse v\u00e4\u00e4rtus p\u00e4ritakse vanem-elemendilt.<\/li>\n<\/ul>\n
                                                            Teksti suund<\/h1>\n
                                                            Tavap\u00e4rane teksti lugemissuund on vasakult paremale, kuid vajadusel saab teksti ka vastupidises suunas kirjutada. Selleks kasutatakse omadust direction<\/em>, millel on kaks v\u00f5imalikku v\u00e4\u00e4rtust: ltr (left to right)<\/em> ja rtl (right to left)<\/em>.<\/p>\n
                                                            div.pahupidi {\r\n  direction: rtl;\r\n}<\/pre>\n
                                                            T\u00fchja ruumi haldus<\/h1>\n
                                                            CSS stiili abil saab m\u00e4\u00e4rata ka seda, kuidas k\u00e4itutakse veebilehe autori poolt lisatud t\u00fchikute, reavahetuste (sisestusklahvi (enter<\/em>) vajutused), tabulaatoriklahvi vajutuste jms \u201et\u00fchja ruumiga\u201c (white space<\/em>).<\/p>\n
                                                            Kasutada saab omadust white-space<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:<\/p>\n
                                                              \n
                                                            • normal<\/em> \u2013 kogu \u201et\u00fchi ruum\u201c (t\u00fchikute jada jms) pannakse kokku \u00fcheks t\u00fchikuks. Reavahetus (text wrap<\/em>) toimub vastavalt vajadusele. See on vaikev\u00e4\u00e4rtus.<\/li>\n
                                                            • nowrap<\/em> \u2013 kogu \u201et\u00fchi ruum\u201c (t\u00fchikute jada jms) pannakse kokku \u00fcheks t\u00fchikuks. Automaatset reavahetust ei toimu kunagi. Reavahetus toimub vaid HTML elemendi <br><\/code> kasutamisel.<\/li>\n
                                                            • pre<\/em> \u2013 kogu \u201et\u00fchi ruum\u201c s\u00e4ilitatakse nii nagu see on. Reavahetus toimub seal, kus autor on selle m\u00e4\u00e4ranud (sisestusklahviga (enter<\/em>)). See v\u00e4\u00e4rtus vastab HTML elemendile <pre><\/code>!<\/li>\n
                                                            • pre-line<\/em> \u2013 kogu \u201et\u00fchi ruum\u201c (t\u00fchikute jada jms) pannakse kokku \u00fcheks t\u00fchikuks. Reavahetus toimub automaatselt vastavalt vajadusele ning ka kohtades, kus autor on m\u00e4\u00e4ranud (sisestusklahviga (enter<\/em>)).<\/li>\n
                                                            • pre-wrap<\/em> \u2013 kogu \u201et\u00fchi ruum\u201c s\u00e4ilitatakse nii nagu see on. Reavahetus toimub automaatselt vastavalt vajadusele ning ka kohtades, kus autor on m\u00e4\u00e4ranud (sisestusklahviga (enter<\/em>)).<\/li>\n
                                                            • inherit<\/em> \u2013 objekt p\u00e4rib vastava omaduse teda sisaldavalt elemendilt (parent<\/em>).<\/li>\n<\/ul>\n
                                                              N\u00e4iteks:<\/p>\n
                                                              p.naguoli {\r\n  white-space: pre;\r\n}<\/pre>\n
                                                              Loendid<\/h1>\n
                                                              Loendite (lists<\/em>, html elemendid <ol><\/code> ja <ul><\/code>) jaoks kehtivad k\u00f5ik eespool kirjeldatud teksti kujundusvahendid kuid lisaks saab neil m\u00e4\u00e4rata numbrite\/t\u00e4ppide stiili. Selleks kasutatakse omadust list-style-type<\/em>.<\/p>\n
                                                              Lisaks loendi liigist olevatele spetsiifilistele v\u00e4\u00e4rtusele on m\u00f5lemal loendil ka \u00fchised v\u00e4\u00e4rtused:<\/p>\n
                                                                \n
                                                              • none – loendit\u00e4hised puuduvad;<\/li>\n
                                                              • initial \u2013 seab selle omaduse esialgsele v\u00e4\u00e4rtusele;<\/li>\n
                                                              • inherit – loend p\u00e4rib vastava omaduse teda sisaldavalt elemendilt (parent);<\/li>\n<\/ul>\n
                                                                Nummerdatud loend<\/h2>\n
                                                                Nummerdatud loendi puhul (element <ol><\/code>) saab omaduse list-style-type<\/em> v\u00e4\u00e4rtustena lisaks \u00fchistele v\u00e4\u00e4rtustele kasutada j\u00e4rgmiseid v\u00e4\u00e4rtuseid:<\/p>\n
                                                                  \n
                                                                • decimal \u2013 tavalised k\u00fcmnends\u00fcsteemi araabia numbrid, see on ka vaikev\u00e4\u00e4rtus;<\/li>\n
                                                                • decimal-leading-zero \u2013 araabia numbritele lisatakse polsterdusena ette 0;<\/li>\n
                                                                • lower-roman \u2013 rooma numbrid v\u00e4iket\u00e4htedega;<\/li>\n
                                                                • upper-roman \u2013 rooma numbrid suurt\u00e4htedega (tavaline);<\/li>\n
                                                                • lower-alpha \u2013t\u00e4hestiku v\u00e4iket\u00e4hed;<\/li>\n
                                                                • upper-alpha \u2013t\u00e4hestiku suurt\u00e4hed;<\/li>\n
                                                                • lower-latin \u2013 ladina t\u00e4hestiku v\u00e4iket\u00e4hed;<\/li>\n
                                                                • upper-latin \u2013 ladina t\u00e4hestiku suurt\u00e4hed;<\/li>\n
                                                                • lower-greek, \u2013 kreeka t\u00e4hestiku v\u00e4iket\u00e4hed;<\/li>\n
                                                                • armenian \u2013 traditsioonilised armeenia numbrid;<\/li>\n
                                                                • georgian \u2013 traditsiooniline gruusia numeratsioon: an, ban, gan \u2026;<\/li>\n
                                                                • cjk-ideographic \u2013 ideograafilised numbrid;<\/li>\n
                                                                • hebrew \u2013 traditsioonilised heebrea numbrid;<\/li>\n
                                                                • hiragana \u2013 traditsioonilised Hiragana numbrid;<\/li>\n
                                                                • hiragana-iroha \u2013 traditsioonilised Hiragana iroha numbrid;<\/li>\n
                                                                • katakana \u2013 traditsioonilised Katakana numbrid;<\/li>\n
                                                                • katakana-iroha \u2013 traditsioonilised Katakana iroha numbrid.<\/li>\n<\/ul>\n
                                                                  N\u00e4iteks:<\/p>\n
                                                                  ol {\r\n  list-style-type: upper-roman;\r\n}\r\n<\/pre>\n
                                                                  T\u00e4pploend<\/h2>\n
                                                                  T\u00e4pploendi puhul (element <ul><\/code>) saab omaduse list-style-type<\/em> v\u00e4\u00e4rtustena lisaks \u00fchistele v\u00e4\u00e4rtustele kasutada v\u00e4\u00e4rtuseid:<\/p>\n
                                                                    \n
                                                                  • disc \u2013 t\u00e4ppideks on seest t\u00e4idetud ringid, see on ka vaikev\u00e4\u00e4rtus;<\/li>\n
                                                                  • circle \u2013 t\u00e4ppideks on seest t\u00fchjad ringid;<\/li>\n
                                                                  • square \u2013 t\u00e4ppideks on ruudud.<\/li>\n<\/ul>\n
                                                                    N\u00e4iteks:<\/p>\n
                                                                    ul {\r\n  list-style-type: square;\r\n}<\/pre>\n
                                                                    T\u00e4pploendi puhul saab t\u00e4ppidena kasutada ka pildifaili. Selleks kasutatakse omadust list-styleimage<\/em>, mille v\u00e4\u00e4rtuseks on soovitud pildifaili URL.<\/p>\n
                                                                    N\u00e4iteks kasutame t\u00e4pploendis tavaliste t\u00e4ppide asemel pildifaili “leht.png”:<\/p>\n
                                                                    ul {\r\n  list-style-image: url(\"leht.png\");\r\n}<\/pre>\n
                                                                    Numbri\/t\u00e4pi paigutus<\/h2>\n
                                                                    Loendite puhul saab m\u00e4\u00e4rata ka seda, kas loendielemendi (list item<\/em> ehk html element <li><\/code>) marker (t\u00e4pp v\u00f5i number) paigutatakse v\u00e4ljapoole sisu piirkonda (content flow) ehk ettepoole sisu vasakut serva v\u00f5i piirkonna sisse.<\/p>\n
                                                                    Selleks on kasutusel omadus list-style-position<\/em>, mille v\u00f5imalikud v\u00e4\u00e4rtused on:<\/p>\n
                                                                      \n
                                                                    • outside<\/em> \u2013 t\u00e4pp\/number asub v\u00e4ljaspool sisu piirkonda, see on ka vaikev\u00e4\u00e4rtus;<\/li>\n
                                                                    • inside<\/em> \u2013 t\u00e4pp\/number asub sisu piirkonnas;<\/li>\n
                                                                    • inherit<\/em> \u2013 omaduse v\u00e4\u00e4rtus p\u00e4ritakse loendit sisaldavalt elemendilt;<\/li>\n
                                                                    • initial<\/em> \u2013 seab selle omaduse esialgsele v\u00e4\u00e4rtusele.<\/li>\n<\/ul>\n
                                                                      N\u00e4iteks:<\/p>\n
                                                                      \"List
                                                                      Loendielemendi marker v\u00e4ljaspool sisu piirkonda (outside)<\/figcaption><\/figure>\n
                                                                      \"list
                                                                      Loendielemendi marker sisu piirkonnas (inside)<\/figcaption><\/figure>\n
                                                                      Loendi stiil l\u00fchidalt<\/h2>\n
                                                                      Loendite v\u00e4limuse saab seada ka ainult \u00fche omadusega list-style<\/em>. Selle v\u00e4\u00e4rtusena pannakse \u00fcksteise j\u00e4rel t\u00fchikutega eraldatult kirja list-style-type, list-style-position<\/em> ja list-style-image<\/em> v\u00e4\u00e4rused.<\/p>\n
                                                                      N\u00e4iteks:<\/p>\n
                                                                      .minuloend {\r\n  list-style: circle inside url(\"leht.png\");\r\n}<\/pre>\n
                                                                      NB! Kui m\u00f5ni kolmest v\u00e4\u00e4rtusest on kirja panemata siis kasutatakse vastava omaduse vaikev\u00e4\u00e4rtust!<\/span><\/p>\n
                                                                      Tsitaadid<\/h1>\n
                                                                      Ka tsitaatide (quotes) jaoks pakub css oma vahendeid, millega m\u00e4\u00e4ratakse html elemendil <q><\/code> kasutatavad jutum\u00e4rgid. Seejuures saab m\u00e4\u00e4rata erinevaid m\u00e4rke tsitaatidele, mis on omakorda tsitaadi sees.<\/p>\n
                                                                      Kasutatakse omadust quotes<\/em>, mille v\u00e4\u00e4rtustena saab kasutada:<\/p>\n
                                                                        \n
                                                                      • none<\/em> \u2013 keelab content omadusega (:before<\/em> ja :after<\/em> pseudoelementides) open-quote<\/em> ja close-quote<\/em> abil jutum\u00e4rkide tekitamise.<\/li>\n
                                                                      • V\u00e4\u00e4rtusteks on soovitavad m\u00e4rgid. Esimesed kaks m\u00e4rki on esimese taseme jutum\u00e4rgid ja teised kaks jutum\u00e4rki teise taseme jutum\u00e4rgid.<\/li>\n
                                                                      • inherit<\/em> \u2013 omaduse v\u00e4\u00e4rtus p\u00e4ritakse loendit sisaldavalt elemendilt;<\/li>\n
                                                                      • initial<\/em> \u2013 seab selle omaduse esialgsele v\u00e4\u00e4rtusele.<\/li>\n<\/ul>\n
                                                                        N\u00e4ide 1, \u00fcks jutum\u00e4rkide tase:<\/p>\n
                                                                        #a {\r\n  quotes: \"'\" \"'\";\r\n}<\/pre>\n
                                                                        HTML:<\/p>\n
                                                                        <p><q id=\"a\">N\u00e4idislause jutum\u00e4rkides.<\/q><\/p><\/pre>\n
                                                                        Tulemus: ‘N\u00e4idislause jutum\u00e4rkides.’<\/p>\n
                                                                        N\u00e4ide 2, kaks jutum\u00e4rkide tase:<\/p>\n
                                                                        #c {\r\n  quotes: \"<\" \">\" \"'\" \"'\";\r\n}<\/pre>\n
                                                                        HTML:<\/p>\n
                                                                        <p><q id=\"c\">Siin on <q>tsitaat<\/q> tsitaadi sees.<\/q><\/p><\/pre>\n
                                                                        Tulemus: <Siin on ‘tsitaat’ tsitaadi sees.><\/p>\n
                                                                        Tekstiefektid<\/h1>\n
                                                                        CSS3 pakub lisaks tavap\u00e4rastele teksti vormindamisvahenditele ka efekte.<\/p>\n
                                                                        Teksti vari<\/h2>\n
                                                                        CSS-i kasutades pole tekstile varju lisamiseks vaja kasutada fotot\u00f6\u00f6tluse abi ning teksti veebilehele pildina lisada. Kasutada on omadus text-shadow.<\/em>\u00a0M\u00e4\u00e4rata tuleb kaks kohustuslikku parameetrit: horisontaalne nihe ja vertikaalne nihe. Lisaks saab m\u00e4\u00e4rata kaks valikulist parameetrit: h\u00e4gustamine ja varju v\u00e4rv.<\/p>\n
                                                                        N\u00e4iteks:<\/p>\n
                                                                        h2 {\r\n  text-shadow: 10px 10px 5px #ff0000;\r\n}<\/pre>\n
                                                                        \"punane
                                                                        Varjuga tekst<\/figcaption><\/figure>\n
                                                                        Tekstile v\u00f5ib lisada mitu varju, selleks tuleb need lihtsalt komadega eraldatult j\u00e4rjest kirja panna!<\/p>\n
                                                                        Tekst \u00fcle serva<\/h2>\n
                                                                        Sageli ei mahu tekst etteantud pinnale \u00e4ra. Sellisel juhul v\u00f5ib n\u00fc\u00fcd anda visuaalse vihje, et tekst j\u00e4tkub!<\/p>\n
                                                                        Selleks kasutatakse omadust text-overflow<\/em>, millel on v\u00f5imalikud v\u00e4\u00e4rtused:<\/p>\n
                                                                          \n
                                                                        • clip<\/em> \u2013 viimane s\u00f5na j\u00e4\u00e4b poolikuks (vaikev\u00e4\u00e4rtus),<\/li>\n
                                                                        • ellipsis<\/em> \u2013 teksti j\u00e4tkumise tunnuseks traditsioonilised 3 punkti;<\/li>\n
                                                                        • string<\/em> \u2013 n\u00e4idatakse etteantud teksti;<\/li>\n
                                                                        • initial<\/em> \u2013 seab omaduse vaikev\u00e4\u00e4rtusele;<\/li>\n
                                                                        • inherit<\/em> \u2013 omaduse v\u00e4\u00e4rtus p\u00e4ritakse vanem-elemendilt.<\/li>\n<\/ul>\n
                                                                          N\u00e4iteks:<\/p>\n
                                                                          div {\r\n  text-overflow: ellipsis;\r\n}<\/pre>\n
                                                                          Tekst mitmes veerus<\/h2>\n
                                                                          CSS-i abil on v\u00f5imalik teksti ajakirjanduslikus stiilis veergudesse (columns<\/em>) paigutada!<\/p>\n
                                                                          Seda saab teha kahel moel:<\/p>\n
                                                                            \n
                                                                          • andes ette veergude laiuse column-width, v\u00e4\u00e4rtus pikslites, protsentides, em-ides jms;<\/li>\n
                                                                          • v\u00f5i soovitud veergude arvu column-count, v\u00e4\u00e4rtuseks positiivne t\u00e4isarv.<\/li>\n<\/ul>\n
                                                                            M\u00f5lemal juhul saab m\u00e4\u00e4rata veel omadusi:<\/p>\n
                                                                              \n
                                                                            • column-gap \u2013 veergude vahekaugus (v\u00e4\u00e4rtuseks positiivne arv pikslites, em-ides jms);<\/li>\n
                                                                            • column-rule \u2013 veergusid eraldav vertikaalne joon (v\u00e4\u00e4rtuseks t\u00fc\u00fcpiline border omadus).<\/li>\n<\/ul>\n
                                                                              N\u00e4iteks:<\/p>\n
                                                                              div {\r\n  width: 900px;\r\n  column-count: 3;\r\n  column-gap: 50px;\r\n  column-rule: 2px solid red;\r\n}<\/pre>\n
                                                                              \"veergudes
                                                                              Kolme veergu paigutatud tekst<\/figcaption><\/figure>\n","protected":false},"author":1,"menu_order":2,"template":"","meta":{"_mi_skip_tracking":false,"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"part":310,"_links":{"self":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/335"}],"collection":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":12,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/335\/revisions"}],"predecessor-version":[{"id":449,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/335\/revisions\/449"}],"part":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/parts\/310"}],"metadata":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/335\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/media?parent=335"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapter-type?post=335"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/contributor?post=335"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/license?post=335"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}