Muut elementin ominaisuudet

Elementillä on myös muutamia muita ominaisuuksia, joiden avulla voidaan muuttaa elementin pituutta, leveyttä sekä elementin sijoittumista toisiin elementteihin nähden.

width

width-ominaisuudella voidaan määritellä elementin pituus (leveyssuuntainen) hyvin tarkkaan. Esimerkiksi kuvia voidaan skaalata tarvittaessa width-ominaisuuden avulla. Kuvien koko kannattaa kuitenkin pyrkiä muuttamaan kuvankäsittelyohjelmassa, koska width-ominaisuudella kuvan fyysinen koko ei oikeasti muutu. width-ominaisuudelle voidaan määritellä pituus pituusyksiköissä tai prosentteina. auto-arvolla elementti näytetään sen oikeassa koossa, mutta käytettäessä height-ominaisuutta width-ominaisuuden auto-arvo määräytyy height-ominaisuuden koon mukaan.

width: <pituus> | <prosentti> | auto ;

Width-ominaisuus ei ole periytyvä ja sitä voidaan käyttää ainoastaan lohkotason elementtien sekä korvattavien elementtien yhteydessä.

Seuraavassa esimerkissä määritellään eri elementeille tarkkoja kokoja.

.neljannes {
  width: 25%;
  height: 25%;
}

.tarkkakoko {
  width: 150px;
  height: 150px;
}

.puolikas {
  width: 50%;
}

Seuraavassa esimerkkinä käytettävä HTML-dokumentti.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<link rel="StyleSheet" href="levkor.css" type="text/css" />
<title>CSS-esimerkeissä tarvittava tiedosto</title>
</head>
<body>
<h1>Ensimmäisen tason otsikko</h1>
<p class="puolikas">
Tavallinen tekstikappale, joka kirjoitetaan <strong>p</strong>-elementin 
sisään. Kappaleessa olevat korostukset on toteutettu <strong>strong</strong>-
elementillä. Tavallinen tekstikappale, joka kirjoitetaan <strong>p</strong>-
elementin sisään. Kappaleessa olevat korostukset on toteutettu <strong>
strong</strong>-elementillä. Tavallinen tekstikappale, joka kirjoitetaan <strong>
p</strong>-elementin sisään. Kappaleessa olevat korostukset on toteutettu <strong>
strong</strong>-elementillä.</p>
<p>
<img class="tarkkakoko" src="testi.gif" alt="Venyteltäväksi tarkoitettu ruudukkokuva 2x2 pikseliä" />
<img class="tarkkakoko" src="testi2.gif" alt="Venyteltäväksi tarkoitettu ruudukkokuva 10x10 pikseliä" />
</p>
<p class="neljannes">
<img class="puolikas" src="testi.gif" alt="Venyteltäväksi tarkoitettu ruudukkokuva 2x2 pikseliä" />
</p>
<p class="puolikas">
<img class="puolikas" src="testi2.gif" alt="Venyteltäväksi tarkoitettu ruudukkokuva 10x10 pikseliä" />
</p>
</body>
</html>

Seuraavassa kuvassa edellä olleen HTML-dokumentin mukainen dokumentti määriteltynä edellä olleen tyylitiedoston avulla. Kappaleen leveydeksi on määritelty 50 %, joten kappale on puolet selainikkunasta. Kuvien kokoja on muutettu paljon width- ja height-ominaisuuksien avulla. Kuvan, jossa on kaksi punaista neliötä, alkuperäinen koko on 2*2 pikseliä ja toisen kuvan alkuperäinen koko on 10*10 pikseliä.

Graphic21

Kuva 9: Esimerkki eri elementtien koon määrittämisestä.

height

height-ominaisuudella voidaan määritellä elementin pituus (korkeussuuntainen) hyvin tarkkaan. Esimerkiksi kuvia voidaan skaalata tarvittaessa height-ominaisuuden avulla. Kuvien koko kannattaa kuitenkin pyrkiä muuttamaan kuvankäsittelyohjelmassa, koska height-ominaisuudella kuvan fyysinen koko ei oikeasti muutu. height-ominaisuudelle voidaan määritellä pituus pituusyksiköissä tai prosentteina. auto-arvolla elementti näytetään sen oikeassa koossa, mutta käytettäessä width-ominaisuutta height-ominaisuuden auto-arvo määräytyy width-elementin koon mukaan.

height: <pituus> | auto;

height-ominaisuus ei ole periytyvä ja sitä voidaan käyttää ainoastaan lohkotason elementtien ja korvattavien elementtien yhteydessä.

float

