Alfabetisk liste over css-egenskaber

Siden er opdateret 11. 8. 2013

Alle css-egenskaber - css2 og css3 vist

Kun css-egenskaber for css2 vist

Siden viser som standard alle css-egenskaber: css2 og css3. Du kan så vælge at få skjult eller genvist egenskaber for css3:

Hovedparten af css3-egenskaberne er desværre endnu ikke beskrevet, det kommer snarest.

Hop længere ned på siden, til egenskaber, der begynder med:

A
B
C
D
E
F
G

H
K
L
M

O
P
R
S
T
U

V
W
Z

Siden er opdateret 10. 1. 2012

På denne side ser du en alfabetisk liste over css-egenskaberne (listen er ikke komplet, jeg arbejder på at få et så stort udvalg med, som muligt).

Jeg har testet egenskaberne i disse browsere: Internet Explorer, Firefox, Safari, Chrome og Opera i seneste versioner - enkelte attributter virker ikke i alle browsere, men så gør jeg en bemærkning derom ved pågældende egenskab.

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 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-clip css3: beskrivelse af egenskaben
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-origin css3: beskrivelse af egenskaben
background-position: Background-position definerer, hvor i browservinduet, man vil have et baggrundsbillede vist.
Mulige værdier 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 værdier er repeat-x, repeat-y og no-repeat.
background-size css3: Background-size giver mulighed for at ændre størrelsen på et baggrundsbillede, uden at ændre billedfilen.

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.
Skal du i border definere forskelligt på boksens fire sider, eks. width, skal det ske i rækkefølgen top, right, bottom og left.

border-top

Hvor border definerer border på alle fire sider af en boks på en gang, kan man med denne og de 3 næste egenskaber definere forskellig border på hver enkelt side af boksen. Boksens overside.

border-right

Boksens højre side

border-bottom

Boksens underside

border-left

Boksens venstre side

border-color

Border-color bruges til at definere farven på en border

border-style

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-radius css3

Definerer radius på runde hjørner på en boks

border-bottom-left-radius css3: Definerer nederste venstre hjørnes runding
border-bottom-right-radius css3: Definerer nederste højre hjørnes runding
border-top-left-radius css3: Definerer øverste venstre hjørnes runding
border-top-right-radius css3: Definerer øverste højre hjørnes runding

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-image css3

beskrivelse af egenskaben

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.

Bottom definerer en position i forhold til et overordnet element.

box-shadow css3

box-shadow sætter en skygge på et blok-element - en boks.

^ Tilbage til sidens top

caption-side

Caption-side bruges til at definere placeringen af en tabels overskrift.

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.

clearfix: -

Color gælder for tekst og kan defineres med hexadecimale værdier, rgb-værdier eller navne.

color-profile css3: beskrivelse af egenskaben

columns css3

Columns sætter en tekstblok op i kolonner efter de givne værdier i column-width og column-count.

column-count css3

Column-count angiver, hvor mange kolonner en given tekstblok skal vises i.

column-fill css3

Column-fill definerer, hvordan tekst skal indsættes i kolonner.

column-gap css3

Column-gap definerer mellemrummet mellem kolonner

column-rule css3

Column-rule sætter en lodret streg mellem kolonner.

column-rule-color css3: Column-rule-color definerer stregens farve
column-rule-style css3: Column-rule-style definerer stregens stil (solid, dashed, dotted ...).
column-rule-width css3: Column-rule-width definerer stregens tykkelse.

column-span css3

Column-span definerer hvorvidt en tekstbloks overskrift skal strække sig over en eller alle kolonner.

column-width css3

Column-width definerer kolonnebredden i en kolonnesat tekstblok.

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 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 værdier er show og hide.

^ Tilbage til sidens top

Float bruges til at anbringe elementer side om side. Mulige paremetre er left og right.

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, det er ikke oblgatorisk at bruge alle egenskaber.
Eks. font: italic small-caps bold 10px 150% verdana, sans-serif.

