CSS deklaratsioonid

Autor: Margo Munner | Kuupäev: 03.10.2007

CSS sisu - deklaratsioonid.

Alustame reaalset CSS-i abli disainimist. Selleks tuleme tagasi varemkasutatud "Lorem ipsum" näitelehe juurde ning teeme samasse kataloogi koos "Lorem ipsum" lehega uue faili, näiteks nimeks lorem_ipsum_stiilid.css. Selleks, et seda stiililehte siduda näidslehe failiga, kasutame eelmises juhendis nimetatud element link võimalust. Nüüd peaks meie näitelehe XHTML-koodi osa nägema välja selline:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="et" lang="et">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>"Lorem ipsum" teksti tutvustav dokument</title>
<link rel="STYLESHEET" type="text/css" media="all" href="lorem_ipsum_stiilid.css" />
</head>
<body>

<div id="leht">
  <div id="pais">
  </div>
  <div id="keskosa">
    <div id="vasak_menuu">
      <ul>
        <li><a href="#" class="aktiivne">Mis on Lorem ipsum?</a></li>
        <li><a href="#">Ajalugu</a></li>
        <li><a href="#">Kogu tekst</a></li>
        <li><a href="#">Tõlgitud tekst</a></li>
        <li><a href="#">Näited</a></li>
        <li><a href="#">Viited</a></li>
      </ul>
    </div>
    <div id="sisuosa">

    <h1>"Lorem ipsum" teksti tutvustav dokument</h1>
    
    <h2>Mis on "Lorem ipsum" tekst?</h2>
    <p>Lorem Ipsum on n.ö. ajutine tekst, mida on kasutatakse siis, kui midagi
    muud pole (veel) dokumenti kirjutada.</p>
    <p>Rohkem infot Lorem Ipsum'i kohta leiab järgnevatelt
    aadressidelt:</p>
    <ul>
      <li><a href="http://www.lipsum.com/">lipsum.com/</a></li>
      <li><a href="http://en.wikipedia.org/wiki/Lorem_Ipsum">Wikipedia artikkel</a></li>
    </ul>
    
    <h2>"Lorem ipsum" esimesed lõigud?</h2>

    <div class="artiklisisene_pilt">
      <a href="cicero.jpg"><img src="cicero_v.jpg" alt="Cicero" width="81" height="120" /></a>
      <p>Pealkiri: Cicero<br />
      Allikas: Wikipedia.org</p>
    </div>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris convallis dapibus orci. Vestibulum
    id tellus scelerisque est aliquet dignissim. Ut accumsan. Sed porttitor enim in pede. Vestibulum ut quam a 
    dolor tempus accumsan. Nulla adipiscing. Sed interdum rutrum tortor. Sed felis quam, lacinia sit amet, 
    ultrices id, hendrerit vel, diam. Praesent et enim. Suspendisse ultrices, metus et hendrerit nonummy, nisl 
    pede auctor dui, ac vestibulum justo risus ac nulla. Vestibulum gravida sem et sapien. Donec sollicitudin. 
    Donec convallis posuere quam.</p>

    <h2>Donec et lacus ac massa congue fermentum</h2>

    <p>Mauris pharetra tempus leo. Fusce mollis. Aliquam erat volutpat. Curabitur quis arcu. Aenean vitae 
    est. Sed imperdiet eleifend est. Maecenas turpis lectus, tristique at, laoreet et, pellentesque ac, felis. 
    Nulla quis dui. Sed metus diam, feugiat vel, laoreet et, sodales eu, turpis. Curabitur in massa et sem 
    viverra auctor. Suspendisse aliquam ultrices pede. Nullam risus nibh, ullamcorper non, consequat a, rhoncus 
    vitae, eros. Suspendisse scelerisque nisl in tortor. Curabitur iaculis.</p>

    <h2>Ut scelerisque mi iaculis est</h2>

    <p>Phasellus nisi lacus, auctor non, tincidunt in, egestas ut, metus. Sed feugiat fringilla urna. 
    Aenean dignissim. Aenean iaculis, dolor ut pellentesque bibendum, massa mi aliquam orci, sed consequat 
    odio lorem a tellus. Nullam pede massa, congue non, nonummy ut, vehicula sit amet, pede. Donec eget nunc. 
    Mauris ut nibh ut mi semper dapibus. Morbi hendrerit sem accumsan enim. Ut ut odio. Morbi consequat tortor 
    eget mi. Donec vitae justo vel dolor sagittis faucibus. Cras ipsum leo, molestie eu, laoreet eu, dapibus 
    id, diam. Nullam erat leo, dapibus quis, vestibulum vitae, ultrices ac, dui. Nam auctor quam eu erat. 
    Phasellus tortor nunc, faucibus ac, tristique sit amet, cursus quis, massa. Sed lectus risus, eleifend 
    sagittis, fringilla ut, molestie eget, nulla. Nam dapibus felis id pede. Maecenas scelerisque lacinia 
    dolor.</p>

    <h2>Fusce eleifend luctus augue</h2>

    <p>Duis auctor purus vel quam. Ut tincidunt aliquet mauris. Praesent ligula. Ut sed turpis. Ut eu 
    ante. Pellentesque enim. Duis laoreet. Proin ornare, ante eget placerat lacinia, nisl pede egestas diam, 
    vel facilisis urna pede eu eros. Vestibulum vel eros. Praesent mattis. Maecenas urna nisl, rhoncus vitae, 
    varius id, convallis vel, velit. Maecenas sit amet turpis. Maecenas id arcu. Pellentesque vitae eros in 
    felis suscipit rutrum. Aliquam nunc velit, vulputate a, viverra faucibus, nonummy ac, nulla. In justo 
    sapien, lobortis egestas, cursus sed, vestibulum in, lorem. Nulla facilisi.</p>

    <h2>Mauris id lorem et tellus tincidunt porttitor</h2>

    <p>Nulla vehicula. Integer felis tortor, suscipit sit amet, ultricies quis, dictum nec, mauris. 
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer 
    nulla. Cras facilisis, leo et placerat fermentum, magna erat tincidunt tellus, ut tristique metus urna 
    eget purus. Suspendisse rhoncus felis dignissim orci. Integer sed arcu lacinia dui vehicula tristique. 
    Maecenas volutpat, arcu ac elementum suscipit, urna mauris sagittis justo, vitae egestas lorem sem at 
    lectus. Nam in eros.</p>

    <h2>Aliquam in libero et odio mattis interdum</h2>

    <p>Vestibulum suscipit ligula non libero. Morbi diam nibh, porttitor at, imperdiet sed, lobortis 
    lobortis, diam. Ut adipiscing imperdiet tortor. Nulla accumsan, risus vitae euismod commodo, orci risus 
    dignissim nisi, at nonummy lacus arcu iaculis diam. Nunc magna leo, consequat aliquam, egestas non, 
    interdum in, lorem. Praesent ornare mattis felis. Vivamus volutpat interdum nunc. Sed vel ante quis eros 
    faucibus tempor. Suspendisse euismod ante at pede. Pellentesque et neque. Fusce auctor pede. Duis a massa. 
    Mauris et felis. Cras malesuada cursus lorem. Aliquam urna. Maecenas non ante ac tellus euismod fringilla.</p>

    <h2>Mauris tincidunt gravida lorem</h2>

    <p>Cras et nibh ut mauris feugiat consectetuer. Morbi venenatis tristique eros. Duis posuere, 
    nibh nec iaculis hendrerit, nisl ipsum elementum felis, et venenatis tortor nunc vel augue. Ut nonummy 
    posuere nulla. Aliquam at justo. Phasellus nibh. Etiam eleifend pharetra diam. Nulla facilisi. Etiam 
    mauris metus, faucibus at, tempor sit amet, tincidunt nec, odio.</p>

    </div>
  </div>
  <div id="jalus">
  See on minu leht. Tänan lugemast!
  </div>
