Styling af hjemmesiden med CSS

Indlæs andet indhold på denne side:

Alfabetisk attributliste

Hop længere ned på siden, til:

Siden er opdateret 7.2.2008

Lad os lige tage en opsummering af de attributter, der kan bruges og de parametre, der kan sættes på attributterne (listen er ikke komplet, jeg arbejder på at få et så stort udvalg med, som muligt).

Jeg har testet det i disse 8 browsere: MSIE 5.5 og 6.0, Netscape 6.2 og 7.0, Mozilla 1.2.1 og 1.3 og Opera 6.05 og 7.11 - enkelte attributter virker ikke i alle browsere, men så gør jeg en bemærkning derom ved pågældende attribut.

Først attributterne og under hver enkelt de mulige parametre og deres funktion, Der er lavet links til en nærmere forklaring eller demonstration, enten på små testsider eller ved henvisning til andre sider i html, css og validering:

A:link definerer, hvordan tekstlinks skal fremtræde, hvis man ikke vil lade browsernes standard gælde. Denne og de næste 4 attributter anvendes, hvis man vil differentiere udseendet på tekstlinks efter, om de er ubesøgte, besøgte, OnMouseOver eller aktive.
Rækkefølgen SKAL være som vist her, hvis de skal defineres separat - eller man kan f.eks. slå de to første og den sidste sammen med et komma imellem og lade hover være anderledes.
a:visited
Definerer links, der er besøgte.
a:hover
Definerer det link, som musen netop nu er inde over.
a:focus
Definerer det link, som man har klikket sig frem til med tastaturet.
Dette gøres i nyere Gecko-browsere ved at taste [Tab] på tastaturet.
I MSIE kan man tilgå links via tastaturet på samme måde som i gecko-browserne, men den css-definerede markering udebliver.
I Opera kan denne funktionalitet opnås ved at holde [Ctrl] nede og trykke [pil op] eller [pil ned].
a:active
Definerer det link, der netop er blevet trykket på.
autocomplete
Definerer - med ikke-valid kode - om et formfelt skal kunne autoudfyldes eller ej. Validiteten kan genetableres ved at bruge javascript.
azimut
Azimuth definerer det oplevede lydpunkts placering i det vandrette plan i forhold til lytteren. - Denne egenskab er specielt beregnet til brug i et css rettet mod skærmlæsere (media="aural").

^ Tilbage til sidens top


background
Background er en kortform hvormed man samtidig kan definere flere værdier som color, image, position, attrachment og repeat.
background-attachment
Background-attachment definerer, om baggrundsbillede skal scrolle med, når siden scrolles, eller om baggrunden skal forblive på samme position i browservinduet.
Default værdi er scroll, med fixed bliver billedet stående.
background-color
Background-color definerer den baggrundsfarve en html-side eller en element i denne skal have. Farven defineres ved at skrive rød/grøn/blå værdierne i enten rgb- eller hex-format.
background-image
Background-image definerer det baggrundsbillede en html-side eller et element i denne skal have.
background-position
Background-position definerer, hvor i browservinduet, man vil have et baggrundsbillede vist.
Mulige parametre er top, left, bottom, right, center eller en værdi i px eller %.
background-repeat
Har man indsat et baggrundsbillede, vil det default blive gentaget vandret og lodret, til browservinduet er fyldt ud. Med background-repeat kan man definere hvordan denne gentagelse skal ske eller ikke ske.
Mulige parametre er repeat-x, repeat-y og no-repeat.
border-collapse
Border-collapse bruges til at definere, om der skal være mellemrum mellem cellevægge i en tabel eller ej. Mulige paremetre er collapse (ingen afstand) eller separate (afstand).
border-color
Border-color bruges til at definerefarven på en border
border-spacing
Border-spacing definerer afstanden mellem tabelcellers borders - definitionen kan sættes i px eller pt. Det har således ingen mening at definere border-spacing i en tabel, hvor der er defineret border-collapse:collapse.
border-top
Denne og de 3 næste attributter anvendes kun, hvis der skal defineres forskellig border på hver enkelt side.
border-right
-
border-bottom
-
border-left
-
border-type
Border-type definerer typen af border på et element - dashed, dotted, double, groove, hidden, inset, none, outset, ridge eller solid.
border-width
Border-width definerer tykkelsen på en border.
border
Border kan tildeles som fælles definition af bredde i pixels, type og farve. Det skal så ske i denne rækkefølge: width, type, color

