Notice: Use of undefined constant GESHI_NUMBER_INT_BASIC - assumed 'GESHI_NUMBER_INT_BASIC' in
D:\xampp\htdocs\viten\mambots\content\geshi\geshi\php.php on line
86
Notice: Use of undefined constant GESHI_NUMBER_OCT_PREFIX - assumed 'GESHI_NUMBER_OCT_PREFIX' in
D:\xampp\htdocs\viten\mambots\content\geshi\geshi\php.php on line
86
Notice: Use of undefined constant GESHI_NUMBER_HEX_PREFIX - assumed 'GESHI_NUMBER_HEX_PREFIX' in
D:\xampp\htdocs\viten\mambots\content\geshi\geshi\php.php on line
86
Notice: Use of undefined constant GESHI_NUMBER_FLT_SCI_ZERO - assumed 'GESHI_NUMBER_FLT_SCI_ZERO' in
D:\xampp\htdocs\viten\mambots\content\geshi\geshi\php.php on line
87
Notice: Use of undefined constant GESHI_NUMBER_OCT_PREFIX - assumed 'GESHI_NUMBER_OCT_PREFIX' in
D:\xampp\htdocs\viten\mambots\content\geshi\geshi\php.php on line
1027
Notice: Use of undefined constant GESHI_NUMBER_HEX_PREFIX - assumed 'GESHI_NUMBER_HEX_PREFIX' in
D:\xampp\htdocs\viten\mambots\content\geshi\geshi\php.php on line
1028
Notice: Use of undefined constant GESHI_NUMBER_FLT_SCI_ZERO - assumed 'GESHI_NUMBER_FLT_SCI_ZERO' in
D:\xampp\htdocs\viten\mambots\content\geshi\geshi\php.php on line
1029
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><font size="3" style="color:blue; text-decoration:none;"><font color="#0000ff">Litt tekst her</font></font></b>
Eksempel på bruk i en CSS-fil: .classname { color:green; text-decoration:underline; }
|
|
|