</div>

</body>
</html>

Salvestame näitelehe ning - selliseks jääb see XHTML fail kuni antud juhendi lõpuni. See tähendab - me kasutame ainult CSS-i, et muuta "Lorem ipsum" lehe väljanägemist. Avame siis (kui juba ei ole avatud) lorem_ipsum_stiilid.css faili ning hakkame seda täiendama. Esiteks lisame koodi järgneva:

body, html, h1, h2, li, ul, p {
  margin: 0;
  padding: 0;
}

Võrgulehitsejad lisavad kõigile plokk-elementidele vaikeväärtustena teatavad vahealad. Eemaldame siin kohe alguses need täielikult, et võrgulehitsejate vaikeväärtused ei hakkaks edaspidi häirima lehe ülesehitamist.

#leht {
  min-width: 700px;
}

Määrame kogu lehte "piiravale" plokile minimaalsel laiuse. See on selleks, et võrgulehitseja akent väga palju kokku surudes ei muutuks leht täiesti segipaisatuks. Internet Explorer seda atribuuti küll ei tunnista, kuid selle kasutamine sellises kontekstis ei tee ka kellelegi liiga - vähemalt teistes lehitsejates ei paisata lehte segamini.

#pais {
  height: 65px;
  background-image: url(lorem_ipsum.png);
  background-repeat: no-repeat;
  background-position: top left;
  border-bottom: 1px solid #ff8040;
}

