CSS tyylitiedostot: harjoittelua

CSS tyylitiedostoharjoitus

CSS - Cascading Style Sheets - teoriaa

tyylikuvauskieli

suunniteltu HTML:ää varten 1996

CSS1 (1996), CSS2 (tämänhetkinen), CSS3 (tuleva)

selaintuki uusissa versioissa IE5, IE6 ja Mozilla

oma syntaksi, erilainen kuin HTML tai XHML

CSS-tyylitiedosto koostuu säännöistä:

hahmo { tyylimäärittely }
h2 {font-size: 32pt; font-weight : bold}
hahmo - valitsee muotoiltavan osan
tyylimäärittely - kertoo miten osa muotoillaan
ominaisuus : arvo
ominaisuus - tyyliominaisuus, esim kirjaintyylin koko (font-size)
arvo - ominaisuudelle annettava arvo, esim. '32 pt'
Tyylimäärittely voi koostua useammasta määrittelystä (; erottaa)
- h2 {font-size: 24pt; font-weight:bold}
Saman elementin tyylimäärittelyn voi antaa useammassa osassa
- h3 {font-size: 24pt}
- h3 {font-weight:bold}
jos päällekkäisiä, viimeisin jää voimaan
myös: h1, h2 {font-size: 32 pt}
erikoistyylien luokat: .luokkanimi {font-size: 32 pt}

Kirjasinlajit ja korostukset

font-family: "Times New Roman"

vaihtoehtoiset (oletus-) tyylit annetaan listassa, ensimmäinen joka löytyy otetaan käyttöön

font-family: Arial, sans-serif

viimeinen vaihtoehto on aina yksi seuraavista: serif, sans-serif, monospace, cursive tai fantasy

font-style: italic /* normal, oblique */
font-weight: bold /* normal, lighter, ... */
font-variant: small-caps /* normal */
font-size: large

xx-small, x-small, small, medium, large, x-large, xx-large

suhteellinen koko: em, ex, px

absoluuttinen koko: pt, in, cm, mm, pc (esim. 18pt)

font-size: 18pt

font-size: 50%

kirjaintyylin määrittelyt voidaan yhdistää:

järjestys: style, variant, weight, size/line height, family

font: italic small-caps bold 24pt/32pt Arial, sans-serif

Värit ja tausta

color: red /* aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow, rgb(r, g, b), hexadecimal */

color: rgb(128, 0, 255)
color: #8000FF
background-color: yellow
back-ground-image: url(myown.gif)
background-repeat: repeat-x /* no-repeat, repeat-y */
background-attachment: fixed /* scroll */
background-position: center /* top, bottom, left, right ... */

yhdistettynä
background: red url(mypic.gif) no-repeat scroll 10% 10%

Tekstityylit

word-spacing: 3pt
letter-spacing: 1pt
text-decoration: underline /*none, overline, line-through, blink */
vertical-align: sub /* baseline, super, top, txt-top, middle, bottom, text-bottom, or percentage */

text-transform: uppercase /* lowercase */
text-align: left /*center, right, justify */
text-indent: 3em

Tekstilaatikot

teksti muotoillaan 'laatikon' sisään
laatikoita voidaan erottaa marginaaleilla (left, right, top, bottom) ja kehyksillä (width, style, color)

border: 2pt solid red
tyylit: none, dotted, dashed, solid, double, groove, ridge, inset, outset

jos kehyksen sivut eroavat, voidaan jokainen komponentti määritellä erikseen

border-left: ...

border-right-width: ...

padding: 2pt 3 pt 4pt 5pt
kehyksen ja sisällön väliin

margin: 2pt, 3pt, 4pt, 5pt
laatikoiden väliin (järjestys: top, right, bottom, left)
myös margin-left, margin-right, jne.

width: 50%; height: auto
esim. kuvan koko

float: left /* right */ (siirtää laatikon)

CSS - Cascading Style Sheets -

Kokeillaan aluksi muutamaa yksinkertaista tyylimäärittelyä. Luo tekstieditorilla alla kuvattu tiedosto.

<html>


