| font, color |
| font-family |
Typsnittsnamn t.ex. Arial. |
Används för att bestämma typsnitt på vald tagg. Ange även alternativa typsnitt. Avsluta med serif, sans-serif eller monospace. |
Exempel:
p { font-family: Verdana, Arial, sans-serif }
.type { font-family: Courier, monospace }
|
 |
| font-size |
pt / px / em / % |
Anger teckenstorleken.
|
Exempel:
h6 { font-size: 10px }
.stor { font-size: 200% }
|
|
| font-weight |
normal / bold /
|
Anger textens tjocklek. |
Exempel:
h1 { font-weight: extra-bold }
h3 { font-weight: normal }
|
|
| font-style |
normal / italic
|
Anger om texten ska vara kursiv. |
Exempel:
h1 { font-style: italic }
|
|
| color |
Hexadecimal kod / Namngiven färg
|
Anger färg på bl.a text. |
Exempel:
h1 { color: green }
a:hover { color: #FFFFFF }
|
|
| background |
| background-color |
Hexadecimal kod / Namngiven färg / transparent
|
Anger bakgrundsfärgen, på hela sidan eller för en vald tagg. |
Exempel:
body { background-color: #FFFFFF }
td { background-color: blue }
a:hover { background-color: black }
|
|
| background-image |
Absolut url:
url(http://www.ninetnet.com/bild.jpg)
Relativ url: url(bild.gif)
|
Anger bakgrundsbild, för hela sidan eller bara för en vald tagg. |
Exempel:
body { background-image: url(../mapp/bild.jpg) }
table { background-image: url(bild.jpg) }
td { background-image: url(bilder/bild.jpg) }
|
|
| background-repeat |
repeat-x - endast horisontalt
repeat-y - endast i vertikalt
no-repeat - upprepa inte
|
Avgör hur bakgrundsbilden ska upprepas.
|
Exempel:
body { background-image: url(bild.jpg); background-repeat: repeat-x }
td { background-image: url(bild.gif); background-repeat: no-repeat }
|
|
| background-attachment |
scroll / fixed
|
Anger om bakgrunden ska vara fixerad när sidinnehållet scrollas.
|
Exempel:
body { background-image: url(bakgrund.jpg);
background-attachment: fixed }
|
|
| background-position |
% / px / pt / em
top / center/ bottom - left / center / right
|
Anger placering av bakgrundsbild. |
Exempel:
body { background-image: url(bild.gif);
background-repeat: no-repeat;
background-position: top center }
body { background-image: url(bild.gif);
background-repeat: no-repeat;
background-position: 0% 0% }
table { background-image: url(bild.gif);
background-repeat: no-repeat;
background-position: 0px 25px }
|
|
| textegenskaper |
| text-decoration |
none / underline / overline / line-through / blink |
Textdekoration. Används ofta för att ta bort undertrykning från länkar.
|
Exempel:
p { text-decoration: underline }
a { text-decoration: none }
a:hover { text-decoration: underline }
|
|
| text-transform |
capitalize - första bokstaven i ord blir versal
uppercase - visar texten med versaler
lowercase - visar texten med gemener
|
Avgör om texten ska visas med stora eller små bokstäver.
|
Exempel:
h1 { text-transform: uppercase }
|
|
| text-align |
left - västerjusterar texten
right - högerjusterar texten
center - centerar texten
justify - justerar texten åt hö och vä
|
Justerar texten som inom ett element.
|
Exempel:
h1 { text-align: center }
p { text-align: justify }
|
|
| text-indent |
px / % / pt / em |
Anger att första raden i ett stycke skall ha ett indrag.
|
Exempel:
p { text-indent: 10px }
|
|
| word-spacing |
normal / px /
|
Anger avståndet mellan ord. Även negativt mått.
|
Exempel:
p { word-spacing: normal }
p { word-spacing: 30px }
p { word-spacing: -1px }
|
|
| letter-spacing |
normal / px /
|
Anger avståndet mellan bokstäver. Även negativt mått.
|
Exempel:
p { letter-spacing: normal }
p { letter-spacing: 12px }
p { letter-spacing: -1px }
|
|
| line-height |
normal / % / px / pt
|
Anger radavstånd.
|
Exempel:
p { line-height: normal }
.radavst { line-height: 16px }
|
|
| white-space |
normal
pre - alla blanksteg visas
nowrap - texten radbryts endast m <br>
|
Anger hur blanksteg ska visas.
|
Exempel:
p { white-space: normal }
|
|
| list-style |
| list-style-type |
disc / circle / square / none |
Anger typ av punktlista.
|
| list-style-position |
inside / outside |
Anger om listan ska ha hängande indrag.
|
| list-style-image |
Absolut url:
url(http://www.ninetnet.com/bild.jpg)
Relativ url: url(bild.gif)
|
Anger att listans punkter ska bestå av en bild.
|
Exempel:
ul { list-style-type: square;
list-style-position: inside }
ul { list-style-image: url(bilder/bild.gif);
list-style-position: outside}
|
|
| margin, padding, align |
| margin- * |
Används med:
-top, -left, -right, -bottom
Vanligaste värden:
px / % / pt / em |
Lägger till eller tar bort maginaler. För hela sidan eller enskilda element som stycken, bilder, etc. |
Exempel:
body { margin-top: 30px;
margin-right: 40px;
margin-bottom: 30px;
margin-left: 40px }
p { margin-top: 0px;
margin-bottom: 0px }
|
|
| padding- * |
Används med:
-top, -left, -right, -bottom
Vanligaste värden:
px / % / pt / em |
Anger "luft" runt ett visst element.
|
Exempel:
a { padding: 5px }
p { padding-top: 10px;
padding-bottom: 10px;
padding-right: 20px;
padding-left: 20px }
|
|
| vertical-align |
baseline / sub / super / top / text-top / middle / bottom / text-bottom / %
|
Justerar en bild. |
Exempel:
img { vertical-align: bottom }
|
|
| height, width |
| height |
px / % / pt / em |
Anger höjd. |
Exempel:
img { height: 50px }
|
|
| width |
px / % / pt / em |
Anger bredd.
|
Exempel:
img { width: 50px }
|
|
| border |
| border |
Här kan man ange:
tjocklek / färg / stil |
Används för att skapa en kantlinje runt ett element.
|
Exempel:
.kant { border: 2px #999999 solid }
|
|
| border- * |
top / bottom / left / right |
Används för att formatera någon eller några av kantlinjerna med tjocklek, stil och färg.
|
Exempel:
.kant { border-top: 2px;
border-right: 0px;
border-bottom: 2px;
border-left: 0px}
|
|
| border-style |
none / solid / dotted / dashed / double / groove / ridge / inset / outside
|
Anger kantlinjens stil.
|
Exempel:
.kant { border-style: dotted }
|
|
| border-color |
Hexadecimal kod / Namngiven färg |
Anger färg på en kantlinje.
|
Exempel:
.kant { border-color: #000000 }
|
|
| border-width |
thin / medium / thick / px |
Anger tjocklek på kantlinje.
|
Exempel:
.kant { border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin}
|
|
| overflow |
| overflow |
auto / scroll / hidden / visible |
Används för att ange vad som ska hända när ett element "flödar över".
|
Exempel:
body { overflow: hidden }
|
NinetNet 
CSS 