Lehe päiseosa CSS. Ütleme, et päis peab olema 65 pikslit kõrge plokk, mis kasutab taustapilti (logo). Samuti anname päisele alumise piirjoone.

#vasak_menuu {
  position: absolute;
  width: 200px;
  left: 0;
  padding-top: 10px;
}

Positsioneerime vasaku menüü absoluutselt - 200 pikslit lai plokk, mis algab kohe võrgulehitseja vasakust äärest. Määrame ka veidikene vaheala, et sisu ei kuvataks kohe ploki siseäärele.

#vasak_menuu ul {
  list-style-image: url(nooleke.png);
}

See atribuut on mõeldud ainult vasakus menüüs asuvale loendile. Teeme ilusa efekti - lisame väikese PNG-formaadis pildi igale loendielemendile (praegusel juhul siis navigeerimismenüü igale lingile).

#vasak_menuu li {
  position: relative;
  margin-left: 28px;
  padding-top: 5px;
  padding-bottom: 5px;
}

Tegeleme veidike vasakpoolse menüü loendielementide paigutuse-seadistusega. Määrame selle, et loendi sisu asuks ühtsel kaugusel vasakust äärest (et oleks ka veidike vaheruumi) ning selle, et kahe elemendi vahele jääks samuti veidike ruumi.

#vasak_menuu a {
  font-family: helvetica, arial, sans-serif;
  font-size: 0.8em;
  text-decoration: underline;
  color: #003d79;
  background-color: inherit;
}

Vasaku menüü linkide stiliseerimine. Esmalt määrame ära kirjatüübi (ehk fondi) ning suuruse, seejärel ütleme, et tavaolukorras peaksid lingid olema allajoonitud. Määrame ka värvi. NB! Standard nõuab, et iga reegli juures, kus on kasutatud atribuuti color oleks kasutatud ka atribuuti background-color ning vastupidi. Selleks, et mitte rikkuda oma lehe kujundust, oleks mõistlik nii mõnelgi juhul kasutada väärtusena inherit ehk siis kasutada vanem-elemendilt "päritavat" väärtust.

#vasak_menuu a:hover {
  text-decoration: none;
}

Kasutame pseudo-elementi, mille abil määrame selle, mis muutub lingi kujutamises siis, kui hiirega üle selle liikuda. Antud juhul määrasime eelmise reegli juures äramärgitud atribuudile uue väärtuse - seega nüüd juhtub see, et hiirekursoriga lingist üleminekul kaob allajoonimine.

#vasak_menuu a:visited {
  color: #0067ce;
  background-color: inherit;
}

Kasutame teist pseudo-elementi, millega määrame selle, milline näeb välja juba külastatud link. Antud juhul muudame värvi (pane taas tähele background-color atribuudi olemasolu).

#vasak_menuu .aktiivne {
  font-weight: bold;
}

Üks oluline asi lehe külastaja jaoks on selge arusaam selle kohta, kuskohas ta mingi konkreetse dokumendi lugemisel antud võrgulehe struktuuri suhtes asub. Sellega muudame selle lehe lingi, millel hetkel asume, rõhutatuks. NB! Nüüd tuleb veel see vastav klass määrata sellele lingile XHTML koodis. Seda võib teha staatilise lehe puhul käsitsi, kuid dünaamiliste lehtede juures on selline töö juba sisuhalduse teha.

#sisuosa {
  left: 201px;
  border-left: 200px solid #fffff2;
  padding: 10px;
}

