|
Tabellen, div's, opsommingen,... zijn elementen die gegevens bevatten die op een of andere manier samenhoren. Deze gegevens worden gestopt in een "box".
Marges
Kenmerken: margin-top / margin-right /
margin-bottom / margin-left
Waarde: Waarden in px, ex, percentage, ...
Voorbeeld:
ul { margin-top: 0.5in; }
Wanneer je rond alle kanten van een element een marge wilt weergeven, moet je
de 4 kenmerken niet allemaal apart gaan opsommen. Het volstaat dan om het
verkorte kenmerk margin op te nemen.
span { margin: 10px; }
Padding
Kenmerk: padding-top / padding-right /
padding-bottom / padding-left
Waarde: Waarden in px, ex, percentage, ...
Voorbeeld:
p { padding-left: 100px; }
Randen
Kenmerk: border-style
Waarde: none, dotted, dashed, solid,
double, groove, ridge, inset,
outset
Voorbeeld:
img { border-style: solid; }
Kenmerk: border-color
Waarde: Engelse kleurnaam of hexadecimale code
Voorbeeld:
table { border-color: green; }
Kenmerken: border-top / border-right /
border-bottom / border-left
Waarde: dikte style color
Voorbeeld:
p { border-top: 6px solid black; border-bottom: 1px solid blue; }
Wanneer je rond een element een kader wilt weergeven, moet je de 4 kenmerken
niet allemaal apart gaan opsommen. Het volstaat dan om het verkorte kenmerk
border op te nemen.
span { border: 1px solid black; }
Bekijk het voorbeeld.
Zweven
Kenmerk: float
Waarde: none, left, right
Voorbeeld:
div { float: right; }
Lijsten
Kenmerken: list-style-image
Waarde: url naar de afbeelding die gebruikt moet worden als opsommingsteken
Voorbeeld:
ul { list-style-image: url(blauwblok.gif); }
Kenmerken: list-style-position
Waarde: inside, outside, inherit
Voorbeeld:
ul { list-style-position: inside; }
Kenmerken: list-style-type
Waarde: disc, circle, square,
decimal, lower-roman, upper-roman,
lower-alpha, upper-alpha, none
Voorbeeld:
ul { list-style-type: disc; }
Bekijk het voorbeeld.
Ga naar het volgende deel van de CSS basiscursus : Gebruikersinterface
|
Ontwerp je site