CSS:ssä elementtejä käsitellään periaatteessa suorakulmaisina laatikoina tai suorakulmaisina kappaleina. Näiden laatikoiden kuvaamiseen käytetään seuraavia - varmasti teille jo tuttuja - ominaisuuksia:
• width – elementin leveys
• height – elementin korkeus
• left – etäisyys vasemmalle
• right – etäisyys oikealle
• top – etäisyys ylös
• bottom – etäisyys alas
• margin – ulkoreuna
• border – kehys elementin ympärillä
• padding – sisäinen marginaali eli etäisyys kehästä elementin sisältöön
Nämä ominaisuudet on jo esitelty.
Elementin kokonaisleveys muodostuu yksittäisten tietojen leveyksien summasta. (Sama pätee muuten myös korkeuteen).
Esimerkki:
div#box {
width: 100px;
padding: 20px; /* kumpikin 20px vasemmalle ja oikealle /
border: 2px solid; / kumpikin 2px vasemmalle ja oikealle /
margin: 0 30px; / kumpikin 30px vasemmalle ja oikealle */
}Minkä leveyden tällä div-alueella on? Katsotaanpa yksittäisiä arvoja:
• 100 pikseliä
• 2 kertaa 20 pikseliä
• 2 kertaa 2 pikseliä
• 2 kertaa 30 pikseliä
Tämä antaa elementin kokonaisleveydeksi 204 pikseliä.
Elementtien leveys ja korkeus määräytyvät width ja height avulla. Jos näitä tietoja ei ole erikseen tyylitiedostossa määritelty, seuraava pätee:
• Jos width puuttuu, laatikko esitetään yhtä leveänä kuin ympäröivä elementti.
• Jos height puuttuu, elementti näytetään yhtä korkeana kuin sen sisältö.
Esimerkki:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div#box {
border: 1px solid; /* kumpikin 2px vasemmalle ja oikealle */
margin: 0 30px; /* kumpikin 30px vasemmalle ja oikealle */
background-color:#6600CC;
}
</style>
</head>
<body>
<div id="box">PSD-Tutorials.de</div>
</body>
</html>
Selaimessa se näyttää seuraavalta:
div-elementin ylemmäksi elementiksi on body. Siksi elementti näkyy todellakin yhtä leveänä kuin body-elementti. Korkeudessa se kuitenkin mukautuu sisältöön.
Kaikki nollaksi
Jokaisella selaimella on sisäänrakennettu tyylitiedosto. Näissä tyylitiedostoissa on määritelty joitakin oletusarvoja. Tämä pätee esimerkiksi padding ja margin. Valitettavasti nämä oletusarvot vaihtelevat eri selaimissa. Tämä näkökohta tekee identtisten tulosten saamisesta eri selaimissa mm. laatikkomallin yhteydessä vaikeaa. Siksi on suositeltavaa nollata välit, jotka selaimet asettavat oletusarvoisesti. Tämä onnistuu seuraavasti:
* { padding: 0; margin: 0; }
Lisätkää tämä rivi tyylitiedoston alkuun. Näin voit alkaa sijoittaa laatikkoja haluttuihin paikkoihin.
Laatikon tyypit
Miten elementti lopulta esitetään ja miten se vaikuttaa muihin elementteihin, riippuu elementin tyypistä. Todellisuudessa CSS-määritys erottaa lohkoelementit ja sijoituselementit. (On muitakin tyyppejä, jotka jätetään tässä vaiheessa huomiotta, koska ne ovat vain vähän merkityksellisiä).
Lohkoelementit luovat aina uuden rivin. Seuraavat elementit alkavat myös uudelta riviltä. Tyypillisiä lohko-elementtejä ovat esimerkiksi p, div, h1, ul jne. Nämä elementit noudattavat aiemmin luetteloidun ulkopuolisen marginaalin, sisäisen marginaalin, korkeuden, leveyden ja reunuksen ominaisuuksia.
<h1>Digital Painting & Matte Painting: Bildaufbau definieren</h1> <p>Modul 2 - Teil 2: Ein Bild ist immer ein Ganzes. Jedoch muss man sich immer überlegen, wo der Betrachter als Erstes hinsehen sollte.</p>
Katsaus tulokseen selaimessa osoittaa, että h1 ja p luovat kukin oman rivin.
Sijoituselementit sen sijaan eivät luo omaa kappalerajoitinta, vaan ne näytetään normaalissa tekstitoistossa. Tyypillisiä sijoituselementtejä ovat span, em, strong, img, br jne. Sijoitusyksiköille ei ole määritelty pystysuoria ulkoreunaviivoja eikä leveys- tai korkeusmittauksia.
<h1><em>Digital Painting & Matte Painting</em>: Bildaufbau definieren</h1> <p>Modul 2 - Teil zwei: <strong>Ein Bild ist immer ein Ganzes</strong>. Jedoch muss man sich immer überlegen, wo der Betrachter als Erstes hinsehen sollte.</p>
Ja myös tässä katsaus tulokseen:
Nyt voit muuttaa alkuperäiset lohko-elementit sisäkkäiseksi elementeiksi.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
taustaväri:#00CCFF;
}
</style>
</head>
<body>
<h1>Digitaalinen maalaus & mattamaalaus</h1>
<p>Moduuli 2 - Osa 2: <em>Kuva on aina kokonaisuus</em>. On kuitenkin aina mietittävä, minne katsojan tulisi ensimmäisenä katsoa.</p>
</body>
</html>Katso tulos selaimessa.
h1-otsikon taustaväri kertoo, että elementtiä venytetään koko leveydelle. Leveys määräytyy ylempänä olevan body-elementin mukaan.
Nyt tulee ominaisuus display mukaan peliin.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
display:inline;
taustaväri:#00CCFF;
}
</style>
</head>
<body>
<h1>Digitaalinen maalaus & mattamaalaus</h1>
<p>Moduuli 2 - Osa 2: <em>Kuva on aina kokonaisuus</em>. On kuitenkin aina mietittävä, minne katsojan tulisi ensimmäisenä katsoa.</p>
</body>
</html>display: inline muuttaa elementin leveyttä.
Itse asiassa elementin leveys mukautuu nyt olemassa olevaan sisältöön. Tässä yleiskatsaus display-määrityksille:
• none – ei näytetä
• block – elementti näytetään lohko-elementtinä, joten se luo uuden rivin.
• inline – elementti näytetään sisäkkäisenä elementtinä, joka ilmestyy tekstivirtaan.
• inline-block – ulkoisesti elementti on lohko, mutta korkeus, leveys ja marginaalit voidaan määrittää. Jokainen elementti pysyy kuitenkin tekstivirrassa. Tämä on siis yhdistelmä lohko- ja sisäkkäisestä elementistä.
• list-item – elementti näytetään lohko-elementtinä. Sille lisätään luettelomerkki.
• run-in – riippuen sisällöstä elementti voi olla lohko- tai sisäkkäinen elementti.
• table – toimii kuten tuttu table-elementti HTML:stä.
• inline-table – toimii kuten HTML:n table-elementti, mutta sisäkkäisenä.
• table-row – elementti sisältää vierekkäisiä lapsielementtejä. Toimii kuten HTML:n tr-elementti.
• table-cell – elementti on taulukon solu ja toimii kuten HTML:n th ja td-elementit.
• table-row-group – elementti sisältää ryhmän elementtejä, joilla voi olla vierekkäisiä lapsielementtejä. Toimii kuten tbody-elementti HTML:ssä.
• table-header-group – elementti sisältää ryhmän elementtejä, joilla voi olla vierekkäisiä lapsielementtejä. Toimii kuten thead-elementti HTML:ssä.
• table-footer-group – elementti sisältää ryhmän elementtejä, joilla voi olla vierekkäisiä lapsielementtejä. Toimii kuten tfoot-elementti HTML:ssä.
• table-column – määrittelee sarakkeen solujen ominaisuudet. Toimii kuten HTML:n col-elementti.
• table-column-group – elementti sisältää ryhmän elementtejä, joilla voi olla sarakkeen solujen asetuksia. Toimii kuten HTML:n colgroup-elementti.
• table-caption – määrittelee taulukon otsikon. Ominaisuus toimii kuten HTML:n caption-elementti.
Jos ajatellaan, CSS tarjoaa erilaisille elementeille erilaisia näyttövaihtoehtoja. Nämä ovat tärkeitä elementtien sijoittamisen kannalta. Lisää aiheesta seuraavissa oppaissa.