^ Tilbage til sidens top


clear
Clear bruges til at placere et element i fuld sidebredde under elementer, som med float er anbragt side om side. Mulige paremetre er left, both og right.
color
Color gælder for tekst og kan defineres med hexadecimale værdier, rgb-værdier eller navne.
cue
Cue definerer en lyd, der skal afspilles før og efter et element oplæses. - Denne egenskab er specielt beregnet til brug i et css rettet mod skærmlæsere (media="aural").
cue-after
Cue-after definerer en lyd, der skal afspilles efter et element er blevet oplæst. - Denne egenskab er specielt beregnet til brug i et css rettet mod skærmlæsere (media="aural").
cue-before
Cue-before definerer en lyd, der skal afspilles før et element oplæses. - Denne egenskab er specielt beregnet til brug i et css rettet mod skærmlæsere (media="aural").
cursor
Cursor definerer, hvordan cursor skal se ud, når den føres ind over pågældende element.

^ Tilbage til sidens top


direction / dir
Direction (dir) definerer ændret skriveretning fra den normale fra-venstre-mod-højre (ltr) til fra-højre-mod-venstre (rtl). Desværre forstår Opera det ikke før version 7.0.
display
Display kan med parameteren block få et tekstlink til optræde nærmest som en tabelcelle.
Display kan også, med parameteren none udblanke sideelementer f.eks. i en printer.css.

^ Tilbage til sidens top


elevation
Elevation definerer den oplevede lydkildes højde i forhold til lytteren. - Denne egenskab er specielt beregnet til brug i et css rettet mod skærmlæsere (media="aural").
empty-cells
Empty-cells bruges f.eks. til at definere, at tomme celler ikke vises i tabeller, hvor celleborder ellers vises. Mulige parametre er show og hide.

^ Tilbage til sidens top


float
Float bruges til at anbringe elementer side om side. Mulige paremetre er left og right.
font-family
Font-family definerer, hvilken font siden skal skrives med.
font-size
Font-size definerer, hvilken størrelse, teksten skal have. Størrelsen kan defineres i punkter pt eks. 8pt, pixels px eks. 10px eller i decimalandele af standardstørrelse em eks. 0.8em.
font-style
Font-style definerer, om skriften skal være skal være normal (opretstående) eller italic (kursiv). Værdien normal er default.
font-variant
Font-variant kan defineres som small-caps, dvs. som små bogstaver skrives store i mindre udgaver.
font-weight
Font-weight definerer, om fonten skal skrives som normal eller fed. Der kan bruges værdier i hele hundreder fra 100 til 900, hvor 300 er normal og 900 er ekstra fed.
Man kan også definere en fed skrift med parametrene lighter, normal, bold eller bolder.
font
Font kan som helhed defineres på kortform. Det skal så ske i denne rækkefølge: font-style, font-variant, font-weight, font-size, line-height og font-family.
Eks. font: italic small-caps bold 10px 150% verdana, sans-serif

^ Tilbage til sidens top


height
Height defineres normalt i px eller i % af omgivende element. Ved indsættelse af billeder i et dokument defineres højde anderledes.

^ Tilbage til sidens top


letter-spacing
Letter-spacing definerer i px eventuel øget bogstavmellemrum.
line-height
Line-height bruges til at fastlægge en anden (større) linjeafstand, end den aktuele font normalt vil sætte teksten med.
list-style
List-style bruges til samlet definition (shorthand) af list-style-type og list-style-position samt eventuelt valg af billede - list-style-image.
list-style-image
List-style-image bruges til at definere et billede, som skal udgøre listepunkttegnet i en uordnet liste, <ul>.
list-style-type
List-style-type definerer, hvorvidt uordnede lister skal være med dot (default), circle eller square eller slet ingenting som listepunkttegn. De ordnede lister kan defineres som værende med arabertal '1,2,3' decimal eller romertal små 'i,ii,iii' lower-roman eller store 'I,II,III' upper-roman eller med små 'a,b,c' lower-alpha eller store 'A,B,C' upper-alpha bogstaver som listepunkttegn.
list-style-position
List-style-position definerer, hvorvidt listepunkttegn skal vises indenfor eller udenfor listelementets renderingsareal. Mulige parametre er outside (default) og inside.

^ Tilbage til sidens top


