Deel 11

Links:

CSS specificaties :

De verschillende elementen binnen de CSS specificaties en hun eigenschappen.

Randen & Kaders
waarde
voorbeeld
margin-top ·em (de hoogte van het lettertype)
·ex (de hoogte van de "x")
·px (volgens het schermresolutie)
(alle waarden, ook negatieve)
·in (inches; 1in=2.54cm)
·cm (centimeters; 1cm=10mm)
·mm (millimeters)
·pt (points; 1pt=1/72in)
·pc (picas; 1pc=12pt)
+ %
margin-top: 200pt
margin-top: 20%
margin-right idem als hierboven margin-right: 25%
margin-bottom idem als margin-top margin-bottom: 0,5cm
margin-left: idem als margin-top margin-left: 35mm
margin idem als margin-top margin: 2cm (alle randen op 2 cm)
margin: 2cm 3cm (top 2cm en rechts 3cm) de ontbrekende randen (dus bottom en left) krijgen de waarde mee van de tegenovergestelde kant. (dus bottom krijgt 2cm en left krijgt 3 cm)
margin: 2cm 4cm 3cm 1cm (top=2cm, rechts=4cm, bottom=3cm en left=1cm)
padding-top idem als margin-top padding-top: 6em
padding-right idem als margin-top padding-right: 6em
padding-bottom idem als margin-top padding-bottom: 6em
padding-left idem als margin-top padding-left: 6em
padding idem als margin-top padding: 15px
padding: 15px 10px 8px
dit voorbeeld zet de padding tussen de inhoud en de bovenste rand op 15pixels, tussen de rechterrand op 10 pixels, tussen de bottom op 8 pixels en de linkerrand (die niet is weergegeven) krijgt ook 10pixels gezien bij afwezigheid van een specificatie, de waarde van de tegenoverliggende rand wordt genomen.
border-top-widththin | medium | thick en dezelfde specificaties als in margin-top border-top-width: thick
border-right-width thin | medium | thick en dezelfde specificaties als in margin-top border-right-width: thin
border-bottom-width thin | medium | thick en dezelfde specificaties als in margin-top border-bottom-width: 5px
border-left-width thin | medium | thick en dezelfde specificaties als in margin-top border-left-width: medium
border-width idem als hierboven border-width: 5mm 3mm 2mm 6mm
indien we niet alle vier de randen opgeven, wordt de waarde van de tegenoverliggende rand genomen
border-color aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow +
de rgb colors
border-color: blue
border-color: #ff55cc
border-style dotted | dashed | solid | double |
groove | ridge | inset | outset
border-style: double
border-top hier kunnen we dezelfde waarde ingeven als bij border-width of border-color of border-style of alle drie tesamen border-top: 5mm
border-top: 5mm blue double
border-right hier kunnen we dezelfde waarde ingeven als bij border-width of border-color of border-style of alle drie tesamen border-right: 3cm
border-right: 3cm blue double
border-bottom hier kunnen we dezelfde waarde ingeven als bij border-width of border-color of border-style of alle drie tesamen border-bottom: 15em
border-bottom: 15em blue double
border-left hier kunnen we dezelfde waarde ingeven als bij border-width of border-color of border-style of alle drie samen border-bottom: 6px
border-bottom: 6px blue double
border hier kunnen we dezelfde waarde ingeven als bij border-width of border-color of border-style of alle drie samen border-bottom: 6px blue double
width ·em (de hoogte van het lettertype)
·ex (de hoogte van de "x")
·px (volgens het schermresolutie)
(alle waarden, ook negatieve)
·in (inches; 1in=2.54cm)
·cm (centimeters; 1cm=10mm)
·mm (millimeters)
·pt (points; 1pt=1/72in)
·pc (picas; 1pc=12pt)
+ %
width: 8cm
width: 25px
height em (de hoogte van het lettertype)
·ex (de hoogte van de "x")
·px (volgens het schermresolutie)
(alle waarden, ook negatieve)
·in (inches; 1in=2.54cm)
·cm (centimeters; 1cm=10mm)
·mm (millimeters)
·pt (points; 1pt=1/72in)
·pc (picas; 1pc=12pt)
height: 40px
float left & right float: right
clear left | right | both clear: both


Lijsten
waarde
voorbeeld
display ·block (a line break before and after the element)
·inline (no line break before and after the element)
·list-item (same as block except a list-item marker is added)
·none (no display)
display: inline
white-space ·normal (collapses multiple spaces into one)
·pre (does not collapse multiple spaces)
·nowrap (does not allow line wrapping without a <BR> tag)
white-space: pre
list-style-type disc | circle | square | decimal |
lower-roman | upper-roman | lower-alpha |
upper-alpha | none
list-style-type: square
list-style-type: none
list-style-type: upper-alpha
list-style-image url list-style-image: url(x.gif)
list-style-position inside | outside list-style-position: inside
list-style zelfde als in list-style-type en list-style-position list-style: square inside
list-style: none
list-style: url(….gif) circle
list-style: upper-alpha
list-style: lower-roman inside


Eenheden, iets meer uitleg
Lengte eenheden ·em (ems, the height of the element's font)
·ex (x-height, the height of the letter "x")
·px (pixels, relative to the canvas resolution)
·in (inches; 1in=2.54cm)
·cm (centimeters; 1cm=10mm)
·mm (millimeters)
·pt (points; 1pt=1/72in)
·pc (picas; 1pc=12pt)
Percenten % vb 100% of 95% enz...
Kleuren eenheden Windows VGA palette: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
·#rrggbb (e.g., #00cc00)
·#rgb (e.g., #0c0)
·rgb(x,x,x) where x is an integer between 0 and 255 inclusive (e.g., rgb(0,204,0))
·rgb(y%,y%,y%) where y is a number between 0.0 and 100.0 inclusive (e.g., rgb(0%,80%,0%))
URL's BODY { background: url(stripe.gif) }
BODY { background: url(http://www.htmlhelp.com/stripe.gif) }