CSS3-logo   CSS Properties.



Grupperet oversigt over CSS-properties.


Sidste hovedgennemgang af listen: maj 2019.



 Gruppenavn (W3)Kort beskrivelse
xAnimationAnimationer med automatisk afvikling. Anvender @keyframes som "motor".
xxBackgroundBaggrunde - både farver og billeder.
xBasic BoxSubjektivt udpluk fra andre grupper: (vert-align, padding, positioning, overflow, height etc.).
xxBasic User-InterfaceSubjektivt udpluk af mindre væsentlige properties fra andre grupper.
xxBorderKanter og skygger på mange tags.
xxBox AlignmentAlignment af bokse i deres containere i forskellige layout modeller.
xxBox ModelMargin og padding omkring bokse.
xxCascading and inheritanceÆndring af alle properties knyttet til et element tilbage til startværdi eller nedarvet startværdi.
xxColorStyring af gengivelse af farver - bortset fra baggrund.
xxDisplayStyring af rendering af data i et tag.
xFilter EffectsFilter effekter til billeder.
xFlexible boxOpbygning af responsive strukturer uden brug af float / positionering.
xxFontsValg af tegnsæt incl. import af eksterne tegnsæt.
xxFragmentationHåndtering af tekst etc. ved styret sideskift.
xGenerated ContentVisuelt sideindhold.
xGridOpbygning af gitter indeni en <div class="grid-container">.
xxImage ValuesNummerering af <li>.
xxIntrinsic & ExtrinsicHøjder / bredder.
xLists and CountersNummerering af overskrifter og listepunkter.
xMulti-columnTekst i kolonner - som i avis. Skal være i div-tag.
xxOverflowHåndtering af scrollabel overflow i visuelle medier.
xxPaged MediaGenerering og layout for sider med fragmenteret indhold i en "paged" præsentation.
xxTableStyring af tabeller
xxTextTilpasning af tekst.
xxText decorationOver-/understregning, skygger etc.
xTransformRotation af div-element.
xTransitionDynamisk ændring af størrelse på <div>-box.
xxWriting modesSkriveretning over siden og teksttegnenes orientering.
xDiverseProperties, der ikke kan henføres til en gruppe..



xForskellige - oftest emnespecifikke - dokumenter fra arbejdsgrupperne bag CSS.
xW3 CSS reference.
(Grupperingen nedenfor følger opdelingen i dette dokument)



Animation

      Opbygning af simple animationer, der anvender @keyframes som "motor".
PropertiesBeskrivelseSyntaks Links 
@keyframesNavn på og definition af den enkelte animation som 'program'.@keyframes animationname {keyframe-selector{css-styles;}} x
animationKort version for opsætning af animation i 1 samlet deklaration. Kun de nøvendige værdier indsættes - i vilkårlig rækkefølge.animation: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state | initial | inherit; x
animation-delayAntal sekunder(s) / millisekunder(ms) før animationan skal påbegyndes.animation-delay: time | initial | inherit; x
animation-directionDen retning, hvori animationen skal foretages.animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit; x
animation-durationAntal sekunder(s) / millisekunder(ms) animationan skal udføres.animation-duration: time | initial | inherit; x
animation-fill-modeStyring af hvad der skal ske før og / eller efter animationens udførelse.animation-fill-mode: none | forwards | backwards | both | initial | inherit; x
animation-iteration-countAntal gange animationen skal udføres.animation-iteration-count: number | infinite | initial | inherit; x
animation-nameNavn på den @keyframe-animation, der skal udføres.animation-name: keyframename | none | initial | inherit; x
animation-play-stateStyring af start-tilstand: pauseret eller kørende.animation-play-state: paused | running | initial | inherit; x
animation-timing-functionHastighedsforløb under afvikling af animationen.animation-timing-function: linear | ease | ease-in | ease-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n)| initial | inherit; x

Background


      Baggrunde - både farver og billeder - i aktuelt tag fra <body> til f.eks. <td>.
