Box-model, kehystäminen
Seuraavassa esimerkissä CSS-ohjeella kehystetään viivalla (border) div-teksti sekä asetetaan tekstin ja kehysviivan väliin tyhjää tilaa (padding).
Samalla voidaan asettaa CSS-ohjeet kehystetyn tekstin
taustavärille (background-color) sekä tyhjää tilaa kehyksen ulkopuolelle (margin).
Huomaa tämä !
Ohjeet voi asettaa div-elementille (koskee kaikkia www-sivun div:jä) tai antaa ohjeille itse keksimän nimen
(koskee vain nimettyjä divejä).
- taustaväri - background-color: väri esimerkissä RGB-arvo
- leveys - width: leveyden voi asettaa pikseleinä (px) tai prosenttilukuna (X %)
- viiva - border: viivan leveys (px), viivan tyyppi (solid - yhtenäinen viiva) ja viivan väri
- täyte - padding: tyhjä tila poksin tekstin ja viivan välissä pikseleinä
- marginaali - margin: tyhjää tilaa poksin ulkopuolella pikseleinä
Esimerkin CSS-ohjeet ja HTML-koodaus:
CSS-ohjeet:
.poksi1 {
background-color:RGB(239,245,245);
width: 50%;
border: 1px solid BLUE;
padding: 35px;
margin: 20px;
}
HTML-koodaus:
<div class="poksi1"> Tämä on ns Box model, eli www-sivustelle sijoittteva "kehys" eli "poksi".
Tälläiseen poksiin voi sijoittaa sisällöksi HTML-elementeillä tuotettua sisältöä kuten tekstiä,
taulukon, kuvia ja videon.
Esimerkin poksille on asetettu seuraavat CSS-ohjeet:
<ul>
<li>taustaväri - background-color: väri esimerkissä RGB-arvo</li>
<li>leveys - width: leveyden voi asettaa pikseleinä (px) tai
prosenttilukuna (X %)</li>
<li>viiva - border: viivan leveys (px), viivan tyyppi (solid - yhtenäinen viiva)
ja viivan väri</li>
<li>täyte - padding: tyhjä tila poksin tekstin ja viivan välissä pikseleinä</li>
<li>marginaali - margin: tyhjää tilaa poksin ulkopuolella pikseleinä</li>
</ul>
</div>
Seuraavassa esimerkissä sijoitetaan kuva ja kuvaan liittyvä teksti samaan div-kehykseen:
Kuvan ja kuvaan liittyvän tekstin sijoittaminen samaan kehykseen.
Esimerkin CSS-ohjeet ja HTML-koodaus:
CSS-ohjeet:
.kuva_poksi {
width: 50%;
padding: 5px;
border: 1px solid GREEN;
margin: 0;
/* alla varjon ohjeet */
-moz-box-shadow: 3px 4px 5px rgba(0, 0, 0,0.5);
-webkit-box-shadow: 3px 4px 5px rgba(0, 0, 0, .5);
box-shadow: 3px 4px 5px rgba(0, 0, 0, .5);
}
.kuva_teksti {
text-align: center;
}
HTML-koodaus:
<div class="kuva_poksi">
<img src="tikru2.jpg" width="100%" alt="tiikeri">
<p class="kuva_teksti">Kuvan ja kuvaan liittyvän tekstin sijoittaminen samaan kehykseen.</p>
</div>
Ulkoviiva
Seuraavassa esimerkissä CSS-ohjeella kehystetään viivalla keskitetty teksti sopivilla asetuksilla sekä asetetaan ulkoviiva.
Huomaa nämä !
Ohjeet voi asettaa p-elementille (koskemaan kaikkia www-sivun p-elementtejä) tai antaa ohjeille itse keksimän nimen
(koskee vain nimettyjä p-elementtejä).
Esimerkissä hohdistetaan p-elementissä olevaan tekstiin kaksi CSS-ohjetta tekstikehys sekä ulkoviiva
Tässä p-elementtiin on liitetty kaksi CSS-ohjetta, tekstikehys ja ulkoviiva.
Esimerkin CSS-ohjeet ja HTML-koodaus:
CSS-ohjeet:
.tekstikehys {
width: 75%;
border: 2px solid RGB(123, 30, 94);
margin: auto;
padding: 20px;
text-align: center;
}
.ulkoviiva {
outline: RGB(245, 214, 235) solid 10px;
}
HTML-koodaus:
<p class="tekstikehys ulkoviiva">
Tässä p-elementtiin on liitetty kaksi CSS-ohjetta, tekstikehys ja ulkoviiva.
<
Ulkoviivan tyylit ja muotoilut
Esimerkeissä on yhdistelmiä ulkoviivojen CSS-ohjeista.
Huomaa tämä !
Määritteellä outline-width: voidaan asettaa ulkoviivalle leveys. Asetuksena voi käyttää thin, medium, think
tai esim 10px. Kätevintä on asettaa leveys pikseleinä.
Huomaa nämä !
Teksti-elementteihin liitetty kaksi CSS-ohjetta.
p.esim3 ja p.esim8 ovat lyhennettyjä CSS-ohjeita.
Yhtenäinen ulkoviiva (solid) 10px ja keltainen
Pisteviiva (dotter) 5px ja punainen
Katkoviiva (dashed) 4px ja vihreä
Tuplaviiva (double) 4px ja sininen
Vasemmat- sekä yläreunat (groove) 8px ja punainen
Oikeat- sekä alareunat (ridge) 8px ja keltainen
Tuplaviiva (inset) 4px ja keltainen
Tuplaviiva (outset) 4px ja keltainen
Esimerkin CSS-ohjeet ja HTML-koodaus:
CSS-ohjeet:
.divpoksi{
outline-style: double;
outline-color: RGB(153, 102, 255);
outline-width: 4px;
background-color: RGB(242, 230, 255);
color: rgb(86, 0, 179);
text-align: center;
padding: 10px;
margin: 40px;
width: 40%;
}
.teksti2{
padding: 5px;
width: 80%
}
p.esim1 {
border: 1px solid BLUE;
outline-style: solid;
outline-color: YELLOW;
outline-width: 10px;
}
.esim2 {
border: 1px solid BLUE;
outline-style: dotted;
outline-color: RED;
outline-width: 5px;
}
p.esim3 {
border: 1px solid BLUE;
outline: 4px dashed GREEN;
}
p.esim4 {
outline-style: double;
outline-color: BLUE;
outline-width: 4px;
}
p.esim5 {
outline-style: groove;
outline-color: RED;
outline-width: 8px;
}
p.esim6 {
outline-style: ridge;
outline-color: YELLOW;
outline-width: 8px;
}
p.esim7 {
outline-style: inset;
outline-color: YELLOW;
outline-width: 8px;
}
p.esim8 { outline: 8px outset YELLOW; }
HTML-koodaus:
<div class="divpoksi">
Tässä esitellään ulkoviiva-asetuksia.
Ulkoviivan vahvuus on syytä asettaa pikseleinä.<br>
Huomaa nämä !<br>
Teksti-elementteihin liitetty kaksi CSS-ohjetta.<br>
p.esim3 ja p.esim8 ovat lyhennettyjä CSS-ohjeita.
</div>
<p class="esim1 teksti2">Yhtenäinen ulkoviiva (solid) 10px ja keltainen </p><br>
<p class="esim2 teksti2">Pisteviiva (dotter) 5px ja punainen </p><br>
<p class="esim3 teksti2">Katkoviiva (dashed) 4px ja vihreä </p><br>
<p class="esim4 teksti2">Tuplaviiva (double) 4px ja sininen </p><br>
<p class="esim5 teksti2">Vasemmat- sekä yläreunat (groove) 8px ja punainen </p><br>
<p class="esim6 teksti2">Oikeat- sekä alareunat (ridge) 8px ja keltainen </p><br>
<p class="esim7 teksti2">Tuplaviiva (inset) 4px ja keltainen </p><br>
<p class="esim8 teksti2">Tuplaviiva (outset) 4px ja keltainen </p>
Esimerkissä asetetaan ulkoviiva kauemmas sisäviivasta, ulkoviiva sisäpuolelle sekä tekstielementille toinen muotoiluohje.
Ulompi viiva 12 pikseliä irti.
Ulkoviiva sisäpuolelle.
Esimerkin CSS-ohjeet ja HTML-koodaus:
CSS-ohjeet:
p.ulkoviiva1 {
margin: 30px;
padding: 10px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 12px;
}
p.ulkoviiva2 {
border: 4px solid yellow;
outline-style: solid;
outline-color: invert;
}
.koko{
text-align: center;
width: 50%;
}
HTML-koodaus:
<p class="ulkoviiva1 koko"> Ulompi viiva 12 pikseliä irti. </p>
<p class="ulkoviiva2 koko"> Ulkoviiva sisäpuolelle. </p>