CSS eller STILART

Cascading Style Sheet

Indenfor <STYLE> og </STYLE> kan man skrive kode i css: et C-lignende sprog hvormed man kan tildele egenskaber til HTML-koder, eks:

<STYLE> SPAN.gul {Color: yellow} </STYLE> Her kommer <SPAN class="gul">gul</SPAN> skrift.
Her kommer gul skrift.

<SPAN>-koden er her den brugte HTML-kode; den er særlig velegnet til at bære disse css-koder, fordi den ikke gør noget andet. Men de mange af HTML-koderne kan i princippet bruges, man kan f.eks. bruge <DIV> eller <P>, men må da finde sig i at der insættes linieskift, ofte ubelejliget. Faktisk behøver man slet ikke specificere HTML-koden, men nøjs med at skrive
<STYLE>
.blaa {color: blue}
</STYLE>
så kan den bruges på alle mulige HTML-koder, feks. <SPAN class=blaa> laver blå skrift </SPAN>, og det samme gør <TT class=blaa>, <TD class=blaa> osv.
Det virker dog langt fra hver gang, og alt for ofte ser man at det f.eks. virker i Netscape men ikke i Internet Explorer, og visa versae.

STYLE kan også indlejres lokalt i koden således:
Dette står med <SPAN STYLE="color: cyclamen"> cyclamen </SPAN> skrift.
Dette står med cyclamen skrift.
Og så da jeg havde skrevet dette eksempel opdagede jeg, at det virker med Netscape4.7 men ikke med Internet Explorer og Firefox- og senere viste det sig, at det heller ikke virkede med Netscape6.2. Sitiationen er desværre typisk.
Rettet version:
Dette står med <SPAN STYLE="color: crimson"> crimson </SPAN> skrift.
Dette står med crimson skrift.
I den alfabetiske tabel over farvenavne har jeg derfor *-mæket de farver, hvor Internet Explorer ikke fungerer.
<SPAN STYLE="background: #A04000"> Dette står med #A04000 baggrund .

Dette står med <SPAN STYLE="color: red; font-size: large; font-family: serif"> stor rød </SPAN> skrift <SPAN STYLE="font-family: serif"> med seriffer</SPAN>.
Dette står med stor rød skrift med seriffer.

Det ser dog ret forskelligt ud med de forskellige browsere:

Netscape 4.7 skriver

er en fejl, se

Netscape 6.2 skriver

Internet Explorer 4.0 skriver

Dette står med <SPAN class="gul" Style="font-size: large"> stor gul </SPAN> skrift.
Dette står med stor gul skrift.
Dette står med <SPAN class="gul" Style="font-size: large; background-color: blue"> stor gul </SPAN> skrift på blå baggrund.
Dette står med stor gul skrift på blå baggrund.

CSS er ikke HTML, og definitionerne i <STYLE> kan stå i alle afsnit (inden HEAD, i HEAD eller i BODY); de skal bare være på plads inden de skal bruges, og virker i resten af htm- eller html-filen, hvis de da ikke er indlejret lokalt.
Det kan være en god idé at skrive defaultværdier for <BODY>-afsnittet i en STYLE-sµtning før BODY-afsnittet (normalt i HEAD-afsnittet) syntax:
<STYLE TYPE="text/css"> ..... </STYLE> Som eksempel på hvad ..... kan være, se kildeteksten til denne fil. Der kan kun være ét sæt af denne slags STYLE-sætninger i filen, forsøg med flere sæt har givet besynderlige resultater, ja sågar fået min computer i knæ.
<SPAN STYLE="background: DimGray"> Så det kan desværre ikke lade sig gøre ved hjælp af en ny STYLE-sætning at skifte f.eks. baggrundsfarve, uden at bruge f.eks. en SPAN-kode til at bære baggrundsfarven</SPAN>. Bemærk, at så når baggrundsfarven ikke helt ud til højremargin, men kun så langt teksten rækker. Derfor er det bedre at lade en tabel bære baggrundsfarven:
<TABLE BgColor=DimGray Size=100% Border=0>

`FÆLDE:`	`Hvis man i HEAD-afsnittet (ell. lign.sted) skriver <STYLE TYPE="text/css"> TABLE {background: #rrggbb} </STYLE> så vil teksten i tabellerne blive den farve, som man i Windows-kontrolpanelet har angivet, at teksten på skrivebordet skal have - og man véd jo ikke, hvad den der læser filen har valgt, så det bliver usynlig skrift hvis det uheldigvis er samme farve som den man giver tabellernes baggrund.`
`Løsning:`	`Hvis du skriver TABLE {background: #rrggbb} Så skriv også TD { Color: #xxyyzz }`
`Mystik:`	`Det samme gælder somme tider, blot man har skrevet en <STYLE>-sætning??`