max-height
Max-height sætter en maksimal højde, et element vil kunne øges til, når indholdet øges.
max-width
Max-width sætter en maksimal bredde, et element vil kunne øges til, når browservinduet gøres større. Internet Explorer forstår ikke max-width direkte, men med et hack kan det komme til at se ud som om.
margin
Margin definerer afstanden fra et element til omgivelserne (naboelement eller det åbne vindues indre grænse.
Margin kan defineres i pixels px eller procent %.
margin-top
Denne og de 3 næste attributter anvendes kun, hvis der skal defineres forskellig margin på hver enkelt side.
margin-right
-
margin-bottom
-
margin-left
-
media
Media er egentlig ikke en css-attribut, men da den anvendes på samme måde som inline-css - om end med html-syntax - og netop har betydning i forhold til brug af css, har jeg valgt alligevel at tage den med her, da den er ret vigtig.
min-height
Min-height sætter en minimimal højde, et element vil tage, hvis indholdet er begrænset.
min-width
Min-width sætter en minimimal bredde, et element vil tage, hvis browservinduets størrelse er begrænset. Internet Explorer forstår ikke min-width direkte, men med et hack kan det komme til at se ud som om.

^ Tilbage til sidens top


opacity
Opacity definerer graden af gennemsigtighed af baggrundsfarven i en boks, eks, en <div>.
outline
Outline definerer en afgrænsning, som lægger sig udenpå eventuel border.
overflow
Overflow kan bruges, når en div med en fast højde og bredde skal indeholde mere tekst, end størrelsen tillader. Med overflov tilføjes <div>'en en scrollbar.

^ Tilbage til sidens top


padding
Padding definerer afstanden fra et elements ydre begrænsning til indholdet.
Padding kan defineres i px.
padding-top
Denne og de 3 næste attributter anvendes kun, hvis der skal defineres forskellig padding på hver enkelt side.
padding-right
-
padding-bottom
-
padding-left
-
page-break
Page-break bruges i forbindelse med udskrift på papir. Med page-break kan man forhindre, at der sker et sideskift midt i f.eks. et billede - eller midt i en tekst, hvor et sideskift vil virkeforstyrrende.
pause
Kortformen pause definerer længden på den pause, skærmlæseren skal holde før og efter oplæsning af elementets indhold. - Denne egenskab er specielt beregnet til brug i et css rettet mod skærmlæsere (media="aural").
pause-after
Pause-before definerer længden på den pause, skærmlæseren skal holde, efter at oplæsningen af elementet er afsluttet. - Denne egenskab er specielt beregnet til brug i et css rettet mod skærmlæsere (media="aural").
pause-before
Pause-before definerer længden på den pause, skærmlæseren skal holde, inden oplæsningen af elementet begyndes. - Denne egenskab er specielt beregnet til brug i et css rettet mod skærmlæsere (media="aural").
pitch
Pitch definerer den gennemsnitlige frekvens hvormed skærmlæseren skal oplæse elementet. - Denne egenskab er specielt beregnet til brug i et css rettet mod skærmlæsere (media="aural").
pitch-range
Pitch-range definerer variationen fra det gennemsnitlige stemmeleje, hvormed en skærmlæser oplæser elementet. - Denne egenskab er specielt beregnet til brug i et css rettet mod skærmlæsere (media="aural").
play-during
Play-during definerer en lyd, der afspilles mens elementet optegnes. - Denne egenskab er specielt beregnet til brug i et css rettet mod skærmlæsere (media="aural").
position
Position kan defineres absolute i pixels eller procent i forhold til omgivelserne. Referancepukter kan være øverste venstre, øverste højre, nederste venstre eller nederste højre hjørne af browservinduet eller en omgivende positioneret div.
Position kan også defineres relative i pixels. Her er udgangspunktet dog det sted på siden, hvor det positionerede element er skrevet.
Position kan også (for et element, der i forvejen er positioneret absolut, sættes fixed, hvorved positionen i browservinduet fastholdes, også selv om siden scrolles (virker dog pt. ikke i MS IE).

^ Tilbage til sidens top


readonly
Readonly kan bruges i forbindelse med <textarea>, hvor false er default og true hindrer skrivning i feltet.
richness
Richness definerer det gennemsnitlige stemmeleje, hvormed en skærmlæser oplæser sidens tekst. - Denne egenskab er specielt beregnet til brug i et css rettet mod skærmlæsere (media="aural").

^ Tilbage til sidens top


speak
Speak beskriver, om indholdet skal oplæses og i bekræftende fald hvordan, af en talesyntese (skærmlæser for blinde og svagtseende). - Denne egenskab er specielt beregnet til brug i et css rettet mod skærmlæsere (media="aural").
speak-numeral
Speak-numeral beskriver hvordan tal oplæses af en skærmlæser. - Denne egenskab er specielt beregnet til brug i et css rettet mod skærmlæsere (media="aural").
speak-punctuation
Speak-punctuation beskriver tegnsætning behandles af en skærmlæser. - Denne egenskab er specielt beregnet til brug i et css rettet mod skærmlæsere (media="aural").
speech-rate
Speech-rate beskriver den hastighed, som en skærmlæser skal benytte ved oplæsning af et element. - Denne egenskab er specielt beregnet til brug i et css rettet mod skærmlæsere (media="aural").
stress
Stress beskriver den stemmeføring, som en skærmlæser skal benytte. - Denne egenskab er specielt beregnet til brug i et css rettet mod skærmlæsere (media="aural").

^ Tilbage til sidens top


table-layout
Table-layout definerer, hvorledes browserne skal vise en tabel.

Vælges fixed, vil en bredde-definition på en celle i første række fastlåse hele kolonnens bredde, selv om indholdet i en celle længere nede i samme kolonne er bredere.

Vælges auto, vil det være den bredeste celle i en kolone, der bestemmer kolonnens bredde.
text-align
Text-align definerer elementers sideværts placering og kan tildeles værdierne left, center, right eller justify. Left er default, justify kan kun anvendes til tekst.
text-decoraion
Text-decoration definerer eventuel overstregning, understregning eller gennemstregning af tekst. Bruges især i forbindelse med tekstlinks.
Mulige parametre er none (ingen), underline, overline eller line-through.
text-indent
Text-indent definerer indrykning af første ord i første linje i f.eks. <p></p>. Indrykningen sættes i px.
text-transform
Test-transform kan bruges til at ændre en udskrift - på skærm eller papir, så teksten vises med store eller små bogstaver uanset originalteksten.
Default er none (ingen ændring), lowercase sætter alle bogstaver til at være små, uppercase sætter alle bogstaver til at være store, capitalize sætter første bogstav i hvert ord stort.

^ Tilbage til sidens top


unicode-bidi
Unicode-bidi bruges sammen med direction. unicode-bidi definerer bogstavrækkefølgen i ordene og direction definerer den generelle skriveretning.

^ Tilbage til sidens top


vertical-align
Vertical-align definerer elementers lodrette placering i f.eks. en tabelcelle og kan tildeles værdierne top, middle og bottom. Middle er default.
voice-family
Voice-family beskriver den stemme, som en skærmlæser skal benytte. - Denne egenskab er specielt beregnet til brug i et css rettet mod skærmlæsere (media="aural").
volume
Volume beskriver styrken på den stemme, som en skærmlæser skal benytte. - Denne egenskab er specielt beregnet til brug i et css rettet mod skærmlæsere (media="aural").

^ Tilbage til sidens top


white-space
White-space bruges til at definere, hvordan browsere skal behandle indtastede ordmellemrum.
Normalt bliver flere sammenhængende indtastede ordmellemrum lagt sammen og vist som kun et og indtastede linjeskift bliver vist som ordmellemrum.
Med pre kan defineres, at alle indtastede linjeskift og sammenhængende indtastede ordmellemrum skal gengives som indtastet.
Med nowrap kan defineres, at ordmellemrum ikke skal få browseren til at dele linjen.
width
Width defineres i pixels eller i procent af omgivelserne. Ved indsættelse af billeder i et dokument defineres bredde anderledes.
writing-mode
Writing-mode kan (kun i Internet Eksplorer) ændre skriveretningen, så den går oppefra og ned og fra højre mod venstre.
word-spacing
Word-spacing kan lave større ordmellemrum, end en browser normalt vil acceptere. Word-spacing kan defineres i px, pt eller em.

^ Tilbage til sidens top


z-index
Z-index bruges til at styre lagvis placering af elementer på en webside.

^ Tilbage til sidens top

Valid XHTML og CSS / Copyright © Hjemmesideskolen februar 2003
Hjemmesideskolen
Du er her: Forsiden - html - Styling af hjemmesiden med CSS
Brugere lige nu: 1
Home Mail