Selaimet näyttävät XHTML-elementit tavallisesti siinä järjestyksessä, jossa ne on määritelty XHTML-dokumenttiin. float-ominaisuudella voidaan elementti irrottaa normaalista elementtijärjestyksestä. float-ominaisuus mahdollistaa esimerkiksi kuvan siirtämisen tekstin oikealle puolelle siten, että teksti rivitetään kuvan vierelle. Ominaisuus vastaa hyvin pitkälle HTML-elementeissä käytettyä align-attribuuttia.

float: left | right | none;

float-ominaisuus ei ole periytyvä, mutta sitä voidaan käyttää kaikkien elementtien yhteydessä.

Seuraavassa esimerkissä kuva on siirretty tekstin oikealle puolelle.

img.oikea {
  float: right;
}

Seuraavassa esimerkissä käytetään float-ominaisuutta kuvien sijoittamiseen tekstin vierelle.

body {
  background-color: white;
  margin: 0em;
  padding: 0em;
}

.vasen {
  float: left;
  margin-top: 0em;
  margin-left: 1em;
  margin-right: 1em;
  margin-bottom: 0.5em;
}

.oikea {
  float: right;
  margin-top: 0em;
  margin-left: 1em;
  margin-right: 1em;
  margin-bottom: 0.5em;
}

p.clear-left {
  clear: left;
}

p.clear-right {
  clear: right;
}

p.clear-both {
  clear: both;
}

Seuraavassa HTML-koodi, jossa on käytetty aliluokkia kuvien liu'utuksen mahdollistamiseksi.

<?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="fi" lang="fi">
<head>
<link rel="StyleSheet" href="float.css" type="text/css" media="screen" />
<title>CSS-testausta</title>
</head>
<body>
<h1>Liu'utus</h1>
<blockquote cite="http://www.w3.org/TR/REC-CSS2/visuren.html#floats">
<p><img src="kuva.jpg" alt="Longyearbyen" class="oikea" /></p>
<p class="clear-left">
A float is a box that is shifted to the left or right on the current line. 
The most interesting characteristic of a float (or "floated" or "floating" box) 
is that content may flow along its side (or be prohibited from doing so by the 
'clear' property). Content flows down the right side of a left-floated box and 
down the left side of a right-floated box. The following is an introduction to 
float positioning and content flow; the exact rules governing float behavior are 
given in the description of the 'float' property. </p>
<p><img src="kuva.jpg" alt="Longyearbyen" class="vasen" /></p>
<p class="clear-right">
A floated box must have an explicit width (assigned via the 'width' 
property, or its intrinsic width in the case of replaced elements). Any floated 
box becomes a block box that is shifted to the left or right until its outer 
edge touches the containing block edge or the outer edge of another float. The 
top of the floated box is aligned with the top of the current line box (or 
bottom of the preceding block box if no line box exists). If there isn't enough 
horizontal room on the current line for the float, it is shifted downward, line 
by line, until a line has room for it. </p>
<p class="clear-both">
Since a float is not in the flow, non-positioned block boxes created 
before and after the float box flow vertically as if the float didn't exist. 
However, line boxes created next to the float are shortened to make room for the 
floated box. Any content in the current line before a floated box is reflowed in 
the first available line on the other side of the float.
</p>
</blockquote>
</body>
</html>

Seuraavassa kuvassa HTML-dokumentin kuvat on liu'utettu tekstin vierelle float-ominaisuuden avulla.

Graphic22

Kuva 10: Esimerkki kuvan liu'uttamisesta tekstin vierelle.

Seuraavassa toinen esimerkki float-ominaisuuden käytöstä. Esimerkissä kolme tekstikappaletta sijoitetaan rinnakkain selainikkunaan.

body {
  background-color: white;
  margin: 0;
  padding: 0em;
  font-family: Arial, Verdana, sans-serif;
  font-size: 0.8em;
}

.sarakkeet {
  margin-top: 1em;
  margin-bottom: 1em;
  border: none;
  width: 100%;
}

.oikea {
  text-align: justify;
  margin: 0;
  padding-left: 1%; padding-right: 1%;
  border-right: 1px solid; border-left: 1px solid;
  width: 30%; height: 90%;
  float: left;
}

.keski {
  text-align: justify;
  margin: 0;
  padding-left: 1%; padding-right: 1%;
  width: 30%; height: 90%;
  float: left;
}

.vasen {
  text-align: justify;
  margin: 0;
  padding-left: 1%; padding-right: 1%;
  border-right: 1px solid; border-left: 1px solid;
  width: 30%; height: 90%;
  float: left;
}