FÆLDE: Hvis man i HEAD-afsnittet (ell. lign.sted) sætter tekstens farve med <STYLE TYPE="text/css"> BODY { color: #rrggbb } så er Netscape slem til at glemme at man har sat tekstfarven, og efter nogle blok-elementer skifte tilbage til Windows-tekstfarve. Dette gælder i særdeleshed efter en tabel i Windows98.

Løsning: Hvis du sæter tekstens farve for hele siden med en STYLE-sætning, så skriv også når du definerer BODY-afsnittet
<BODY TEXT=#rrggbb>
Og eftersom tekstfarven alligevel skal defineres sammen med BODY, så kan man faktisk med fordel lade være med at sætte den med STYLE (to definitioner af det samme er altid noget redundant kludder).
I denne fil skriver InternetExplorer med en anelse bl†lig skrift (CCCCEE),
og Netscape med en anelse gullig skrift (#EEEECC).,
Det er fordi en STYLE-s‘tning i starten s‘tter tekstfarven i BODY-afsnittet til #CCCCEE, og BODY-afsnittet indledes med <BODY Text=#EEEECC

Der er et lignende problem med <SPAN style="font-family: sans-serif"> font-family.

Hvis der er bruges både class= og <style
Ovenfor blev span-class gul defineret med <STYLE> SPAN.gul {Color: yellow} </STYLE>
jeg tjekker lige <SPAN class="gul"> at den stadig giver gul </SPAN> skrift. Hvis jeg så bruger <SPAN class=gul style="color: lime">, så er der en konflikt, her at teksten skal være både gul og lime</SPAN>. Fornuftigt nok vælger begge browsere (Netskape og I.Explorer) at følge STYLE-sætningen indeni SPAN-koden.

I Netscape kan CSS slås fra så dine style-koder ikke virker, og du véd jo ikke om modtageren har gjort det. Men du kan på din startside skrive:

<DIV STYLE="color: #xxyyzz"> Detteher skulle være usynligt (samme farve skrift til forgrund og baggrund). Hvis du alligevel kan læse det forstår din browser ikke StyleSheets. Bruger du Netscape, så vælg "Edit" - "Preferences" - "Advanced" - og sæt et flueben i "Enable style sheets".   NB: Der er ingen sikkerhedsrisiko eller virusfare ved at bruge Style Sheets.</DIV>

#xxyyzz skal være nummeret på din baggrundsfarve, så teksten bliver usynlig med mindre CSS er slået fra.

Kommentarer skrives ligesom i C med /* skråstreg-stjerne */

<LINK>

Du kan skrive en generel fil med koderne (en CSS-fil) og linke den ind med <LINK>-koder. I CSS-filen skriver du så det, du ellers ville have skrevet mellem <STYLE> og </STYLE> , og indsætter (linker) det i din HTML-fils HEAD-afsnit med
<LINK rel="STYLESHEET" href="filnavn.css" type="text/css">
Metoden har den store fordel, at det er let at linke den samme CSS-fil til mange HTML-filer, og derved få et ensartet udseende.

MEN det burde være sådan at:
	Man kan så, hvis man ikke vil bruge værdien i CSS-filen, stadig lave den om med en STYLE-sµtning i HEAD-afsnittet. Den af de to der kommer sidst (<LINK> eller <CSS>) overskriver de attributter der står begge steder.
SÅDAN ER DET KUN NOGLE GANGE ???
	backgrund overskriver som den skal, men color og a.link gør ikke.

FARVER

kan angives omtrent som i HTML, men gåseøjnene er forbudt. Eksempler: #000000 #000 black er alle lig sort.

SKRIFTSTØRRELSER

kan (bl.a.) angives i enheden pt = punkt. Der er dog den lille hage ved det, at det sjældent virker.

<FONT> er deprecated

Muligvis vil <FONT>-koden udgå, så vi er henvist til at bruge disse stilart-metoder. Jeg synes det er noget makværk.
koden <SPAN STYLE="font-size: 14pt"> giver væsentligt størrer bogstaver med Internet Explorer og Netscape 6 end med Netscape 4.7, osv . . . .

<IMG>

Der er en lus i Internet Explorer 6 og Netscape4.5 som gør, at en style-kode i billeddefinitionen kan få billedet til at havne de mest besynderlige steder. <img src=HROED.GIF style="margin: 1mm">

placerer billedet

et eller andet sted. Bruger du Netscape 4.x eller Internet Explorer 6 kan du sikkert finde det umotiveret placeret i nærheden af toppen af denne side. Fejlen var tilsyneladende ikke i ældre versioner af Internet Explorer.

Attributter

Der er en liste over attributter på side 2. Du må selv gætte, hvilke attributter der hører til hvilke koder, eller kigge i dokumentationen.