Nüüd juba keerukam kood. Tegemist on ühe võimalusega koostada hea väljanägemisega mitmetulbaline (hetkel kahe tulbaga) leht. Kesktaseme juhendites tuleb juttu ka teistest võimalustest. Antud juhul on teooria selles, et kogu vasak menüü paikneb tegelikult otsekui sisuosa "äärejoonel". See äärejoon on siis niisama lai, kui on ette nähtud vasaku menüü laiuseks. Tegemist on meetodiga, mida ilmselt kõige paremini selgitab Alan Pearce ajakirja A List Apart ingliskeelses artiklis "Multi-Column Layouts Climb Out of the Box". Võimalik, et mingil hetkel tulevikus on võimalik antud artikli eestikeelset tõlget lugeda ka interneti.info keskkonnas.

Järgmisena juba loodetavasti tuttavad atribuudid. Määrame reeglid tervele seeriale sisuosas esinevatele XHTML elementidele.

#sisuosa h1 {
  font-family: tahoma, helvetica, arial, sans-serif;
  font-size: 1em;
  font-weight: bold;
  margin: 5px 0 5px 0;
}
#sisuosa h2 {
  font-family: tahoma, helvetica, arial, sans-serif;
  font-size: 0.9em;
  font-weight: bold;
  margin: 5px 0 5px 0;
}
#sisuosa p {
  font-family: helvetica, arial, sans-serif;
  font-size: 0.8em;
  font-weight: normal;
  margin: 5px 0 5px 0;
}
#sisuosa ul {
  list-style: none;
}
#sisuosa li {
  margin-left: 28px;
}
#sisuosa a {
  font-family: helvetica, arial, sans-serif;
  font-size: 0.8em;
  text-decoration: underline;
  color: #003d79;
  background-color: inherit;
}
#sisuosa a:hover {
  text-decoration: none;
}
#sisuosa a:visited {
  color: #0067ce;
  background-color: inherit;
}

Jäänud on veel vaid pilt.

#sisuosa .artiklisisene_pilt {
  float: right;
  font-family: helvetica, arial, sans-serif;
  font-size: 0.7em;
}

Siin määrame pilti sisaldava ploki paigutuse ning pildi allkirja kirjatüübi. Pildiplokk joondub tekstisiseselt paremale.

#jalus {
  border-top: 1px solid #ff8040;
  font-family: tahoma, helvetica, arial, sans-serif;
  font-size: 0.7em;
  font-weight: normal;
  text-align: center;
  padding: 5px;
  position: relative;
}

Ning lehe jaluse kood - eelkõige kirjatüüpi puudutavad atribuudid.

Stiliseeritud "Lorem ipsum" lehte võid näha ka klõpsates siin!

See on üks võimalus luua midagi sarnast. Millist paigutustehnikat (või kasutades trükipressi termineid - küljendust) kasutada sõltub juba konkreetsetest tingimustest. Nagu juba mainitud, on kesktaseme artiklite osas toodud välja mõned levinumad viisid, kuidas CSS abil oma www-dokument korrektselt kokku klopsida.

Kommentaarid, arvamused, küsimused

Postitaja nimi:

Kommentaari pealkiri:

Kommentaari sisu:

Kontrollküsimus (loe selgitust kõrvalt)!

Vasta küsimusele: Mis värvi on taevas siis, kui seal ühtegi pilve ei ole?

Teadmiseks kommenteerijale!

Edukaks postitamiseks tuleb täita kõik väljad. Maksimaalne sisuosa pikkus on 10'000 tähemärki, teistel väljadel 200 tähemärki!

Kommentaari sisuosas saab kasutada HTML koodi, kuid seda mitte tekstitöötluseks, vaid näitliku materjali sisestamiseks. Kõik, mis asub <nende märkide vahel> kuvatakse kommentaarilehel nähtava tekstina ning märgid ise tõlgitakse erimärkideks!

Kontrollküsimus on mõeldud kuritahtlike robotite takistamiseks. Palun vasta esitatud küsimusele eesti keeles läbivalt väikeste tähtedega, nimetavas käändes ning võimalikult konkreetselt!

NB! RSS-lugemistarkvara abil kommentaare postitada ei saa!

© Margo Munner | Sisukaart