Arvutiteaduse instituut
  1. Esileht
  2. Noored Koodi
EN
Logi sisse

Noored Koodi

Veebilehed

<< Kõik kursused

  • Kursusest
    • 0. Sissejuhatus veebimaailma

HTML

  • 1. Mis on HTML?
  • 2. Tekst ja viidad
  • 3. Loendid. Tabelid
  • 4. Pildid. Audio. Video

CSS

  • 5. Mis on CSS?

5.1 Ülevaade CSS-ist 5.2 CSS-i süntaks 5.3 Erinevad selektorid 5.4 CSS-i tekstitöötlus

  • 6. Tabelid, loendid, piirid
  • 7. Pseudoelemendid ja positsioneerimine
  • 8. Kursorid, taustad, pildid
Peatüki sisukord

5.1 Ülevaade CSS-ist

1990-ndatel oli veeb plahvatuslikult arenenud ja levinud, tekkis veebilehtede kujundamise probleem. Jaanuaris 1997. sai valmis HTML 3.2, mille raames lisati HTML keelele terve hulk vormindusega seotud atribuute (color, bgcolor jpt.). See lisas võimalusi sisu kujundamiseks, kuid samas muutis suurte portaalite arendamise väga vaevarikkaks - oli vaja meeles pidada ja lisada omadusi igale üksikule lehele või sõnale. See tõttu juba aasta lõpus kuulutati välja HTML 4 standardi, milles hakati kujunduselementidest loobuma. Kujunduse eest pidi vastutama CSS.

CSS (ingl. k. Cascading Style Sheets) on astmelised stiililehed ehk kaskaadlaadistik - keel, milles märgitakse üles veebilehtede kujundus. Stiililehed (ingl. k. style sheets) koosnevad sarnaselt hüperteksti märgistuskeelega reeglitest, mille abil veebilehitseja oskab dokumenti kasutajale kuvada.

Sõna kaskaad tähendab CSS mõistes seda, et olenemata stiili asukohast, mõjutab see veebidokumenti. Kaskaadlaadistikku saab HTML-i dokumendiga siduda kolm erineval viisil:

  • välise lehe linkimine (ingl. k. external style sheet) - kui on vaja kujundada tervet portaali (mitmeid erinevaid lehti), siis kõik stiilid (kujundamise reeglid) kirjutatakse eraldi faili laiendiga .css, ning failile viidatakse HTML lehe päisest märgendi <link> abil järgmisel kujul:
<link rel="stylesheet" type="text/css" href="stiililehe_URL" />.
Seega võiks vastav märgend välja näha näiteks:
<link rel="stylesheet" type="text/css" href="omastiil.css" />

Kasutades välist stiililehte (css fail) saab veebilehe sisu ning kujunduse lahus hoida, mis lihtsustab veebilehe loomist ja hilisemat muutmist. Veebilehe kujunduse muutmiseks pole hiljem tarvis üle vaadata terve HTML dokumendi kõiki märgendeid vaid piisab eraldi CSS faili muutmisest või asendamisest.

  • sisemise stiil veebilehe päises (ingl. k. internal style sheet) - kui on vaja kujundada vaid üks konkreetne veebileht - CSS reeglid lisatakse HTML-dokumendi päisesse (paarismärgendi <head> sisse) paarismärgendi <style> vahele:
  • reastiil (ingl. k. inline style) - kui on vaja ühte konkreetset veebilehe märgendit konkreetses kontekstis eriliselt kujundada, siis lisatakse vastava HTML algusmärgendisse argument style järgmisel kujul:
Reastiili kasutamisel läheb palju CSS võimalusi raisku, sest stiil luuakse konkreetse HTML algusmärgendisse.

Kui veebidokumendis on kasutatud erinevad viisid stiilide lisamiseks, siis stiile võetakse arvesse järgmises järjekorras (esimene on kõrgeima prioriteediga):

  1. reastiil
  2. sisemine stiil
  3. väline stiil
  4. veebilehitseja vaikestiil (ingl. k. browser default) - veebilehitseja sätetes on määratud kuidas veebilehe elemente näidatakse, kui veebilehe autor pole ise midagi määranud.
Peatüki sisukord
  • Arvutiteaduse instituut
  • Loodus- ja täppisteaduste valdkond
  • Tartu Ülikool
Tehniliste probleemide või küsimuste korral kirjuta:

Kursuse sisu ja korralduslike küsimustega pöörduge kursuse korraldajate poole.
Õppematerjalide varalised autoriõigused kuuluvad Tartu Ülikoolile. Õppematerjalide kasutamine on lubatud autoriõiguse seaduses ettenähtud teose vaba kasutamise eesmärkidel ja tingimustel. Õppematerjalide kasutamisel on kasutaja kohustatud viitama õppematerjalide autorile.
Õppematerjalide kasutamine muudel eesmärkidel on lubatud ainult Tartu Ülikooli eelneval kirjalikul nõusolekul.
Courses’i keskkonna kasutustingimused