<head>
<title>Johdatus CSS tyyleihin </title>

<style type = "text/css">

em { background-color: #8000ff; color: white }
h1 { font-family: arial, sans-serif }
p { font-size: 14pt }
.special { color: blue }

</style>
</head>

<body>


<h1 class = "special">Pääotsikko</h1>
<p> Ja sitten vain leipätekstiä. Tässä tekstissä on vain perustyyliä. </p>

<h1>Toinen otsikko</h1>
<p class = "special"> Tähän tarinaan tulee pieni mainospätkä, jotta koulumme nimi <em>Metropolia</em> erottuisi muusta selvästi. </p>

</body>
</html>

Tallenna nimellä harjoitusCSS1.html ja testaa.

Jatka tekemällä uusi sivu.

<html>


<head>
<title>XML: johdatus CSS tyyleihin </title>

<style type = "text/css">

a.nodec { text-decoration: none }
a:hover { text-decoration: underline; color: red;
background-color: #ccffcc }

li em { color: red ;
font-weight: bold }
ul { margin-left: 75px }
ul ul { text-decoration: underline;
margin-left: 15px }

</style>
</head>

<body>

<h1>Ostoslista <em>synttärikutsuille</em>:</h1>

<ul>
<li>Kakku</li>
<li>Koristeita

<ul>

<li>Ilmapalloja</li>
<li>Kynttilöitä</li>

</ul>

</li>

<li>Limsaa</li>
<li>Sipsejä tai <em>suolatikkuja</em></li>

</ul>

<p> Tee tilaus netissä: </p>
<p><a class = "nodec" href = "http://www.verkkokauppa.fi"> tästä napsauttamalla</a></p>

</body>
</html>

Tallenna nimellä harjoitusCSS2.html ja testaa.

Seuraavassa tehdään ulkoinen tyylitiedosto.

/* Harjoitus 3: tyylimme3.css */
/* Ulkoinen tyylitiedosto */

a { text-decoration: none; }

a:hover { text-decoration: underline;

color: red;

background-color: #ccffcc; }

li em { color: red;
font-weight: bold; }

ul { margin-left: 2cm; }

ul ul { text-decoration: underline;
margin-left: .5cm; }

Tallenna tämä ja muokkaa sitten edellisen (3) harjoituksen avulla html-sivu, joka käyttää sitä hyväksi.

<html>

<head>
<title> Linkitetään ulkoinen tyylitiedosto </title>
<link rel = "stylesheet" type = "text/css" href = "tyylimme3.css">
</head>

<body>

<h1>Ostoslista <em>synttärikutsuille</em>:</h1>

<ul>

<li>Kakku</li>
<li>Koristeita

<ul>

<li>Ilmapalloja</li>
<li>Kynttilöitä</li>

</ul>

</li>

<li>Limsaa</li>
<li>Sipsejä tai <em>suolatikkuja</em></li>

</ul>

<p> Tee tilaus netissä </p>

<p><a class = "nodec" href = "http://www.verkkokauppa.fi"> tästä napsauttamalla</a></p>

</body>

</html>

Tallenna ja testaa.

Harjoitus 5:

Kokeillaan kuvien ja taustan sijoittelua: tee HTML-sivu, jonka Body-osassa määritellään kahden kuvan sijainti. Voit poimia nämä kuvat i.gif ja circle.gif joko tästä hakemistosta tai käyttää muita kuvia.

<body>

<p><img src = "i.gif" style = "position: absolute; top: 0px;
left: 0px; z-index: 1" alt = "Ensimmäinen kuvista"></p>
<p style = "position: absolute; top: 50px; left: 50px;
z-index: 3; font-size: 20pt;">Tekstin sijainti</p>
<p><img src = "circle.gif" style = "position: absolute; top: 25px;
left: 100px; z-index: 2" alt = " toisen kuvan sijainti"></p>

</body>

Harjoitus 6:

<html>

<head>
<title>Elementtien suhteellinen sijoittelu </title>

<style type = "text/css">

p { font-size: 1.3em; font-family: verdana, arial, sans-serif }
span { color: red;font-size: .6em; height: 1em }
.super { position: relative; top: -1ex }
.sub { position: relative; bottom: -1ex }
.shiftleft { position: relative; left: -1ex }

.shiftright { position: relative; right: -1ex }

</style>

</head>

<body>

<p>Tässä on määritelty <span class = "super">yläindeksi</span>.</p>

<p>Ja tässä vuorostaan <span class = "sub">alaindeksi</span>.</p>

<p>Tämän lauseen loppuosa siirretään
<span class = "shiftleft">vasemmalle</span>.</p>

<p>Tämän lauseen loppu puolestaan siirretään
<span class = "shiftright">oikealle</span>.</p>

</body>
</html>

Harjoitus 7: reunukset ja laatikkomalli

Tutustaan erilaisiin kehyksiin tai reunuksiin. Luo tekstieditorilla alla kuvattu tiedosto reunat.html.

<html>



<head>
<title>Reunukset - Borders</title>

<style type = "text/css">

body { background-color: #ccffdd }

div { text-align: center;
margin-bottom: 1em;
padding: .5em }

.thick { border-width: thick }
.medium { border-width: medium }
.thin { border-width: thin }
.groove { border-style: groove }
.inset { border-style: inset }
.outset { border-style: outset }
.red { border-color: red }
.blue { border-color: blue }

</style>
</head>

<body>

<div class = "thick groove">Tämä teksti on kehyksen sisällä.</div>
<div class = "medium groove">Tämä teksti on kehyksen sisällä.</div>
<div class = "thin groove">Tämä teksti on kehyksen sisällä.</div>

<p class = "thin red inset">Ohut punainen viiva...</p>
<p class = "medium blue outset">Hiukka paksumpi siniviiva</p>

</body>
</html>

Tallenna ja testaa.

Harjoitus CSS 8:

<head>
<title>Taustakuvan sijoittelu</title>

<style type = "text/css">

body { background-image: url(logo.gif);
background-position: bottom right;
background-repeat: no-repeat;
background-attachment: fixed; }
p { font-size: 12pt; color: #aa5588; text-indent: 1em; font-family: arial, sans-serif; }
.dark { font-weight: bold; }

</style>
</head>

<body>
<p>
Esimerkissämme sijoitetaan taustakuva sivun alareunaan. Poimi sitä varten <span class = "dark">EVTEK -logo</span> vaikka näiltä kurssisivuilta ja tallenna se nimellä logo.gif samaan työhakemistoon kuin tämä tiedosto. Kun sivu on valmis, testaa sen toimintaa eri suuruisissa ikkunoissa.Kokeile myös eri selaimia: toimivatko ne yhdenmukaisesti?
</p>

</body>
</html>

Harjoitus CSS 9: tekstikappaleiden sijoittelu

Luo tekstieditorilla alla kuvattu tiedosto.

<html>

<head>
<title>Tekstin ja kelluvien elementtien sijoittelua</title>

<style type = "text/css">

div { background-color: #ffccff;
margin-bottom: .5em;
font-size: 1.5em;
width: 50% }

p { text-align: justify; }

</style>

</head>

<body>

<div style = "text-align: center">Keksi tähän pääotsake</div>

<div style = "float: right; margin: .5em; text-align: right">
Keksi tähän kpl-otsake</div>

<p>Ja tähän kirjoita tai poimi noin 40 sanan tekstipätkä, jotta voit nähdä tulokset kunnolla</p>

<div style = "float: right; padding: .5em; text-align: right">
Keksi tähän kpl-otsake</div>

<p>Ja tähän kirjoita tai poimi noin 40 sanan tekstipätkä.
<span style = "clear: right"> Jonka loppuun tulee liikkumatonta tekstiä. Jonka loppuun tulee liikkumatonta tekstiä. Jonka loppuun tulee liikkumatonta tekstiä.</span></p>

</body>
</html>

Tallenna ja testaa.

| KOTISIVU | KURSSIKUVAUS | OHJELMA JA HARJOITUKSET |

Päivittänyt: Jaana Holvikivi
Muutettu 15.4.2010