Seuraavassa edellisen esimerkin tyylejä käyttävä HTML-dokumentti.

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi">
<head>
<link rel="StyleSheet" href="columns.css" type="text/css" media="screen" />
<title>float</title>
</head>
<body>
<h1>Sarakejakoa float-ominaisuuden avulla</h1>
<div class="sarakkeet">
<div class="vasen">
<p>Tämä kappale kuuluu vasempaan sarakkeeseen</p>
<p>Tämä kappale kuuluu vasempaan sarakkeeseen</p>
<p>Tämä kappale kuuluu vasempaan sarakkeeseen</p>
<p>Tämä kappale kuuluu vasempaan sarakkeeseen</p>
</div>
<div class="keski">
<p>Tämä kappale kuuluu keskimmäiseen sarakkeeseen</p>
<p>Tämä kappale kuuluu keskimmäiseen sarakkeeseen</p>
<p>Tämä kappale kuuluu keskimmäiseen sarakkeeseen</p>
<p>Tämä kappale kuuluu keskimmäiseen sarakkeeseen</p>
</div>
<div class="oikea">
<p>Tämä kappale kuuluu oikeaan sarakkeeseen</p>
<p>Tämä kappale kuuluu oikeaan sarakkeeseen</p>
<p>Tämä kappale kuuluu oikeaan sarakkeeseen</p>
<p>Tämä kappale kuuluu oikeaan sarakkeeseen</p>
</div>
</div>
</body>
</html>

Seuraavassa kuvassa on edellä esitetyn tyylitiedoston avulla muokattu XHTML-dokumentti. XHTML-dokumentin sisältö on nähtävillä edellä.

Graphic23

Kuva 11: Esimerkki sarakejaosta.

clear

clear-ominaisuuden avulla voidaan määritellä saako elementin sivulla olla float-ominaisuudella liu'utettua elementtiä.

clear: left | right | both | none;

clear-ominaisuus ei ole periytyvä, mutta sitä voidaan käyttää kaikkien elementtien yhteydessä.

Seuraavassa esimerkissä on kappaleelle määritelty, että sen vasemmalle puolelle ei saa tulla elementtiä. Jos kappaleen vasemmalla puolella oli jokin elementti, niin kappale siirretään elementin alapuolelle.

p {
  clear: left;
}

Seuraavassa esimerkissä käytetään clear-ominaisuutta estämään kuvien siirtyminen tekstikappaleiden vierelle.

body {
  background-color: white;
  margin: 0em;
  padding: 0em;
}

.vasen {
  float: left;
  margin-top: 0em;
  margin-left: 1em;
  margin-right: 1em;
  margin-bottom: 0.5em;
}

.oikea {
  float: right;
  margin-top: 0em;
  margin-left: 1em;
  margin-right: 1em;
  margin-bottom: 0.5em;
}

p.clear-left {
  clear: left;
}

p.clear-right {
  clear: right;
}

p.clear-both {
  clear: both;
}

Seuraavassa XHTML-koodi, jossa käytetään aliluokkia estämään kuvien sijoittuminen tekstikappaleiden vierelle.

<?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="fi" lang="fi">
<head>
<link rel="StyleSheet" href="float.css" type="text/css" media="screen" />
<title>CSS-testausta</title>
</head>
<body>
<h1>Liu'utus</h1>
<blockquote cite="http://www.w3.org/TR/REC-CSS2/visuren.html#floats">
<p><img src="kuva.jpg" alt="Longyearbyen" class="oikea"></p>
<p class="clear-right">
A float is a box that is shifted to the left or right on the current line. The 
most interesting characteristic of a float (or "floated" or "floating" box) is 
that content may flow along its side (or be prohibited from doing so by the 
'clear' property). Content flows down the right side of a left-floated box and 
down the left side of a right-floated box. The following is an introduction to 
float positioning and content flow; the exact rules governing float behavior are 
given in the description of the 'float'property.</p>
<p><img src="kuva.jpg" alt="Longyearbyen" class="vasen"></p>
<p class="clear-left">
A floated box must have an explicit width (assigned via the 'width' property, or 
its intrinsic width in the case of replaced elements). Any floated box becomes a 
block box that is shifted to the left or right until its outer edge touches the 
containing block edge or the outer edge of another float. The top of the floated 
box is aligned with the top of the current line box (or bottom of the preceding 
block box if no line box exists). If there isn't enough horizontal room on the 
current line for the float, it is shifted downward, line by line, until a line 
has room for it.</p>
<p class="clear-both">
Since a float is not in the flow, non-positioned block boxes created before and 
after the float box flow vertically as if the float didn't exist. However, line 
boxes created next to the float are shortened
to make room for the floated box. Any content in the current line before a 
floated box is reflowed in the first available line on the other side of the 
float.</p>
</blockquote>
</body>
</html>

Seuraavassa kuvassa on clear-ominaisuudella estetty kuvien siirtyminen tekstikappaleiden viereen.

Graphic24

Kuva 12: Esimerkki clear-ominaisuuden käytöstä.

display

