Viten path Viten arrow Verktøy arrow CSS 14 July 2025
         
 
  Her får du hjelp til det meste..
   
Annonse:
Advertisement

CSS Referanse Tabell
Brukerrangering: / 0
DårligBest 

CSS Declarations - and how to use them

Font/Bakgrunn

Font og Bakgrunnsklasser
Klasse Gyldige Verdier Eksempel
font-family [font name or type] font-family:Verdana, Arial;
font-style normal | italic font-style:italic;
font-variant normal | small-caps font-variant:small-caps;
font-weight normal | bold font-weight:bold;
font-size [ xx-large | x-large | large | medium | small | x-small | xx-small ] | [ larger | smaller ] | percentage | length font-size:12px;
font [ font-style | font-variant | font-weight ] ? font-size [ / line-height ] ? font-family font:bold 12px Arial;
Klasse Gyldige Verdier Eksempel
color color color:red
background-color color | transparent background-color:yellow
background-image url | none background-image:url(house.jpg)
background-repeat repeat | repeat-x | repeat-y | no-repeat background-repeat:no-repeat
background-attachment scroll | fixed background-attachment:fixed
background-position [ position | length ] | {1,2} | [ top | center | bottom ] | [ left | center | right ] background-position:top center
background transparent | color || url | repeat | scroll | position background:silver url(house.jpg) repeat-y

Text

Tekstklasser
Klasse Gyldige Verdier Eksempel
letter-spacing normal | length letter-spacing:5px
text-decoration none | underline | overline | line-through text-decoration:underline
vertical-align sub | super | vertical-align:sub
text-transform capitalize | uppercase | lowercase | none text-transform:lowercase
text-align left | right | center | justify text-align:center
text-indent length | percentage text-indent:25px
line-height normal | number | length | percentage line-height:15px

Box

Objektklasser
Klasse Gyldige Verdier Eksempel
margin-top length | percentage | auto margin-top:5px
margin-right length | percentage | auto margin-right:5px
margin-bottom length | percentage | auto margin-bottom:1em
margin-left length | percentage | auto margin-left:5pt
margin length | percentage | auto {1,4} margin: 10px 5px 10px 5px
padding-top length | percentage padding-top:10%
padding-right length | percentage padding-right:15px
padding-bottom length | percentage padding-bottom:1.2em
padding-left length | percentage padding-left:10pt; }
padding length | percentage {1,4} padding: 10px 10px 10px 15px
border-top-width thin | medium | thick | length border-top-width:thin
border-right-width thin | medium | thick | length border-right-width:medium
border-bottom-width thin | medium | thick | length border-bottom-width:thick
border-left-width thin | medium | thick | length border-left-width:15px
border-width thin | medium | thick | length {1,4} border-width: 3px 5px 3px 5px
border-top-color color border-top-color:navajowhite
border-right-color color border-right-color:whitesmoke
border-bottom-color color border-bottom-color:black
border-left-color color border-left-color:#C0C0C0
border-color color {1,4} border-color: green red white blue; }
border-top-style none | solid | double | groove | ridge | inset | outset border-top-style:solid
border-right-style none | solid | double | groove | ridge | inset | outset border-right-style:double
border-bottom-style none | solid | double | groove | ridge | inset | outset border-bottom-style:groove
border-left-style none | solid | double | groove | ridge | inset | outset border-left-style:none
border-style none | solid | double | groove | ridge | inset | outset border-style:ridge; }
border-top border-width | border-style | border-color border-top: medium outset red
border-right border-width | border-style | border-color border-right: thick inset maroon
border-bottom border-width | border-style | border-color border-bottom: 10px ridge gray
border-left border-width | border-style | border-color border-left: 1px groove red
border border-width | border-style | border-color border: thin solid blue
float none | left | right float:none
clear none | left | right | both clear:left

Klassifikasjon

Klassifikasjonsklasser
Klasse Gyldige Verdier Eksempel
display none | block | inline | list-item display:none
list-style-type disk | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none list-style-type:upper-alpha
list-style-image url | none list-style-image:url(icFile.gif)
list-style-position inside | outside list-style-position:inside
list-style keyword | position | url list-style: square outside url(icFolder.gif)

Posisjonering

Posisjoneringsklasser
Klasse Gyldige Verdier Eksempel
clip shape | auto clip:rect(0px 200px 200px 0px) all elements
height length | auto height:200px DIV, SPAN and replaced elements
left length | percentage | auto left:0px absolutely and relatively positioned elements
overflow visible | hidden | scroll | auto overflow:scroll all elements
position absolute| relative | static position:absolute all elements
top length | percentage | auto top:0px absolutely and relatively positioned elements
visibility visible | hidden | inherit visibility:visible all elements
width length | percentage | auto width:80% DIV, SPAN and replaced elements
z-index auto | integer z-index:-1 absolutely and relatively positioned elements

Utskrift

Utskriftsklasser
Klasse Gyldige Verdier Eksempel
page-break-before auto | always | left | right page-break-before:always
page-break-after auto | always | left | right page-break-before:auto

Pseudoklasser

Pseudoklasser
Klasse Gyldige Verdier Eksempel
cursor auto | crosshair | default | hand | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help { cursor:hand; }
active, hover, link, visited n/a a:hover { color:red; }
first-letter, first-line any font manipulating declaration p:first-letter{
float:left;color:blue
}
.

Eksempler

Eksempel på bruk i et HTML-dokument: 
<b>&#60;font size=&#34;3&#34; style=&#34;color:blue; text-decoration:none;&#34;&#62;<font color="#0000ff">Litt tekst her</font>&#60;/font&#62;</b>


Eksempel på bruk i en CSS-fil:
.classname {
color:green;
text-decoration:underline;
}
 
[ Tilbake ]