Grupperet oversigt over CSS-properties.
Sidste hovedgennemgang af listen: maj 2019.
Animation
|
|
Opbygning af simple animationer, der anvender @keyframes som "motor".
|
|---|
| |
| Properties | Beskrivelse | Syntaks | Links
|
|---|
| @keyframes | Navn på og definition af den enkelte animation som 'program'. | @keyframes animationname {keyframe-selector{css-styles;}} |
 |
| animation | Kort 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; |
|
| animation-delay | Antal sekunder(s) / millisekunder(ms) før animationan skal påbegyndes. | animation-delay: time | initial | inherit; |
|
| animation-direction | Den retning, hvori animationen skal foretages. | animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit; |
|
| animation-duration | Antal sekunder(s) / millisekunder(ms) animationan skal udføres. | animation-duration: time | initial | inherit; |
|
| animation-fill-mode | Styring af hvad der skal ske før og / eller efter animationens udførelse. | animation-fill-mode: none | forwards | backwards | both | initial | inherit; |
|
| animation-iteration-count | Antal gange animationen skal udføres. | animation-iteration-count: number | infinite | initial | inherit; |
|
| animation-name | Navn på den @keyframe-animation, der skal udføres. | animation-name: keyframename | none | initial | inherit; |
|
| animation-play-state | Styring af start-tilstand: pauseret eller kørende. | animation-play-state: paused | running | initial | inherit; |
|
| animation-timing-function | Hastighedsforlø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; |
|
Background
|
|
Baggrunde - både farver og billeder - i aktuelt tag fra <body> til f.eks. <td>.
Gradienter: Se afsnit 4 her
|
|---|
|  |
| Properties | Beskrivelse | Deklarationer | Links |
|---|
| background | Kort 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; |
|
| background-attachment | Styring af om baggrunden skal stå fast eller følge resten af siden under scroll. | background-attachment: scroll | fixed | local | initial | inherit; |
|
| zbackground-blend-mode | Styring af blandingsforhold mellem baggrundslag (farver og / eller billeder). | background-attachment: normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity; |
|
| background-clip | Det skærmudsnit baggrundsfarven skal knyttes til. (Se også "Basic Box | Clip). | background-clip: border-box | padding-box | content-box | initial | inherit; |
|
| background-color | Baggrundsfarve for aktuelt tag. | background-color: color | transparent | initial | inherit; |
|
| background-image | Indsætning af billede som baggrund | background-image: url('URL') | none | initial | inherit; |
|
| background-origin | Det skærmudsnit billedet skal knyttes til. | background-origin: padding-box | border-box | content-box | initial | inherit; |
|
| background-position | Startposition 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; |
|
| background-repeat | Om / hvordan baggrunds-billede skal gentages | background-repeat: repeat | repeat-x | repeat-y | no-repeat | space | round | initial | inherit; |
|
| background-size | Styring af størrelsen på baggrunds-billede. | background-size: auto | length | percentage | cover | contain | initial | inherit; |
|
Basic Box
|
|
Subjektivt udpluk fra andre grupper.
|
|---|
| |
| Properties | Beskrivelse | Attributes | Links |
|---|
| clip | Afgræ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; |
|
| vertical-align | Vertikal forskydning af tekst - både op og ned. | vertical-align: baseline | length | % | sub | super | top | text-top | middle | bottom | text-bottom | initial | inherit; |
|
| visibility | Om et tag skal være synligt eller usynligt | visibility: visible | hidden | collapse | initial | inherit; |
|
| z-index | Taggets placering i stak-rækkefølgen.  | z-indez: auto | number | initial | inherit; |
|
| Float. |
| clear | Ophæver fortsat anvendelse af den pågældende type float.. | clear: none | left | right | both | initial | inherit; |
|
| float | Sidelæns positionering for aktuelt indlejret tag. .
(Ikke ved absolut positionering). | float: none | left | right | initial | inherit; |
|
| Positionering. |
| position | Placering af indholdet i et tag.
Se også: top, right, bottom og left. | position: static | absolute | fixed | relative | sticky | initial | inherit; |
|
| top | Ved 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; |
|
| right | Ved 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; |
|
| bottom | Ved 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; |
|
| left | Ved 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; |
|
Basic User Interface
|
|
Subjektivt udpluk af mindre væsentlige properties fra andre grupper.
|
|---|
| |
| Properties | Beskrivelse | Attributes | Links |
|---|
| box-sizing | Styring af håndtering af padding og border i (<div>)-bokse.
 | box-sizing: content-box | border-box | initial | inherit: |
|
| cursor | Den 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; |
|
| caret-color | Farve på markør i input-felter | auto | color; |
|
| resize | Styring af om brugeren kan ændre størrelsen på et specifikt tag (f.eks. 'textarea'). | resize: none | both | horizontal | vertical | initial | inherit; |
|
| Omrids |
|---|
| Ramme omkring tag for at fremhæve dets indhold. Mange lighedspunkter med 'border'. |
| outline | Kort version for opsætning af alle properties for omrids i 1 samlet deklaration. | outline: outline-width outline-style outline-color | initial | inherit; |
|
| outline-color | Farve for omrids omkring et element. | outline-color: invert | color | initial | inherit; |
|
| outline-offset | Afstand fra 'indhold' ud til placeringen af outline. | outline-offset: length | initial | inherit: |
|
| outline-style | Stregtype for omrids omkring et element. | outline-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit; |
|
| outline-width | Bredde på stregtype omkring et element. | outline-width: medium | thin | thick | length | initial | inherit; |
|
Border
|
|
 Kanter (streger, runde hjørner og billeder). Kanter og skygger på mange tags.
|
|---|
| |
| Properties | Beskrivelse | Attributes | Links |
|---|
| 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; |
|
| border-color | Angivelse af hvilken farve den definerede border skal have. | border-color: color | transparent | initial | inherit; |
|
| border-style | Angivelse a hvilken udformning den definerede border skal have. | border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit | inherit; |
|
| border-width | Angivelse af den bredde den definerede border skal have. | border-width: thin | medium | thick |length(px) | inherit | inherit; |
|
| Venstre kant (Bliver default som højre kant, når kun 3 af 4 angivet for "Alle 4 kanter") |
| border-left | Kort 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; |
|
| border-left-color | Farve på venstre kant. | border-left-color: color | transparent | initial | inherit; |
|
| border-left-style | Stregtype for venstre kant. | border-left-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit; |
|
| border-left-width | Bredde på venstre kant | border-width: thin | medium | thick |length | initial | inherit; |
|
| Nederste kant. (Bliver default som øverste kant, når kun 2 af 4 angivet for "Alle 4 kanter") |
| border-bottom | Kort version for opsætning af alle properties for nederste kant i 1 deklaration. | border-bottom: border-width border-style border-color | initial | inherit; |
|
| border-bottom-color | Farve på den nederste kant. | border-bottom-color: color | transparent | initial | inherit; |
|
| border-bottom-style | Stregtype for den nederste kant. | border-bottom-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit; |
|
| border-bottom-width | Bredde på den nederste kant. | border-bottom-width: thin | medium | thick | length(px) | initial | inherit; |
|
| Højre kant (Bliver default som øverste kant, når kun 1 af 4 angivet for "Alle 4 kanter") |
| border-right | Kort version for opsætning af alle properties for højre kant i 1 deklaration. | border-right: border-width border-style border-color | initial | inherit; |
|
| border-right-color | Farve på højre kant | border-right-color: color | transparent | initial | inherit; |
|
| border-right-style | Stregtype for højre kant | border-right-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit; |
|
| border-right-width | Bredde på højre kant | border-bottom-width: thin | medium | thick | length | initial | inherit; |
|
| Øverste kant |
| border-top | Kort 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; |
|
| border-top-color | Farve på øverste kant | border-top-color: color | transparent | initial | inherit; |
|
| border-top-style | Stregtype for øverste kant | border-top-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit; |
|
| border-top-width | Bredde på nederste kant | border-top-width: thin | medium | thick | length | initial | inherit; |
|
| Radius - Runde hjørner |
| border-radius | Kort 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; |
|
| border-bottom-left-radius | Radius for nederste venstre hjørne. To length værdier styrer hhv. horisontal og vertikal del. | border-bottom-left-radius: length | % | initial | inherit; |
|
| border-bottom-right-radius | Radius for nederste højre hjørne. To length værdier styrer hhv. horisontal og vertikal del. | border-bottom-right-radius: length | % | initial | inherit; |
|
| border-top-left-radius | Radius for øverste venstre hjørne. To length værdier styrer hhv. horisontal og vertikal del. | border-top-left-radius: length | % | initial | inherit; |
|
| border-top-right-radius | Radius for øverste højre hjørne. To length værdier styrer hhv. horisontal og vertikal del. | border-top-right-radius: length | % | initial | inherit; |
|
| Kant billede - Billede / bort (vektor) som border-style. |
| border-image | Kort version af opsætning af alle properties for kanten som billede i 1 deklaration. | border-image: source slice width outset repeat; |
|
| border-image-outset | 1 - 4 værdier for hvor langt billedet skal "rage ud" over kanterne | border-image-outset: length | number | initial | inherit; |
|
| border-image-repeat | Regelsæt for gentagelse af billedet. | border-image-repeat: stretch | repeat | round | space | initial | inherit; |
|
| border-image-slice | 1 - 4 værdier for hvor meget af billedet der skal vises som kanter. | border-image-slice: number | % | fill | initial | inherit; |
|
| border-image-source | Link til "kant-billedet". | border-image-source: none | image | initial | inherit; |
|
| border-image-width | 1 - 4 værdier for hvor brede billed-kanterne skal være. | border-image-width: length | number | % | auto | initial | inherit; |
|
| Skygger |
|---|
| box-shadow | Skygge bag figur. | box-shadow: none | h-offset | v-offset | blur | spread | color | inset | initial | inherit; |
|
Box Alignment
|
|
Alignment af bokse i deres containere i forskellige layout modeller.
|
|---|
| |
| Properties | Beskrivelse | Attributes | Links |
|---|
| Align |
|---|
| align-content | Styring af, hvordan items skal vises vertikalt ved wrap. | align-conent: stretch | center | flex-start | flex-end | space-between | space-around | initial | inherit; |
|
| align-items | Styring af, hvordan items skal vises vertikalt uden wrap. | align-items: stretch | center | flex-start | flex-end | baseline | initial | inherit; |
|
| align-self | Styring af vertikal visning for individuelt item. | align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit; |
|
| Justify |
|---|
| justify-content | Styring af, hvordan items skal vises horisontalt. | justify-content: flex-start | flex-end | center | space-between | space-around | initial | inherit; |
|
| justify-items | Default 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; |
|
| justify-self | Justering 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; |
|
| Place |
|---|
| place-content | Kort version for samtidig opsætning af align-items og justify-items. | place-content: <'align-content'> <'justify-content'>? ; |
|
| place-items | Kort version for samtidig opsætning af align-content og justify-content. | place-items: <'align-items'> lt;'justify-items'>? ; |
|
| place-self | Kort version for samtidig opsætning af align-self og justify-self. | place-self: <'align-self'> lt;'justify-self'>? ; |
|
| Gap |
|---|
| gap | Kort version for samtidig opsætning af row-gap og column-gap. | gap: <'row-gap'> <'column-gap'>? |
|
| column-gap | Angivelse af fast størrelse af afstanden mellem kolonner til adskillelse af bokse i en container. | column-gap: normal | <length-percentage>; |
|
| row-gap | Angivelse i fast størrelse af afstanden mellem rækker til adskillelse af bokse i en container. | row-gap: normal | <length-percentage>; |
|
Box Model
|
|
Margin og padding omkring bokse.
|
|---|
| |
| Properties | Beskrivelse | Attributes | Links |
|---|
| Margin. |
|---|
| margin | Kort version for opsætning af alle properties for marginer indad i 1 samlet deklaration. | margin: length | % | auto | initial | inherit; |
|
| margin-bottom | Margin indad i bunden af tag. | margin-bottom: length | % | auto | initial | inherit; |
|
| margin-left | Margin indad i venstre side af tag. | margin-left: length | % | auto | initial | inherit; |
|
| margin-right | Margin indad i højre side af tag. | margin-right: length | % | auto | initial | inherit; |
|
| margin-top | Margin indad i toppen af tag. | margin-top: length | % | auto | initial | inherit; |
|
| margin-trim | Trimning af marginer for "children" ved hjørnerne af en container. | margin-trim: none | in-flow | all | initial | inherit; |
|
| Padding. |
|---|
| padding | Kort version for opsætning af alle properties for padding udad i 1 samlet deklaration. | padding: length | % | initial | inherit; |
|
| padding-bottom | Padding udad i bunden af tag. | padding-bottom: length | % | initial | inherit; |
|
| padding-left | Padding udad i venstre side af tag. | padding-left: length | % | initial | inherit; |
|
| padding-right | Padding udad i højre side af tag. | padding-right: length | % | initial | inherit; |
|
| padding-top | Padding udad i toppen af tag. | padding-top: length | % | initial | inherit; |
|
Cascading and Inheritance
|
|
Ændring af alle properties knyttet til et element tilbage til startværdi eller nedarvet startværdi.
|
|---|
| |
| Properties | Beskrivelse | Attributes | Links |
|---|
| 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; |
|
Color
|
|
Alle farver over 'background'.
|
|---|
| |
| Properties | Beskrivelse | Attributes | Links |
|---|
| color | Styring af farver. | color: color | initial | inherit; |
|
| opacity | Grad af gennemsigtighed for farver (value: 0.0 helt, 1.0 slet ikke) | opacity: value | initial | inherit; |
|
Display
|
|
Styring af rendering af data i et tag.
|
|---|
| |
| display | Styring 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 ; |
|
Filter Effects
|
|
Photoshop-lignende filtre til modifikation af billeder. Flere kan anvendes samtidig.
|
|---|
| |
| Properties | Beskrivelse | Attributes | Links |
|---|
| filter | Sammensætning af filtre til at 'efterbehandle' billede.
| filter: none | blur(px) | brightness(%) | contrast(%) | drop-shadow() | gray-scale(%) | hue-rotate(deg) | invert(%) | opacity(%) | saturate(%) | sepia(%) | url() | initial | inherit; |
|
Flexible Box
|
|
Opbygning af responsive strukturer uden brug af float / positionering. Skal startes med "{display: flex:}".
|
|---|
| |
| Properties | Beskrivelse | Attributes | Links |
|---|
| order | Styring af rækkefølgen for visning af items. | order: number | initial | inherit; |
|
| Flex |
|---|
| flex | Kort 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; |
|
| flex-basis | Sætter specifik størrelse (px) på item i flex-retningen. | flex-basis: number | auto | initial | inherit; |
|
| flex-direction | Retning, hvori items skal vises. | flex-direction: row | row-reverse | column | column-reverse | initial | inherit; |
|
| flex-flow | Kort version for opsætning af flex-direction og flex-wrap i 1 samlet deklaration. | flex-flow: flex-direction + flex-wrap| initial | inherit; |
|
| flex-grow | Styring af dynamisk forholdsmæssig bredde på items. (Default = 1) | flex-grow: number | initial | inherit; |
|
| flex-shrink | Tillader at item krymper ved samlet overflow. | flex-shrink: number | initial | inherit; |
|
| flex-wrap | Hvordan items skal wrappe (fordele sig over 2 eller flere linier) | flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit; |
|
Fonts
|
|
Valg af tegnsæt incl. import af eksterne tegnsæt.
|
|---|
| |
| Properties | Beskrivelse | Attributes | Links |
|---|
| z@font-face | Opbygning af link til ekstern font til brug i stedet for browserens præinstallerede standard fonte. | font-family src font-stretch font-style font-weight unicode-range; |
|
| font | Kort 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; |
|
| font-family | Prioriteret liste med tegnsæt navne og/eller generiske tegnsæt navne i 1 enkelt deklaration. | font-family: family-name eller generic-family | initial | inherit; |
|
| font-feature-settings | Styring af skalerbare fonte. | font-feature-settings: normal | smcp | swsh | smcp swsh | initial | inherit; |
|
| font-kerning | Styring af afstand mellem tegn. | font-kerning: auto | normal | none; |
|
| font-size | Tegnstørrelse på font. | font-size: medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length | % | initial | inherit; |
|
| font-size-adjust | Angivelse af "aspect-værdi" for anvendelse ved brug af reserve-font. | font-size-adjust: number | none | initial | inherit; |
|
| 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; |
|
| font-style | Særlig skrifttype for aktuelt tegnsæt. | font-style: normal | italic | oblique | initial | inherit |
|
| font-synthesis | Styring af om browseren må lave syntetiske 'bold' og 'italic', når disse mangler i aktuelt tegnsæt. | none | weight style | weight | style | initial | inherited; |
|
| zfont-variant | Små bogstaver som versaler. | font-variant: normal | small-caps | initial | inherit; |
|
| font-weight | Bogstavernes stregtykkelse - 400 = normal, 700 = bold. | font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | initial | inherit; |
|
| Font variant |
|---|
| font-variant-caps | Styring 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; |
|
| font-variant-east-asian | Styring 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; |
|
| font-variant-ligatures | Styring 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; |
|
| font-variant-numeric | Styring 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; |
|
| font-variant-position | Styring af den alternative type små bogstaver, der skal anvendes til superscript og subscript. | font-variant-position: normal | sub | super | initial | inherit; |
|
Fragmentation
|
|
Håndtering af tekst etc. ved styret sideskift.
|
|---|
| |
| break |
|---|
| break-after | page, 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; |
|
| break-before | page, 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; |
|
| break-inside | page, column or region break inside the generated box. | break-inside: auto | avoid | avoid-page | avoid-column | avoid-region; |
|
| orphans | Det mindste antal linier fra et afsnit, der ved sideskift skal udskrives før sideskift. | orphans: integer | initial | inherit; |
|
| widows | Det mindste antal linier fra et afsnit, der ved sideskift skal føres over til næste side. | widows: integer | initial | inherit; |
|
| box-decoration-break | Håndtering af kanter etc. ved f.eks. sideskift. | box-decoration-break : slice | clone | initial | inherit | unset; |
|
Generated content
|
|
Visuelt sideindhold.
|
|---|
| |
| quotes | Definition af anførselstegn til citeringer. | quotes: none | string ... string | initial | inherit; |
|
Grid
|
|
Opbygning af gitter indeni en <div class="grid-container">.
|
|---|
| |
| grid | Kort version for opsætning af grid-template-rows, grid-template-columnjs, grid-template-areas, grid-auto-rows, grid-auto-columns og grid-auto-flow | grid: 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; |
|
| grid-area | Kort version for opsætning af grid-row-start, grid-column-start, grid-row-end og grid-column-end | grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname; |
|
| grid-auto-columns | Sæ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; |
|
| grid-auto-flow | Styrer hvordan auto-placerede items indsættes i gitteret | grid-auto-flow: row|column|dense|row dense|column dense; |
|
| grid-auto-rows | Default størrelse på rows i gitter. | grid-auto-columns: auto|max-content|min-content|length; |
|
| grid-column | Kort version for opsætning af grid-column-start og grid-column-end. | grid-column: grid-column-start / grid-column-end; |
|
| grid-column-end | Angivelse af kolonnes bredde eller ende (12te dele) | grid-column-end: auto|span n|column-line; |
|
| grid-column-gap | Afstand mellem 2 kolonner (px). | grid-column-gap: length; |
|
| grid-column-start | Angivelse af på hvilken horisontal kolonneplads, kolonnen skal placeres. | grid-column-start: auto|span n|column-line; |
|
| grid-gap | Kort version for opsætning af grid-row-gap og grid-column-gap. | grid-gap: grid-row-gap grid-column-gap; |
|
| grid-row | Kort version for opsætning af grid-row-start og grid-row-end. | grid-row: grid-row-start / grid-row-end; |
|
| grid-row-end | Antal 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; |
|
| grid-row-gap | Afstand mellem 2 rækker (px). | grid-row-gap: length; |
|
| grid-row-start | Angivelse af rækkelinie, hvorpå cellen skal starte. | grid-row-start: auto|row-line; |
|
| grid-template | Kort 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; |
|
| grid-template-areas | Tildeling af individuelle navne til grid-celler. | grid-template-areas: none|itemnames; |
|
| grid-template-columns | Angivelse af antal kolonner (og deres bredde) i et gitter-layout. | grid-template-columns: none|auto|max-content|min-content|length|initial|inherit; |
|
| grid-template-rows | Angivelse af antal rækker (og deres højde) i et gitter-layout. | grid-template-rows: none|auto|max-content|min-content|length|initial|inherit; |
|
Image Values
|
|
Placering og opløsning af billeder.
Gradienter: Se afsnit 4 her
|
|---|
| |
| Properties | Beskrivelse | Attributes | Links |
|---|
| image-orientation | Vinkel billedet skal drejes. | image-orientation: <angle> |
|
| image-resolution | Angivelse af den opløsning der skal anvendes ved rendering af billedet. | image-resolution: [from-image || <resolution>] && snap; |
|
| object-fit | Styring af hvordan billede / video tilpasses en given højde og bredde. | object-fit: fill | contain | cover | none | scale-down |initial | inherit; |
|
| object-position | Styring af placering af billede / video i box dertil. Midten = 50&37; 50&37;. | object-position: nn% nn% | nnpx nnpx; |
|
Intrinsic & Extrinsic Sizing
|
|
Højder / bredder.
|
|---|
| |
| box-sizing | Styring af håndtering af padding og border i (<div>)-bokse.
| box-sizing: content-box | border-box | initial | inherit: |
|
| height | Højden på en tag. | height: auto | length | % | initial | inherit; |
|
| max-height | Max.højden på et element. | max-height: none | length | % | initial | inherit; |
|
| max-width | Max. bredden på et element. | max-width: none | length | % | initial | inherit; |
|
| min-height | Min. højden på et element. | min-height: length | % | initial | inherit; |
|
| min-width | Min. bredden på et element. | min-width: length | % | initial | inherit; |
|
| width | Bredden på et tag. | width: auto | length | % | initial | inherit |
|
Lists and Counters
|
|
Nummerering af overskrifter og listepunkter.
|
|---|
| |
| Properties | Beskrivelse | Attributes | Links |
|---|
| Overskrifter |
|---|
| counter-increment | Opbygning af nummerering af afsnit baseret på <hx>-overskrifter. | counter-increment: none | id number | initial | inherit; |
|
| counter-reset | Opbygning af regelsæt for nulstilling af tælleværk bag counter-increment. | counter-reset: none | id number | initial | inherit; |
|
| Lister |
|---|
| list-style | Kort 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; |
|
| list-style-image | Url til billede/ikon, der skal vises som 'bullet' foran listepunkter.
None = Der vises ingen bullets eller andet. | list-style-image: none | url | initial | inherit; |
|
| list-style-position | Styring af, hvor i listen 'bullet' skal placeres. | list-style-position: inside | outside | initial | inherit; |
|
| list-style-type | Type 'bullet', der skal vises ved listepunkter. | list-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; |
|
Multi-column
|
|
Tekst i kolonner - som i avis. Skal være i div-tag.
|
|---|
| |
| Properties | Beskrivelse | Attributes | Links |
|---|
| Kolonneopbygning. |
|---|
| columns | Kort version for opsætning af column-width og column-count. | columns: auto | column-width | column-count | initial | inherit; |
|
| column-count | Heltal teksten i div-taggen skal divideres med. For at beregne tekstmængde pr kolonne. | column-count: number | auto | initial | inherit; |
|
| column-fill | Hvordan kolonnerne skal fyldes. | column-fill: balance | auto | initial | inherit; |
|
| column-gap | Antal pixels mellem kolonnerne. | column-gap: length | normal | initial | inherit; |
|
| column-rule | Kort 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; |
|
| column-rule-color | Kolonnestregens farve. | column-rule-color: color | initial | inherit; |
|
| column-rule-style | Kolonnestregens stregform. | column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit; |
|
| column-rule-width | Kolonnestregens bredde. | column-rule-width: medium | thin | thick | length | initial | inherit; |
|
| column-span | Angivelse af hvor mange kolonner et tag (f.eks. en overskrift) skal spænde over. | column-span: none | all | initial | inherit; |
|
| column-width | Kolonne-bredde i pixels. | column-width: auto | length | initial | inherit; |
|
Overflow
|
|
Håndtering af scrollabel overflow i visuelle medier.
|
|---|
| |
| Scrollbar |
|---|
| overflow | Kort version for samlet etablering af overflow-x og overflow-y. | overflow: visible | hidden | scroll | auto | initial | inherit; |
|
| overflow-x | Tillader overflow med horisontal scrollbar. | overflow-x: visible | hidden | scroll | auto | initial | inherit; |
|
| overflow-y | Tilader overflow med vertikal scrollbar. | overflow-y: visible | hidden | scroll | auto | initial | inherit; |
|
| Block / inline |
|---|
| overflow-block | Som overflow-y, men for blok. | overflow-block: <'overflow'> |
|
| overflow-inline | Som overflow-x, men for inline. | overflow-inline: <'overflow'> |
|
| Text |
|---|
| text-overflow | Styring af, hvordan brugeren informeres om overflow, der ikke kan vises i inddatafelt. | text-overflow: clip | ellipsis | string | initial | inherit; |
|
| Block |
|---|
| block-overflow | Tillader indsættelse af indhold i den sidste "line box" før et "region break" for ast indikere kontinuitet. | block-overflow: clip | ellipsis | <string> |
|
| Fragmentering |
|---|
| line-clamp | Kort version for samlet etablering af max-lines, block-overflow og continue. | line-clamp: none | <integer> <block-overflow> ? | initial | inherit; |
|
| max-lines | "Region break" gennemtvinges efter anførte antal linier. | max-lines: none | <integer> | initial | inherit; |
|
| 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; |
|
Paged Media
|
|
Generering og layout for sider med fragmenteret indhold i en "paged" præsentation.
|
|---|
| |
| Properties | Beskrivelse | Attributes | Links |
|---|
| page | Angivelse af specifik type side (kaldet "named page") hvorpå et tag skal vises. | page: auto | <custom-ident> ; |
|
Table
|
|
Styring af tabeller
|
|---|
| |
| Properties | Beskrivelse | Attributes | Links |
|---|
| table-layout | Styring af kolonnebredden. | table-layout: auto | fixed | initial | inherit; |
|
Tekst
|
|
Tilpasning af tekst.
|
|---|
| |
| Properties | Beskrivelse | Attributes | Links |
|---|
| hanging-punctuation | Om 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; |
|
| hyphens | Styring af sætning af bindestreger for blødere orddeling. | hyphens: none | manual | auto | initial | inherit; |
|
| letter-spacing | Afstand mellem bogstaver. | letter-spacing: normal | length | initial | inherit; |
|
| line-break | Styring 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 |
|
| zline-height | Afstand mellem linier / liniehøjde.
Tekst forbliver på midten. | line-spacing: normal | number | length | % | initial | inherit; |
|
| overflow-wrap | Regler for brud på streng, når denne længere end vinduets bredde. | overflow-wrap: normal | break-word | initial | inherit |
|
| tab-size | Antal karakterer knyttet til 'tab'-karakteren ved tryk på 'TAB'-knappen.. | tab-size: number | length | initial | inherit; |
|
| text-align | Sideværts placering af tekst. | text-align: left | right | center | justify | initial | inherit; |
|
| text-align-all | Lang 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; |
|
| text-align-last | Ved 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; |
|
| text-indent | Indrykning af første linie i et element. | text-indent: length | % | initial | inherit; |
|
| text-justify | Mellemrum mellem ord ved text-align = "justify". | text-justify: auto | inter-word | inter-character | none | initial | inherit; |
|
| text-transform | Omformning af tekst (til STORE / små bogstaver). | text-transform: none | capitalize | uppercase | lowercase | initial | inherit; |
|
| white-space | Styring af mellemrum mellem ord. | white-space: normal | nowrap | pre |pre-line | pre-wrap | initial | inherit; |
|
| word-break | Styring af "ny linie" - ikke for sprog baseret på skrifttegn. | word-break: normal | break-all | keep-all | break-word | initial | inherit; |
|
| word-spacing | Størrelsen på mellemrum mellem ord. | word-spacing: normal | lenght | initial | inherit; |
|
| word-wrap | Brud på lange ord udover generelle regelsæt. | word-wrap: normal | break-word | initial | inherit; |
|
Text Decoration
|
|
Tilpasning af tekst.
|
|---|
| |
| Properties | Beskrivelse | Attributes | Links |
|---|
| Decoration+ |
|---|
| text-decoration | Kort 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; |
|
| text-decoration-color | Farve på tekst modifikation. | text-decoration-color: color | initial | inherit; |
|
| text-decoration-line | Modifikation af tekst. F.eks. overstregning. | text-decoration-line: none | underline | overline | line-through | initial | inherit; |
|
| text-decoration-style | Modifikations udseende. | text-decoration: solid | double | dotted | dashed | wavy | initial | inherit; |
|
| text-shadow | Skyggeeffekt til tekst. | text-shadow: h-shadow | v-shadow | blur-radius | color | none | initial | inherit; |
|
| text-underline-position | Placering af underline andetsteds end med 'text-decoration: underline;' | text-underline-position: auto | under | left | right | initial | inherit; |
|
Emphasis
fremhævelse af tekst |
|---|
| text-emphasis | Kort version for text-emphasis-style og text-emphasis-color. | text-emphasis: <'text-emphasis-style'> || <'text-emphasis-color'> |
|
| text-emphasis-color | Angivelse af farve, fremhævelsen skal have. | text-emphasis-color: <color> | initial | inherit; |
|
| text-emphasis-position | Angivelse af hvor fremhævelsen skal placeres. | text-emphasis-position: [ over | under ] && [ right | left ]? | initial | inherit; |
|
| text-emphasis-style | Angivelse af den fremhævelse, der skal vises. | text-emphasis-style: none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | <string> | initial | inherit; |
|
Transform
|
|
Rotation af div-element.
|
|---|
| |
| Properties | Beskrivelse | Attributes | Links |
|---|
| backface-visibility | Visning af bagsiden af et roteret div-element. | backface-visibility: visible | hidden | initial | inherit; |
|
| perspective | Det perspektiv (den højde over fladen) elementet ses fra. | perspective: length | none | initial | inherit; |
|
| perspective-origin | Drejning af en <div>-box så den vises perspektivisk.
Ved 129% forsvinder den helt. | perspective-origin: x-axis y-axis | initial | inherit; |
|
| transform | Mange 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; |
|
| transform-origin | Flytning af et element's omdrejningspunkt bort fra default - 50% horisontalt og vertikalt. | transform-origin: x-axis y-axis z-axis | initial | inherit; |
|
| transform-style | Styring af om overlappende <div>-boxe skal vises som 2d eller 3d. | transform-style: flat | preserve-3d | initial | inherit; |
|
Transition
|
|
Dynamisk ændring af størrelse på <div>-box.
|
|---|
| |
| Properties | Beskrivelse | Attributes | Links |
|---|
| transition | Kort version for opsætning af alle 4 transition properties i 1 samlet deklaration. | transition: property duration timing-function delay | initial | inherit; |
|
| transition-delay | Antal sekunder(s) / millisekunder(ms) før ændringen skal påbegyndes. | transition-delay: time | initial | inherit; |
|
| transition-duration | Antal sekunder(s) / millisekunder(ms) ændringen skal tage. | transition-duration: time | initial | inherit; |
|
| transition-property | Ændring af størrelse på en <div>-box ved mouse-over. Tilbage ved mouse-out. | transition-property: none | all | property | initial | inherit; |
|
| transition-timing-function | Hastighedsforlø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; |
|
Writing Modes
|
|
Skriveretning over siden og teksttegnenes orientering.
|
|---|
| |
| Properties | Beskrivelse | Attributes | Links |
|---|
| direction | Visning af tekst fra venstre mod højre eller omvendt. | direction: ltr | rtl | initial | inherit; |
|
| text-orientation | Ved 'writing-mode: vertical-xx': Teksttegnenes retning. | text-orientation: mixed | upright | sideways | initial | inherited; |
|
| text-combine-upright | Styring af hvordan 'multiple characters' indsættes i pladsbehovet for 'single character'. | text-combine-upright: none | all | initial | inherit; |
|
| unicode-bidi | Blanding af venstre-højre tekst med højre-venstre tekst. | unicode-bidi: normal | embed | bidi-override | isolate | isolate-override | plaintext | initial | inherit; |
|
| writing-mode | Styring af skriveretning hen over siden. | writing-mode: horizontal-tb | vertical-rl | vertical-lr; |
|
Diverse
|
|
Properties, der ikke kan henføres til en gruppe.
|
|---|
| |
| Properties | Beskrivelse | Attributes | Links |
|---|
| isolation | Styring af om om et tag skal etablere en ny "stacking content", f.eks. ved "background-blend-mode". | isolation: auto|isolate|initial|inherit; |
|
| mix-blend-mode | Styring 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; |
|
| pointer-events | Styring af om et tag reagerer på markør hændelser. | pointer-events: auto | none; |
|
| scroll-behavior | Skift til "blød" scrolling. | scroll-behavior: auto|smooth|initial|inherit; |
|
| user-select | Styring af om brugeren kan selektere teksten i tagget ved museklik. | user-select: auto|none|text|all; |
|
CSS Properties.