På den här sidan hittar du de vanligaste CSS-egenskaperna. Även om listan inte är helt komplett är detta mer än vad som använts för att bygga Webbdesigna.se. Listan bör vara tillräcklig för dig som är nybörjare.
I exemplen nedan utgår vi ifrån att deklarationen skrivs som extern CSS.
Snabblänkar: Font och text | Marginal | Padding | Dimension | Background | Border | List | Klassifikation | Positionering
Egenskaper för font och text
Font-family
Skapar en prioritetsordning av vilken font som ska användas på ett element. Om den fonten inte finns i besökarens dator så provas nästa tills en lämplig font har hittats.
Värden:
Arial, Helvetica, sans-serif
"Times New Roman", Times, serif
"Courier New", Courier, monospace
Georgia, "Times New Roman", Times, serif
Verdana, Arial, Helvetica, sans-serif
Geneva, Arial, Helvetica, sans-serif
Exempel:
body {font-family: Verdana, Arial, Helvetica, sans-serif;}
Font-size
Anger teckenstorleken
Värden (de enda viktiga):
em
px
Exempel:
p {font-size: 12px;}
Font-style
Anger om du vill att texten ska ha en speciell stil.
Värden:
normal
italic
oblique
Exempel:
.special {font-style: italic;}
".special" är en class - följ länken för att repetera!
Font-weight
Anger vikten/tjockleken på ett teckensnitt.
Värden:
Normal
Bold
Bolder
Lighter
100 - 900 (Stöds ej i någon webbläsarenär detta skrivs)
Exempel:
.fatso {font-weight: bold;}
Egenskaper för marginaler
Margin
Förkortning av alla egenskaper av margin i ordningen margin-top, margin-right, margin-bottom, margin-left.
Värden:
margin-top (toppmarginal)
margin-right (högermarginal)
margin-bottom (bottenmarginal)
margin-left (vänstermarginal)
Exempel:
p {margin: 10px 20px 15px 10px}
Margin-top, margin-right, margin-bottom, margin-left
Anger marginalen för vald sida på ett element.
Värde:
Auto
Längd (px)
%
Exempel:
p {margin-left: 20px; margin-bottom: 30px;}
div#wrapper {margin-left: auto; margin-right: auto; width: 750px;
Egenskaper för padding
Padding-top
Padding-right
Padding-bottom
Padding-left
Beskrivning: Anger vilken kant på elementet som du vill formatera med padding.
Värden:
px
Exempel:
p {padding-left; 5px; padding-bottom: 10px;}
Padding
En kortform av varianten som visades tidigare för att skapa padding för alla sidor i ett enda uttryck. Värdena sätts då i ordningen topp, höger, botten vänster.
Värden:
padding
p {padding: 2px 5px 2px 5px;}
Egenskaper för dimensioner
Height
Anger höjden på ett element
Värden:
auto
längd (px, em)
Exempel:
div#bannerholder {height: 62px;}
Line-height
Anger radavståndet
Värden:
normal
längd (px, em)
Exempel:
p {line-height: 1.2em;}
div#huvudtext {line-height: 12px;}
Width
Anger bredden på ett element.
Värden:
auto
längd (px, em)
Exempel:
div#artikelText {width: 550px;}
div#sidoMeny {width: 200px;}
Egenskaper för background
Background-color
Anger bakgrundsfärgen för ett element
Värden:
Färg i hexadecimal kod
Färgnamn
Exempel:
p {background-color: #CCCCCC;}
div#red {background-color: red;}
Background-image
Väljer en bild som bakgrund.
Värden:
URL
none
Bildformat:
.jpg
.gif
.png
Exempel:
div#header {background-image: url(../images/background.gif;}
Background-repeat
Anges hur och om du vill att bakgrundsbilden ska upprepas. Upprepning används ofta för att skapa mönster som bygger på en liten och lättladdad bild och för att skapa snygg deisng utan att behöva ladda stora bilder.
Värden:
repeat
repeat-x
repeat-y
no-repeat
Exempel:
div#container {background-image: url(../images/background.gif; background-repeat: repeat-y;}
Egenskaper för border
Border
En kortform för att ange alla egenskaper för fyra kantlinjer i en enda deklaration i ordningen border-style, border-width och border-color.
Värden:
border-width ( bredd på kantlinje i pixlar)
border-style (typ av kantlinje)
border-color (färg på kantlinje med hexadecimal kod eller färgnamn)
Exempel:
p {border: 2px solid red;}
p {border: 2px solid #CCCCCC;}
Style, width och color
Du kan välja att formatera kantlinjer i ett enda uttryck. För att göra det så skriver du "border-top", "border-right", "border-bottom" eller "border-left" följt av värden för style, width och color.
Exempel
p {border-left: solid 2px red}
Style
Anger vilken typ av kantlinje som du vill ha på elementet.
Värden (viktigaste):
none
dotted (prickad linje - fungerar ej i Internet Explorer)
solid (heldragen linje)
Width
Anger bredden på kantlinjen.
Värden:
längd (px, em)
Color
Färg på kantlinjen
Värden:
Läs mer:
Hexadecimal färgkod
Färgnamn
Exempel:
p {border-top: solid 2px gray;}
Detta är resultatet
Egenskaper för listor
List-style-position
Anger om du vill ha tecknet för listan placerat innanför eller utanför "listboxen".
Värden:
inside
outside
Exempel:
ul {list-style-position: inside;}
Skapar en lista som ser ut så här...(hjälplinje för illustration):
- Listelement 1
- Listelement 2
- Listelement 3
ul {list-style-position: outside;}
...medan denna kod skapar en lista som ser ut så här:
- Listelement 1
- Listelement 2
- Listelement 3
List-style-type
Anger vilket typ av listtecken som ska stå framför listan.
Värden:
none
disc
circle
square
m.fl.
(Listor har även ett "default" listtecken som används om du inte väljer någon särskild formatering.
Exempel:
ul {list-style-type: circle;}
Egenskaper för klassifikation
Clear
Anger ett område där det inte får finnas några flytande element.
Värden:
left
right
both
none
Exempel:
p {clear:left;}
Display
Anger om elementet ska visas som ett inline- eller blockelement. Ett exempel med display togs upp i ett tidigare kapitel i CSS-guiden.
Värden:
none
block
inline
Float
Används bland annat för att låta text flyta runt bilder istället för att lägga sig under eller längst ner till höger efter bilden.
Värden:
left
right
none
Exempel:
img {float:left}
Position
Anger om du vill placera ett element i en statisk, absolut eller fixerad position.
Värden:
(static)
relative(position i relation till det föregående elementet i px eller em)
absolute (position i förhållande till body-taggen)
fixed (position i förhållande till webbläsarfönstret)
Egenskaper för positionering
Bottom
Anger hur långt ovanför nedre kanten som ett element ska befinna sig från föräldraelementet (parent).
Värden:
auto
%
längd (px, em)
Left ( Samma som ovan men vänster kant)
Right ( Samma som ovan men höger kant)
Top ( Samma som ovan men övre kant)
Position
Välj om du vill att ett element ska ha statisk, aboslut eller relativ position.
Värden:
(static)
relative
absolute
fixed
Att använda hemsideprogram som exempelvis Dreamweaver underlättar användandet av egenskaper eftersom programmet ger förslag på de valmöjligheter som finns.
<<< Deklarationer.php || Egenskaper >>>