@font-face css3: @font-face gør det muligt at anvende specielle ikke-standard fonte på en webside.
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 værdierne lighter, normal, bold eller bolder.

^ Tilbage til sidens top

grid-columns: -
grid-rows: -

^ 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

@keyframes css3

Animation med css - position, størrelse, farve.

animation css3

Definerer forskellige parametre for animationen:

animation-name: Animationens navn
animation-duration: Animationens varighed
animation-timing-function: Skal animationen køre med fast eller varieret hastighed?
animation-delay: Animationens forsinkelse
animation-iteration-count: Hvor mange gange skal animationen køres?
animation-direction: Animationens retning
animation-play-state: Skal animationen køres eller holde pause?

^ Tilbage til sidens top

Left definerer en position i forhold til et overordnet element.

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 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 værdier er outside (default) og inside.

^ Tilbage til sidens top

Max-height sætter en maksimal højde, et element vil kunne øges til, når indholdet øges.

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 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 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 sætter en minimimal højde, et element vil tage, hvis indholdet er begrænset.

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 css3

Opacity definerer graden af gennemsigtighed af baggrundsfarven i en boks, eks, en <div>.

Orphans definerer minimumantallet af linjer i et element, der må efterlades nederst på en side i et sidevisningsmiljø. Orphans har kun relevans i en printer-css eller i en css med media="all"

Outline definerer en afgrænsning, som lægger sig udenpå eventuel border.

outline-color: Definerer den farve, en eventuel outline skal have.
outline-offset css3: Definerer afstanden mellem en boks (evt. dens border) og dens outline.
outline-style: Definerer den stil, en eventuel outline skal have.
outline-width: Definerer den tykkelse, en eventuel outline skal have.

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.

overflow-x css3: beskrivelse af egenskaben
overflow-y css3: beskrivelse af egenskaben

^ Tilbage til sidens top

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 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. Page-break har kun relevans i en printer-css eller i en css med media="all".

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 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 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.
resize css3: Gør det muligt for sidens læser at ændre størrelsen på et element.
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").
right: Right definerer en position i forhold til et overordnet element.

^ Tilbage til sidens top

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 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 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-align-last: Text-align-last gør det muligt at højrejustere en sidste linje i et tekstafsnit med justerede margener - det virker bare kun i IE.

text-decoration

Text-decoration definerer eventuel overstregning, understregning eller gennemstregning af tekst. Bruges især i forbindelse med tekstlinks.
Mulige værdier 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-justify css3

Text-justify er en avanceret måde at justere tekst, så der opnås lige kanter mod margen i begge sider.

text-shadow css3

text-shadow definerer en skygge på noget tekst, eks. en overskrift.

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.

top definerer en position i forhold til et overordnet element.

transform css3

Transform virker gør det muligt at ændre faconen og placeringen på en boks.

transform-origin: Transform-origin lader dig ændre placeringen på en boks, på vilken du har ændret udseende med transform.
transform-style: Transform-style virker på næsten samme måde som z-index

transition css3

Transition er en kortform, hvor flere forskellige egenskaber kan defineres samlet.

transition-property: hvilken ændring skal ske?
transition-duration: hvor hurtigt skal ændringen ske?
transition-timing-function: skal ændringen ske med fast hastighed?
transition-delay: hvornår skal ændringen starte

^ 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.
word-spacing: Word-spacing kan lave større ordmellemrum, end en browser normalt vil acceptere. Word-spacing kan defineres i px, pt eller em.
word-wrap css3: word-wrap gør det muligt at ombryde meget lange ord.
writing-mode css3: Writing-mode kan (kun i Internet Eksplorer) ændre skriveretningen, så den går oppefra og ned og fra højre mod venstre.

^ Tilbage til sidens top

z-index: Z-index bruges til at styre lagvis placering af elementer på en webside.
zoom: Zoom gør det muligt at zoome ind eller ud på et billede eller en tekst.

^ Tilbage til sidens top

Valid XHTML og CSS / Copyright © Hjemmesideskolen februar 2003