Gradienter: Se afsnit 4 her
x
PropertiesBeskrivelseDeklarationerLinks 
backgroundKort version for opsætning af alle baggrund-properties i 1 samlet deklaration. Kun de nøvendige værdier indsættes - i vilkårlig rækkefølge.background: color image position size repeat origin clip attachment | initial | inherit; x x
background-attachmentStyring af om baggrunden skal stå fast eller følge resten af siden under scroll.background-attachment: scroll | fixed | local | initial | inherit; x x
zbackground-blend-modeStyring af blandingsforhold mellem baggrundslag (farver og / eller billeder).background-attachment: normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity; x
background-clipDet skærmudsnit baggrundsfarven skal knyttes til. (Se også "Basic Box | Clip).background-clip: border-box | padding-box | content-box | initial | inherit; x x
background-colorBaggrundsfarve for aktuelt tag.background-color: color | transparent | initial | inherit; x x
background-imageIndsætning af billede som baggrundbackground-image: url('URL') | none | initial | inherit; x x
background-originDet skærmudsnit billedet skal knyttes til.background-origin: padding-box | border-box | content-box | initial | inherit; x x
background-positionStartposition for baggrunds-billede.background-position: left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom, | x% y% | xpos ypos | initial | inherit; x x
background-repeatOm / hvordan baggrunds-billede skal gentagesbackground-repeat: repeat | repeat-x | repeat-y | no-repeat | space | round | initial | inherit; x x
background-sizeStyring af størrelsen på baggrunds-billede.background-size: auto | length | percentage | cover | contain | initial | inherit; x x

Basic Box

      Subjektivt udpluk fra andre grupper.
PropertiesBeskrivelseAttributesLinks
clipAfgrænsning af hvor stort et udsnit af indholdet i et tag (f.eks. et billede), der skal vises. Taggets størrelse forbliver uændret. (Se også "Background | Clip).clip: auto | shape | initial | inherit; x
vertical-alignVertikal forskydning af tekst - både op og ned.vertical-align: baseline | length | % | sub | super | top | text-top | middle | bottom | text-bottom | initial | inherit; x
visibilityOm et tag skal være synligt eller usynligtvisibility: visible | hidden | collapse | initial | inherit; x
z-indexTaggets placering i stak-rækkefølgen. xz-indez: auto | number | initial | inherit; x
Float.
clearOphæver fortsat anvendelse af den pågældende type float..clear: none | left | right | both | initial | inherit; x
floatSidelæns positionering for aktuelt indlejret tag. x.
(Ikke ved absolut positionering).
float: none | left | right | initial | inherit; x
Positionering.
positionPlacering af indholdet i et tag.
Se også: top, right, bottom og left.
position: static | absolute | fixed | relative | sticky | initial | inherit; x
topVed absolut positionering: Indsætter afstand mellem toppen af aktuelt tag og det tag, det er indlejret i.
Ved relativ positionering: Indsætter afstand mellem toppen af aktuelt tag og dets normale placering.
Ved fixed positionering: Indsætter afstand til toppen af skærmbilledet.
Se også position.
top: auto | length | % | initial | inherit; x
rightVed absolut positionering: Indsætter afstand mellem højre side af aktuelt tag og det tag, det er indlejret i.
Ved relativ positionering: Indsætter afstand mellem højre af aktuelt tag og dets normale placering.
Ved fixed positionering: Indsætter afstand til højre side af skærmbilledet.
Se også position.
right: auto | length | % | initial | inherit; x
bottomVed absolut positionering: Indsætter afstand mellem bunden af aktuelt tag og det tag, det er indlejret i.
Ved relativ positionering: Indsætter afstand mellem bunden af aktuelt tag og dets normale placering.
Ved fixed positionering: Indsætter afstand til bunden af skærmbilledet.
Se også position.
bottom: auto | length | % | initial | inherent; x
leftVed absolut positionering: Indsætter afstand mellem venstre side af aktuelt tag og det tag, det er indlejret i.
Ved relativ positionering: Indsætter afstand mellem venstre side af aktuelt tag og dets normale placering.
Ved fixed positionering: Indsætter afstand til venstre side af skærmbilledet.
Se også position.
left: auto | length | % | initial | inherit; x

Basic User Interface

      Subjektivt udpluk af mindre væsentlige properties fra andre grupper.
x
PropertiesBeskrivelseAttributesLinks
box-sizingStyring af håndtering af padding og border i (<div>)-bokse.
x
box-sizing: content-box | border-box | initial | inherit: x x
cursorDen type markør, der skal vises.cursor: alias | all-scroll | auto | cell | context-menu | col-resize | copy | crosshair | default | e-resize | ew-resize | grab | grabbing | help | move | n-resize | ne-resize | nesw-resize | ns-resize | nw-resize | nwse-resize | no-drop | none | not-allowed | pointer | progress | row-resize | s-resize | se-resize | sw-resize | text | url | vertical-text | w-resize | wait | zoom-in | zoom-out | initial | inherit; x x
caret-colorFarve på markør i input-felterauto | color; x x
resizeStyring af om brugeren kan ændre størrelsen på et specifikt tag (f.eks. 'textarea').resize: none | both | horizontal | vertical | initial | inherit; x x
Omrids
Ramme omkring tag for at fremhæve dets indhold. Mange lighedspunkter med 'border'.
outlineKort version for opsætning af alle properties for omrids i 1 samlet deklaration.outline: outline-width outline-style outline-color | initial | inherit; x x
outline-colorFarve for omrids omkring et element.outline-color: invert | color | initial | inherit; x x
outline-offsetAfstand fra 'indhold' ud til placeringen af outline.outline-offset: length | initial | inherit: x x
outline-styleStregtype for omrids omkring et element.outline-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit; x x
outline-widthBredde på stregtype omkring et element.outline-width: medium | thin | thick | length | initial | inherit; x x

Border

      x Kanter (streger, runde hjørner og billeder). x Kanter og skygger på mange tags.
x
PropertiesBeskrivelseAttributesLinks
Kanter (streger, runde hjørner og billeder)
Alle 4 kanter.
border
border-top
border-right
border-bottom
border-left
Kort version for opsætning af properties for alle 4 kanter (samlet eller enkeltvis) i 1 samlet deklaration.border: border-width border-style border-color | initial | inherit;

border: 5px solid red;
x x
border-colorAngivelse af hvilken farve den definerede border skal have.border-color: color | transparent | initial | inherit; x x
border-styleAngivelse a hvilken udformning den definerede border skal have.border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit | inherit; x x
border-widthAngivelse af den bredde den definerede border skal have.border-width: thin | medium | thick |length(px) | inherit | inherit; x x
Venstre kant (Bliver default som højre kant, når kun 3 af 4 angivet for "Alle 4 kanter")
border-leftKort version for opsætning af alle properties for venstre kant i 1 deklaration.border-left: border-left-width border-left-style border-left-color | initial | inherit; x x
border-left-colorFarve på venstre kant.border-left-color: color | transparent | initial | inherit; x x
border-left-styleStregtype for venstre kant.border-left-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit; x x
border-left-widthBredde på venstre kantborder-width: thin | medium | thick |length | initial | inherit; x x
Nederste kant. (Bliver default som øverste kant, når kun 2 af 4 angivet for "Alle 4 kanter")
border-bottomKort version for opsætning af alle properties for nederste kant i 1 deklaration.border-bottom: border-width border-style border-color | initial | inherit; x x
border-bottom-colorFarve på den nederste kant.border-bottom-color: color | transparent | initial | inherit; x x
border-bottom-styleStregtype for den nederste kant.border-bottom-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit; x x
border-bottom-widthBredde på den nederste kant.border-bottom-width: thin | medium | thick | length(px) | initial | inherit; x x
Højre kant (Bliver default som øverste kant, når kun 1 af 4 angivet for "Alle 4 kanter")
border-rightKort version for opsætning af alle properties for højre kant i 1 deklaration.border-right: border-width border-style border-color | initial | inherit; x x
border-right-colorFarve på højre kantborder-right-color: color | transparent | initial | inherit; x x
border-right-styleStregtype for højre kantborder-right-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit; x x
border-right-widthBredde på højre kantborder-bottom-width: thin | medium | thick | length | initial | inherit; x x
Øverste kant
border-topKort version for opsætning af alle properties for øverste kant i 1 deklaration.border-top: border-top-width border-top-style border-top-color | initial | inherit; x x
border-top-colorFarve på øverste kantborder-top-color: color | transparent | initial | inherit; x x
border-top-styleStregtype for øverste kantborder-top-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit; x x
border-top-widthBredde på nederste kantborder-top-width: thin | medium | thick | length | initial | inherit; x x
Radius - Runde hjørner
border-radiusKort version for opsætning af properties for runde hjørner for alle 4 hjørner i 1 samlet deklaration.
1-4 angivelser styrer fra alle til individuelt hjørne.
(50% = oval)
border-radius: 1-4 length | % | initial | inherit; x x
border-bottom-left-radiusRadius for nederste venstre hjørne. To length værdier styrer hhv. horisontal og vertikal del.border-bottom-left-radius: length | % | initial | inherit; x x
border-bottom-right-radiusRadius for nederste højre hjørne. To length værdier styrer hhv. horisontal og vertikal del.border-bottom-right-radius: length | % | initial | inherit; x x
border-top-left-radiusRadius for øverste venstre hjørne. To length værdier styrer hhv. horisontal og vertikal del.border-top-left-radius: length | % | initial | inherit; x x
border-top-right-radiusRadius for øverste højre hjørne. To length værdier styrer hhv. horisontal og vertikal del.border-top-right-radius: length | % | initial | inherit; x x
Kant billede - Billede / bort (vektor) som border-style.
border-imageKort version af opsætning af alle properties for kanten som billede i 1 deklaration.border-image: source slice width outset repeat; x x
border-image-outset1 - 4 værdier for hvor langt billedet skal "rage ud" over kanterneborder-image-outset: length | number | initial | inherit; x x
border-image-repeatRegelsæt for gentagelse af billedet.border-image-repeat: stretch | repeat | round | space | initial | inherit; x x
border-image-slice1 - 4 værdier for hvor meget af billedet der skal vises som kanter.border-image-slice: number | % | fill | initial | inherit; x x
border-image-sourceLink til "kant-billedet".border-image-source: none | image | initial | inherit; x x
border-image-width1 - 4 værdier for hvor brede billed-kanterne skal være.border-image-width: length | number | % | auto | initial | inherit; x x
Skygger
box-shadowSkygge bag figur.box-shadow: none | h-offset | v-offset | blur | spread | color | inset | initial | inherit; x x

Box Alignment

      Alignment af bokse i deres containere i forskellige layout modeller.
x
PropertiesBeskrivelseAttributesLinks
Align
align-contentStyring af, hvordan items skal vises vertikalt ved wrap.align-conent: stretch | center | flex-start | flex-end | space-between | space-around | initial | inherit; x x
align-itemsStyring af, hvordan items skal vises vertikalt uden wrap.align-items: stretch | center | flex-start | flex-end | baseline | initial | inherit; x x
align-selfStyring af vertikal visning for individuelt item.align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit; x x
Justify
justify-contentStyring af, hvordan items skal vises horisontalt.justify-content: flex-start | flex-end | center | space-between | space-around | initial | inherit; x x
justify-itemsDefault justify-self for alle child-boxes, der indgår i aktuel boks opbygning.justify-items: normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | legacy | legacy && [ left | right | center ] | initial | inherit; x
justify-selfJustering af en boks' yderkanter indenfor den container, den er indeholdt i.justify-self: auto | normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | initial | inherit; x
Place
place-contentKort version for samtidig opsætning af align-items og justify-items.place-content: <'align-content'> <'justify-content'>? ; x
place-itemsKort version for samtidig opsætning af align-content og justify-content.place-items: <'align-items'> lt;'justify-items'>? ; x
place-selfKort version for samtidig opsætning af align-self og justify-self.place-self: <'align-self'> lt;'justify-self'>? ; x
Gap
gapKort version for samtidig opsætning af row-gap og column-gap.gap: <'row-gap'> <'column-gap'>? x
column-gapAngivelse af fast størrelse af afstanden mellem kolonner til adskillelse af bokse i en container.column-gap: normal | <length-percentage>; x
row-gapAngivelse i fast størrelse af afstanden mellem rækker til adskillelse af bokse i en container.row-gap: normal | <length-percentage>; x

Box Model

      Margin og padding omkring bokse.
x
PropertiesBeskrivelseAttributesLinks
Margin.
marginKort version for opsætning af alle properties for marginer indad i 1 samlet deklaration.margin: length | % | auto | initial | inherit; x x
margin-bottomMargin indad i bunden af tag.margin-bottom: length | % | auto | initial | inherit; x x
margin-leftMargin indad i venstre side af tag.margin-left: length | % | auto | initial | inherit; x x
margin-rightMargin indad i højre side af tag.margin-right: length | % | auto | initial | inherit; x x
margin-topMargin indad i toppen af tag.margin-top: length | % | auto | initial | inherit; x x
margin-trimTrimning af marginer for "children" ved hjørnerne af en container.margin-trim: none | in-flow | all | initial | inherit; x
Padding.
paddingKort version for opsætning af alle properties for padding udad i 1 samlet deklaration.padding: length | % | initial | inherit; x x
padding-bottomPadding udad i bunden af tag.padding-bottom: length | % | initial | inherit; x x
padding-leftPadding udad i venstre side af tag.padding-left: length | % | initial | inherit; x x
padding-rightPadding udad i højre side af tag.padding-right: length | % | initial | inherit; x x
padding-topPadding udad i toppen af tag.padding-top: length | % | initial | inherit; x x

Cascading and Inheritance

      Ændring af alle properties knyttet til et element tilbage til startværdi eller nedarvet startværdi.
x
PropertiesBeskrivelseAttributesLinks
allÆndrer alle properties knyttet til et element tilbage til startværdi eller nedarvet startværdi. (Dog ikke unicode-bdi og retning).initial | inherit | unset; x x

Color

      Alle farver over 'background'.
x
PropertiesBeskrivelseAttributesLinks
colorStyring af farver.color: color | initial | inherit; x x
opacityGrad af gennemsigtighed for farver (value: 0.0 helt, 1.0 slet ikke)opacity: value | initial | inherit; x x

Display

      Styring af rendering af data i et tag.
x
displayStyring af hvordan et tag skal vises (inline).display: inline | block | contents | flex | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | run-in | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | initial | inherit ; x x

Filter Effects

      Photoshop-lignende filtre til modifikation af billeder. Flere kan anvendes samtidig.
PropertiesBeskrivelseAttributesLinks
filterSammensætning af filtre til at 'efterbehandle' billede.
x
filter: none | blur(px) | brightness(%) | contrast(%) | drop-shadow() | gray-scale(%) | hue-rotate(deg) | invert(%) | opacity(%) | saturate(%) | sepia(%) | url() | initial | inherit; x

Flexible Box

      Opbygning af responsive strukturer uden brug af float / positionering. Skal startes med "{display: flex:}".
x
PropertiesBeskrivelseAttributesLinks
orderStyring af rækkefølgen for visning af items.order: number | initial | inherit; x
Flex
flexKort version for opsætning af flex-grow, flex-shrink og flex-basis i 1 samlet deklaration.flex: flex-grow + flex-shrink + flex-basis | auto | initial | none | inherit; x
flex-basisSætter specifik størrelse (px) på item i flex-retningen.flex-basis: number | auto | initial | inherit; x
flex-directionRetning, hvori items skal vises.flex-direction: row | row-reverse | column | column-reverse | initial | inherit; x
flex-flowKort version for opsætning af flex-direction og flex-wrap i 1 samlet deklaration.flex-flow: flex-direction + flex-wrap| initial | inherit; x
flex-growStyring af dynamisk forholdsmæssig bredde på items. (Default = 1)flex-grow: number | initial | inherit; x
flex-shrinkTillader at item krymper ved samlet overflow.flex-shrink: number | initial | inherit; x
flex-wrapHvordan items skal wrappe (fordele sig over 2 eller flere linier)flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit; x

Fonts

      Valg af tegnsæt incl. import af eksterne tegnsæt.
x
PropertiesBeskrivelseAttributesLinks
z@font-faceOpbygning af link til ekstern font til brug i stedet for browserens præinstallerede standard fonte. xfont-family src font-stretch font-style font-weight unicode-range; x x
fontKort version for opsætning af alle properties for et tegnsæt i 1 deklaration.font: font-style | font-variant | font-weight | font-size/line-height | font-family | caption | icon | menu | message-box | small-caption | status-bar | initial | inherit; x x
font-familyPrioriteret liste med tegnsæt navne og/eller generiske tegnsæt navne i 1 enkelt deklaration.font-family: family-name eller generic-family | initial | inherit; x x
font-feature-settingsStyring af skalerbare fonte.font-feature-settings: normal | smcp | swsh | smcp swsh | initial | inherit; x
font-kerningStyring af afstand mellem tegn.font-kerning: auto | normal | none; x
font-sizeTegnstørrelse på font.font-size: medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length | % | initial | inherit; x x
font-size-adjustAngivelse af "aspect-værdi" for anvendelse ved brug af reserve-font.font-size-adjust: number | none | initial | inherit; x x
font-stretchÆndring af bredden på tegnene i aktuelt tegnsæt.font-stretch: ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded | initial | inherit; x x
font-styleSærlig skrifttype for aktuelt tegnsæt.font-style: normal | italic | oblique | initial | inherit x x
font-synthesisStyring af om browseren må lave syntetiske 'bold' og 'italic', når disse mangler i aktuelt tegnsæt.none | weight style | weight | style | initial | inherited; x
zfont-variantSmå bogstaver som versaler.font-variant: normal | small-caps | initial | inherit; x x
font-weightBogstavernes stregtykkelse - 400 = normal, 700 = bold.font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | initial | inherit; x x
Font variant
font-variant-capsStyring af den alternative type store bogstaver, der skal anvendes.font-variant-caps: normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps; x
font-variant-east-asianStyring af den alternative type østasiatiske tegn (japansk og kinesisk), der skal anvendes.font-variant-east-asian: normal | jis78 | jis83 | jis90 | jis04 | simplified | traditional | full-width | proportional-width | ryby; x
font-variant-ligaturesStyring af den alternative type ligaturer, der skal anvendes.font-variant-ligatures: normal | none | common-ligatures | no-common-ligatures | discretionary-ligatures | no-discretionary-ligatures | historical-ligatures | no-historical-ligatures | contextual | no-contextual initial | inherit; x
font-variant-numericStyring af den alternative type tal og brøker, der skal anvendes.font-variant-numeric: normal | ordinal | slashed-zero | lining-nums | oldstyle-nums | proportional-nums | tabular-nums | diagonal-fractions | stacked-fractions | initial | inherit; x
font-variant-positionStyring af den alternative type små bogstaver, der skal anvendes til superscript og subscript.font-variant-position: normal | sub | super | initial | inherit; x

Fragmentation

      Håndtering af tekst etc. ved styret sideskift.
x
break
break-afterpage, column or region break behavior after the generated box.break-after: auto | avoid | avoid-page | page | left | right | recto | verso | avoid-colum | column | avoid-region | region; x
break-beforepage, column or region break behavior before the generated box.break-before: auto | avoid | avoid-page | page | left | right | recto | verso | avoid-colum | column | avoid-region | region; x
break-insidepage, column or region break inside the generated box.break-inside: auto | avoid | avoid-page | avoid-column | avoid-region; x
orphansDet mindste antal linier fra et afsnit, der ved sideskift skal udskrives før sideskift.orphans: integer | initial | inherit; x
widowsDet mindste antal linier fra et afsnit, der ved sideskift skal føres over til næste side.widows: integer | initial | inherit; x
box-decoration-breakHåndtering af kanter etc. ved f.eks. sideskift.box-decoration-break : slice | clone | initial | inherit | unset; x

Generated content

      Visuelt sideindhold.
quotesDefinition af anførselstegn til citeringer.quotes: none | string ... string | initial | inherit; x

Grid

      Opbygning af gitter indeni en <div class="grid-container">.
x
gridKort version for opsætning af grid-template-rows, grid-template-columnjs, grid-template-areas, grid-auto-rows, grid-auto-columns og grid-auto-flowgrid: none|grid-template-rows / grid-template-columns|grid-template-areas|grid-template-rows / [grid-auto-flow] grid-auto-columns|[grid-auto-flow] grid-auto-rows / grid-template-columns|initial|inherit; x
grid-areaKort version for opsætning af grid-row-start, grid-column-start, grid-row-end og grid-column-endgrid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname; x
grid-auto-columnsSætter størrelsen på kolonner i en gitter-container, når deres størrelse ikke angivet specifikt.grid-auto-columns: auto|max-content|min-content|length; x
grid-auto-flowStyrer hvordan auto-placerede items indsættes i gitteretgrid-auto-flow: row|column|dense|row dense|column dense; x
grid-auto-rowsDefault størrelse på rows i gitter.grid-auto-columns: auto|max-content|min-content|length; x
grid-columnKort version for opsætning af grid-column-start og grid-column-end.grid-column: grid-column-start / grid-column-end; x
grid-column-endAngivelse af kolonnes bredde eller ende (12te dele)grid-column-end: auto|span n|column-line; x
grid-column-gapAfstand mellem 2 kolonner (px).grid-column-gap: length; x
grid-column-startAngivelse af på hvilken horisontal kolonneplads, kolonnen skal placeres.grid-column-start: auto|span n|column-line; x
grid-gapKort version for opsætning af grid-row-gap og grid-column-gap.grid-gap: grid-row-gap grid-column-gap; x
grid-rowKort version for opsætning af grid-row-start og grid-row-end.grid-row: grid-row-start / grid-row-end; x
grid-row-endAntal rækker en celle skal spænde over eller hvilken række-linie cellen skal slutte på.grid-row-end: auto|row-line|span n; x
grid-row-gapAfstand mellem 2 rækker (px).grid-row-gap: length; x
grid-row-startAngivelse af rækkelinie, hvorpå cellen skal starte.grid-row-start: auto|row-line; x
grid-templateKort version for opsætning af grid-template-rows, grid-template-columns og grid-template-areas.grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit; x
grid-template-areasTildeling af individuelle navne til grid-celler.grid-template-areas: none|itemnames; x
grid-template-columnsAngivelse af antal kolonner (og deres bredde) i et gitter-layout.grid-template-columns: none|auto|max-content|min-content|length|initial|inherit; x
grid-template-rowsAngivelse af antal rækker (og deres højde) i et gitter-layout.grid-template-rows: none|auto|max-content|min-content|length|initial|inherit; x

Image Values

      Placering og opløsning af billeder.
Gradienter: Se afsnit 4 her
x
PropertiesBeskrivelseAttributesLinks
image-orientationVinkel billedet skal drejes.image-orientation: <angle> x
image-resolutionAngivelse af den opløsning der skal anvendes ved rendering af billedet.image-resolution: [from-image || <resolution>] && snap; x
object-fitStyring af hvordan billede / video tilpasses en given højde og bredde.object-fit: fill | contain | cover | none | scale-down |initial | inherit; x x
object-positionStyring af placering af billede / video i box dertil. Midten = 50&37; 50&37;.object-position: nn% nn% | nnpx nnpx; x x

Intrinsic & Extrinsic Sizing

      Højder / bredder.
x
box-sizingStyring af håndtering af padding og border i (<div>)-bokse.
x
box-sizing: content-box | border-box | initial | inherit: x x
heightHøjden på en tag.height: auto | length | % | initial | inherit; x x
max-heightMax.højden på et element.max-height: none | length | % | initial | inherit; x x
max-widthMax. bredden på et element.max-width: none | length | % | initial | inherit; x x
min-heightMin. højden på et element.min-height: length | % | initial | inherit; x x
min-widthMin. bredden på et element.min-width: length | % | initial | inherit; x x
widthBredden på et tag.width: auto | length | % | initial | inherit x x

Lists and Counters

      Nummerering af overskrifter og listepunkter.
PropertiesBeskrivelseAttributesLinks
Overskrifter
counter-incrementOpbygning af nummerering af afsnit baseret på <hx>-overskrifter.counter-increment: none | id number | initial | inherit; x
counter-resetOpbygning af regelsæt for nulstilling af tælleværk bag counter-increment.counter-reset: none | id number | initial | inherit; x
Lister
list-styleKort version for opsætning af alle 3 properties for en liste i 1 samlet deklaration.list-style: list-style-type list-style-position list-style-image |initial | inherit; x
list-style-imageUrl til billede/ikon, der skal vises som 'bullet' foran listepunkter.
None = Der vises ingen bullets eller andet.
list-style-image: none | url | initial | inherit; x
list-style-positionStyring af, hvor i listen 'bullet' skal placeres.list-style-position: inside | outside | initial | inherit; x
list-style-typeType 'bullet', der skal vises ved listepunkter. xlist-style-type: disc | armenian | circle | cjk-ideographic | decimal | decimal-leading-zero | georgian | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-alpha | lower-greek | lower-latin | lower-roman | none | square | upper-alpha | upper-greek | upper-latin | upper-roman | initial |inherit; x

Multi-column

      Tekst i kolonner - som i avis. Skal være i div-tag.
PropertiesBeskrivelseAttributesLinks
Kolonneopbygning.
columnsKort version for opsætning af column-width og column-count.columns: auto | column-width | column-count | initial | inherit; x
column-countHeltal teksten i div-taggen skal divideres med. For at beregne tekstmængde pr kolonne.column-count: number | auto | initial | inherit; x
column-fillHvordan kolonnerne skal fyldes.column-fill: balance | auto | initial | inherit; x
column-gapAntal pixels mellem kolonnerne.column-gap: length | normal | initial | inherit; x
column-ruleKort version for opsætning af column-rule-width og column-rule-style, column-rule-color.column-rule: column-rule-width column-rule-style column-rule-color | initial | inherit; x
column-rule-colorKolonnestregens farve.column-rule-color: color | initial | inherit; x
column-rule-styleKolonnestregens stregform.column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit; x
column-rule-widthKolonnestregens bredde.column-rule-width: medium | thin | thick | length | initial | inherit; x
column-spanAngivelse af hvor mange kolonner et tag (f.eks. en overskrift) skal spænde over.column-span: none | all | initial | inherit; x
column-widthKolonne-bredde i pixels.column-width: auto | length | initial | inherit; x

Overflow

      Håndtering af scrollabel overflow i visuelle medier.
x
Scrollbar
overflowKort version for samlet etablering af overflow-x og overflow-y.overflow: visible | hidden | scroll | auto | initial | inherit; x x
overflow-xTillader overflow med horisontal scrollbar.overflow-x: visible | hidden | scroll | auto | initial | inherit; x x
overflow-yTilader overflow med vertikal scrollbar.overflow-y: visible | hidden | scroll | auto | initial | inherit; x x
Block / inline
overflow-blockSom overflow-y, men for blok.overflow-block: <'overflow'> x
overflow-inlineSom overflow-x, men for inline.overflow-inline: <'overflow'> x
Text
text-overflowStyring af, hvordan brugeren informeres om overflow, der ikke kan vises i inddatafelt.text-overflow: clip | ellipsis | string | initial | inherit; x x
Block
block-overflowTillader indsættelse af indhold i den sidste "line box" før et "region break" for ast indikere kontinuitet.block-overflow: clip | ellipsis | <string> x
Fragmentering
line-clampKort version for samlet etablering af max-lines, block-overflow og continue.line-clamp: none | <integer> <block-overflow> ? | initial | inherit; x
max-lines"Region break" gennemtvinges efter anførte antal linier.max-lines: none | <integer> | initial | inherit; x
continueÆndrer en boks til en "fragmentation container" og angivelse af at der skal bortses fra indhold efter "fragmentation break".continue: auto | discard | initial | inherit; x

Paged Media

      Generering og layout for sider med fragmenteret indhold i en "paged" præsentation.
x
PropertiesBeskrivelseAttributesLinks
pageAngivelse af specifik type side (kaldet "named page") hvorpå et tag skal vises.page: auto | <custom-ident> ; x

Table

      Styring af tabeller
PropertiesBeskrivelseAttributesLinks
table-layoutStyring af kolonnebredden.table-layout: auto | fixed | initial | inherit; x

Tekst

      Tilpasning af tekst.
x
PropertiesBeskrivelseAttributesLinks
hanging-punctuationOm tegnsætning foran eller efter regulær tekst (f.eks. " ... " omkring citater) må "hænge udenfor".hanging-punctuation: none | first | last | allow-end | force-end | initial | inherit; x x
hyphensStyring af sætning af bindestreger for blødere orddeling.hyphens: none | manual | auto | initial | inherit; x x
letter-spacingAfstand mellem bogstaver.letter-spacing: normal | length | initial | inherit; x x
line-breakStyring af hvor stramme reglerne for linieskift skal være indenfor et tag - med særlig hensyntagen til tegnsætning.line-break: auto | loose | normal | strict | initial | inherit x
zline-heightAfstand mellem linier / liniehøjde.
Tekst forbliver på midten.
line-spacing: normal | number | length | % | initial | inherit; x
overflow-wrapRegler for brud på streng, når denne længere end vinduets bredde.overflow-wrap: normal | break-word | initial | inherit x
tab-sizeAntal karakterer knyttet til 'tab'-karakteren ved tryk på 'TAB'-knappen..tab-size: number | length | initial | inherit; x x
text-alignSideværts placering af tekst.text-align: left | right | center | justify | initial | inherit; x x
text-align-allLang version at text-align. Styrer inline alignment for alle linier i en blok container, bortset fra sidste linier overstyret med en non-auto value af text-align-last.text-align-last: start | end | left | right | center | justify | match-parent | initial | inherit; x
text-align-lastVed text-align: last;: Hvordan sidste linie i et afsnit skal håndteres ved text-align = "justify".text-align-last: auto | left | right | center | justify | start | end | initial | inherit; x x
text-indentIndrykning af første linie i et element.text-indent: length | % | initial | inherit; x x
text-justifyMellemrum mellem ord ved text-align = "justify".text-justify: auto | inter-word | inter-character | none | initial | inherit; x x
text-transformOmformning af tekst (til STORE / små bogstaver).text-transform: none | capitalize | uppercase | lowercase | initial | inherit; x x
white-spaceStyring af mellemrum mellem ord.white-space: normal | nowrap | pre |pre-line | pre-wrap | initial | inherit; x x
word-breakStyring af "ny linie" - ikke for sprog baseret på skrifttegn.word-break: normal | break-all | keep-all | break-word | initial | inherit; x x
word-spacingStørrelsen på mellemrum mellem ord.word-spacing: normal | lenght | initial | inherit; x x
word-wrapBrud på lange ord udover generelle regelsæt.word-wrap: normal | break-word | initial | inherit; x x

Text Decoration

      Tilpasning af tekst.
x
PropertiesBeskrivelseAttributesLinks
Decoration+
text-decorationKort version for opsætning af text-decoration-line text-decoration-color og text-decoration-style.text-decoration: text-decoration-line text-decoration text-decoration-color text-decoration style | initial | inherit; x x
text-decoration-colorFarve på tekst modifikation.text-decoration-color: color | initial | inherit; x x
text-decoration-lineModifikation af tekst. F.eks. overstregning.text-decoration-line: none | underline | overline | line-through | initial | inherit; x x
text-decoration-styleModifikations udseende.text-decoration: solid | double | dotted | dashed | wavy | initial | inherit; x x
text-shadowSkyggeeffekt til tekst.text-shadow: h-shadow | v-shadow | blur-radius | color | none | initial | inherit; x x
text-underline-positionPlacering af underline andetsteds end med 'text-decoration: underline;'text-underline-position: auto | under | left | right | initial | inherit; x
Emphasis
fremhævelse af tekst
text-emphasisKort version for text-emphasis-style og text-emphasis-color.text-emphasis: <'text-emphasis-style'> || <'text-emphasis-color'> x x
text-emphasis-colorAngivelse af farve, fremhævelsen skal have.text-emphasis-color: <color> | initial | inherit; x
text-emphasis-positionAngivelse af hvor fremhævelsen skal placeres.text-emphasis-position: [ over | under ] && [ right | left ]? | initial | inherit; x
text-emphasis-styleAngivelse af den fremhævelse, der skal vises.text-emphasis-style: none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | <string> | initial | inherit; x

Transform

      Rotation af div-element.
PropertiesBeskrivelseAttributesLinks
backface-visibilityVisning af bagsiden af et roteret div-element.backface-visibility: visible | hidden | initial | inherit; x
perspectiveDet perspektiv (den højde over fladen) elementet ses fra.perspective: length | none | initial | inherit; x
perspective-originDrejning af en <div>-box så den vises perspektivisk.
Ved 129% forsvinder den helt.
perspective-origin: x-axis y-axis | initial | inherit; x
transformMange måder, hvorpå et element (f.eks. en divboks) kan flyttes, vendes, drejes, skaleres, skråtstilles, perspektiveres etc. Flere kan samles i blank-separeret streng.transform: none | matrix(n,n,n,n,n,n) | matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | translate(x,y) | translate3d(x,y,z) | translateX(x) | translateY(y) | translateZ(z) | scale(x,y) | scale3d(x,y,z) | scaleX(x) | scaleY(y) | scaleZ(z) | rotate(angle) | rotate3d(x,y,z,angle) | rotateX(angle) | rotateY(angle) | rotateZ(angle) | skew(x-angle,y-angle) | skewX(angle) | skewY(angle) | perspective(n) | initial | inherit; x
transform-originFlytning af et element's omdrejningspunkt bort fra default - 50% horisontalt og vertikalt.transform-origin: x-axis y-axis z-axis | initial | inherit; x
transform-styleStyring af om overlappende <div>-boxe skal vises som 2d eller 3d.transform-style: flat | preserve-3d | initial | inherit; x

Transition

      Dynamisk ændring af størrelse på <div>-box.
PropertiesBeskrivelseAttributesLinks
transitionKort version for opsætning af alle 4 transition properties i 1 samlet deklaration.transition: property duration timing-function delay | initial | inherit; x
transition-delayAntal sekunder(s) / millisekunder(ms) før ændringen skal påbegyndes.transition-delay: time | initial | inherit; x
transition-durationAntal sekunder(s) / millisekunder(ms) ændringen skal tage.transition-duration: time | initial | inherit; x
transition-propertyÆndring af størrelse på en <div>-box ved mouse-over. Tilbage ved mouse-out.transition-property: none | all | property | initial | inherit; x
transition-timing-functionHastighedsforløb under afvikling af ændringen.transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int, start | end)| cubic-bezier(n,n,n,n)| initial | inherit; x

Writing Modes

      Skriveretning over siden og teksttegnenes orientering.
x
PropertiesBeskrivelseAttributesLinks
directionVisning af tekst fra venstre mod højre eller omvendt.direction: ltr | rtl | initial | inherit; x x
text-orientationVed 'writing-mode: vertical-xx': Teksttegnenes retning.text-orientation: mixed | upright | sideways | initial | inherited; x
text-combine-uprightStyring af hvordan 'multiple characters' indsættes i pladsbehovet for 'single character'.text-combine-upright: none | all | initial | inherit; x
unicode-bidiBlanding af venstre-højre tekst med højre-venstre tekst.unicode-bidi: normal | embed | bidi-override | isolate | isolate-override | plaintext | initial | inherit; x x
writing-modeStyring af skriveretning hen over siden.writing-mode: horizontal-tb | vertical-rl | vertical-lr; x x

Diverse

      Properties, der ikke kan henføres til en gruppe.
PropertiesBeskrivelseAttributesLinks
isolationStyring af om om et tag skal etablere en ny "stacking content", f.eks. ved "background-blend-mode".isolation: auto|isolate|initial|inherit; x
mix-blend-modeStyring af, hvordan taggets baggrundsfarve skal blendes i forhold til "parent" baggrund.mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | difference | exclusion | hue | saturation | color | luminosity; x
pointer-eventsStyring af om et tag reagerer på markør hændelser.pointer-events: auto | none; x
scroll-behaviorSkift til "blød" scrolling.scroll-behavior: auto|smooth|initial|inherit; x
user-selectStyring af om brugeren kan selektere teksten i tagget ved museklik.user-select: auto|none|text|all; x































































x
x