display-ominaisuus määrittelee miten elementti näytetään. display-ominaisuudella voidaan antaa arvot block, inline, list-item ja none. Arvolla block elementti käyttäytyy kuten lohkotason elementti eli erillisena kappaleena. Arvolla inline elementti käyttäytyy kuten tekstitason elementti. Arvolla list-item elementti käyttäytyy kuten lista-alkio. Arvolla none elementtiä ei näytetä ollenkaan.

display: block | inline | list-item | none;

display-ominaisuus ei ole periytyvä, mutta sitä voidaan käyttää kaikkien elementtien kanssa.

Seuraavassa esimerkissä havainnollistetaan display-ominaisuuden käyttöä.

h1 {
  display: none;
}

p {
  display: list-item;
}

strong {
  display: block;
}

Seuraavassa kuvassa on edellä määritellyillä tyylien avulla muotoiltu HTML-dokumentti.

Graphic25

Kuva 13: Esimerkki display-ominaisuuden käytöstä.

white-space

white-space-ominaisuudella voidaan kertoa kuinka elementin sisällä olevia välilyöntejä pitäisi käsitellä. Ominaisuuden arvoksi voidaan antaa normal, pre ja nowrap. Arvolla normal selain rivittää tekstin välilyöntien kohdalta tarvittaessa. Arvolla pre selaimessa näytetään kaikki välilyönnit. Oletuksena näytetään sanojen välissä ainoastaan yksi välilyönti. Arvolla nowrap selainikkunan tekstiä ei rivitetä välilyöntien kohdalta.

white-space: normal | pre | nowrap;

white-space-ominaisuus on periytyvä, mutta sitä voidaan käyttää ainoastaan lohkotason elementtien kanssa.

Seuraavassa esimerkki white-space-ominaisuuden käytöstä.

p.normal {
  white-space: normal;
}

p.pre {
  white-space: pre;
}

p.nowrap {
  white-space: nowrap;
}

Seuraavassa XHTML-tiedosto, jossa käytetään edellä määriteltyjä tyylin aliluokkia.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<link rel="StyleSheet" href="white-space.css" type="text/css" />
<title>CSS-esimerkeissä tarvittava tiedosto</title>
</head>
<body>
<h1>Ensimmäisen tason otsikko</h1>
<p class="normal">
Tavallinen tekstikappale, joka kirjoitetaan <strong>p</strong>-elementin sisään. 
Kappaleessa olevat korostukset on toteutettu <strong>strong</strong>-elementillä. 
Tavallinen tekstikappale, joka kirjoitetaan <strong>p</strong>-elementin sisään. 
Kappaleessa olevat korostukset on toteutettu <strong>strong</strong>-elementillä. 
Tavallinen tekstikappale, joka kirjoitetaan <strong>p</strong>-elementin sisään. 
Kappaleessa olevat korostukset on toteutettu <strong>strong</strong>-elementillä.
</p>
<p class="pre">
        Tavallinen tekstikappale, joka kirjoitetaan <strong>p</strong>-elementin sisään.
        Kappaleessa olevat korostukset on toteutettu <strong>strong</strong>-elementillä.
        Tavallinen tekstikappale, joka kirjoitetaan <strong>p</strong>-elementin sisään.
        Kappaleessa olevat korostukset on toteutettu <strong>strong</strong>-elementillä.
        Tavallinen tekstikappale, joka kirjoitetaan <strong>p</strong>-elementin sisään.
        Kappaleessa olevat korostukset on toteutettu <strong>strong</strong>-elementillä.
</p>
<p class="nowrap">
Tavallinen tekstikappale, joka kirjoitetaan <strong>p</strong>-elementin sisään. 
Kappaleessa olevat korostukset on toteutettu <strong>strong</strong>-elementillä. Tavallinen 
tekstikappale, joka kirjoitetaan <strong>p</strong>-elementin sisään. Kappaleessa olevat 
korostukset on toteutettu <strong>strong</strong>-elementillä. Tavallinen tekstikappale, 
joka kirjoitetaan <strong>p</strong>-elementin sisään. Kappaleessa olevat korostukset 
on toteutettu <strong>strong</strong>-elementillä.
</p>
</body>

Seuraavassa kuvassa on edellä olleen tyylilomakkeen avulla muokattu tiedosto. Edellä on myös dokumentin HTML-koodit.

Graphic26

Kuva 14: Esimerkki white-space-ominaisuuden käytöstä.

Käyttäjien kommentit

Kommentoi tätä sivua Lisää uusi kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/doc/css/index6.html
© Antti Ekonoja (antti.j.ekonoja@jyu.fi) <http://users.jyu.fi/~anjoekon/>
Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
Jukka Mäntylä (jmantyla@iki.fi) <http://www.iki.fi/jmantyla/>
2009-01-16 10:39:05
Informaatioteknologia - Jyväskylän yliopiston IT-tiedekunta ja avoin yliopisto