registrar.no

	CSS informasjon
	oppdatert: 3. april 2012

CSS

W3C ønsker at ting som har med presentasjon (layout) skal fjernes fra HTML og at CSS (Cascading Style Sheet) skal overta denne oppgaven. I XML er all informasjon om presentasjon fjernet og CSS benyttes istedet. Foreløpig er versjon 1 og 2 av CSS standardisert og W3C arbeider med versjon 3.
CSS 1 (recommendation)
CSS 2.1 (recommendation)
CSS 3 modul: Selectors (recommendation)
CSS 3 modul: Namespaces Module (recommendation)
CSS 3 modul: Color modul (recommendation)
CSS 3 modul: Over 40 moduler under arbeid

For innføring i CSS kan følgende linker være til hjelp:
http://www.garshol.priv.no/download/text/css-intro.html
Liste over alle egenskaper i CSS Level 1
http://www.w3.org/Style/LieBos2e/enter/
http://www.w3schools.com/css/
http://www.w3schools.com/css3/
Andre referanser:

Her vil vi begrense oss til å introdusere CSS ved bruk i våre HTML-eksempler: "form to mail" og "sql-form". Vi lager en fil med de stilreglene vi trenger. HTML-siden i eksemplene blir oppdatert med en lenke til stilsettet og presentasjons informasjonen fjernes fra HTML-koden. I tillegg er det lagt inn en del SPAN-elementer for å gruppere innholdet slik at stilreglen kan tilordnes gruppen. SPAN elementet har ingen betydning utover at det er mulig tilordnes stilreglere ved hjelp av CLASS-atributtet. Nedenfor finner du utskrift av filen med stilsettet:

.tekstAdvarsel{font-size:9pt;font-weight:400;font-family:arial,helvetica,sans-serif;color:#ff0000}
.tekstOverskrift{font-size:28pt;font-weight:400;font-family:arial,helvetica,sans-serif;color:#00ff00}
.tekstLeder{font-size:14pt;font-weight:700;font-family:arial,helvetica,sans-serif;color:#ffffff}
.feltLeder{background-color:#00ff00}
.feltVerdi{background-color:#ffffff;text-align:right;}

Eksempel: Form to mail

"Form to mail"-begrepet betyr at kundens bestilling mottas i en HTML-form og sendes pr. mail til leverandøren. I dette forenklete eksemplet fyller du kun inn din e-postadresse og en mail sendes til denne adressen. Skjemaet består av to sider. På side en fyller du inn din e-postadressen. Side to bekrefter hvor e-posten er sendt, trykk her for å teste (ingen data lagres hos oss).

Nedenfor er HTML-koden til de to sidene. Side 2 kaller på et Perl-skript for utsendelse av mail og for dynamisk oppdatering av siden med oppgitt e-postadresse, trykk her for å se koden. Skriptet blir kalt på via SSI direktiv.

<html>
<head>
<title>Testskjema</title>
<link rel="stylesheet" type="text/css" href="/dokumentasjon/klient/css/demo.css" media="screen" >
</head>
<body>
<form method=get action="http://servlet.no/css/a2.shtml">
<p>
<span class="tekstAdvarsel">(demo)</span><br>
<span class="tekstOverskrift">Testskjema side 1 (CSS / Perl): Form to mail</span>
</p>
<table border=0 cellspacing=0 cellpadding=1 class="feltVerdi">
<tr>
<td class=feltLeder>
<span class="tekstLeder"> Din e-postadresse: </span>
</td>
<td>
<input type=text size=30 name=epost>
</td>
<td>
<input type=submit value="Test" name=send >
</td>
</table>
<p>
<span class="tekstAdvarsel">(demo)</span>
</form>
</body>
</html>

<html>
<head>
<title>Testskjema</title>
<link rel="stylesheet" type="text/css" href="/dokumentasjon/klient/css/demo.css" media="screen" >
</head>
<body>
<p>
<span class="tekstAdvarsel">(demo)</span><br>
<span class="tekstOverskrift">Testskjema side 2 (CSS / Perl): Form to mail</span>
</p>
<table border=0 cellspacing=0 cellpadding=1 class="feltVerdi">
<tr>
<td class=feltLeder>
<span class="tekstLeder"> E-post er sendt til: </span>
</td>
<td>

</td>
</table>
<p>
<span class="tekstAdvarsel">(demo)</span>
</body>
</html>

Eksempel: SQL-form

I dette eksemplet mottas også bestilling fra kunden i en HTML-form, men nå plasseres orderen i en MySQL database. I dette forenklete eksemplet består ordreskjemaet av kun en side. Skjemaet har to knapper. En for å legge legge inn en ordrelinjer og en for å slette aller ordrelinjer i tabellen, trykk her for å teste.

Nedenfor er HTML-koden til skjemaet. Koden innholder kall til Perl-skript. Perl-skriptet foretar innlegging av ny ordrelinje eller sletting av alle ordrelinjer samt utlesning av innholdet i tabellen, trykk her for å se koden. Skriptet blir kalt på via SSI direktiv.

<html>
<head&g;
<title>Testskjema</title>
<link rel="stylesheet" type="text/css" href="b.css" media="screen" >
</head>
<body>
<form methode=get action="http://servlets.no/css/b1.shtml">
<span class="tekstAdvarsel">(demo)</span><br>
<span class="tekstOverskrift">Testskjema (CSS / Perl): SQL-form</span>
</p>
<table border=0 cellspacing=0 cellpadding=2 class="feltVerdi">
<tr>
<td class=feltLederV>Vare</td>
<td class=feltLederH>Antall</td>
<td></td>

<tr>
<td class=feltV><input type=text size=20 name=vare></td>
<td class=feltH><input type=text size=5 name=antall></td>
<td class=feltV><input type=submit value=Lagre name=aksjon></td>
</table>
<p>
<input type=submit value="Slett alle varer" name=aksjon>
<p>
<span class="tekstAdvarsel">(demo)</span>
</form>
</body>
</html>