Mouse over the words to change the cursor.
autocrosshair
default
e-resize
help
move
n-resize
ne-resize
nw-resize
pointer
progress
s-resize
se-resize
sw-resize
text
w-resize
wait
Property Description Values CSS bottom Sets the bottom margin edge for a positioned box auto length % inherit 2 clip Clips an absolutely positioned element shape auto inherit 2 cursor Specifies the type of cursor to be displayed url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help 2 left Sets the left margin edge for a positioned box auto length % inherit 2 overflow Specifies what happens if content overflows an element's box auto hidden scroll visible inherit 2 position Specifies the type of positioning for an element absolute fixed relative static inherit 2 right Sets the right margin edge for a positioned box auto length % inherit 2 top Sets the top margin edge for a positioned box auto length % inherit 2 z-index Sets the stack order of an element number auto inherit 2 * * * * * * With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it. Float is very often used for images, but it is also useful when working with layouts. float:right; Onderstaande code maakt alle plaatjes even groot en zet ze voor zover er ruimte is op het scherm naast elkaar. .thumbnail { float:left; width:110px; height:90px; margin:5px; } .text_line { clear:both; margin-bottom:2px; } * clear Specifies which sides of an element where other floating elements are not allowed left, right, both, none or inherit 1 float Specifies whether or not a box should float left, right, none, inherit Voorbeeld hoe je een blok in het midden van de pagina zet, dat ook werkt met Explorer 5. Prutsers.
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
Note: In IE5 there is a margin handling bug for block elements. Block elements are sometimes treated as inline content. This is particularly problematic when it comes to centering. For centering to work in IE5, use the text-align property, like in this example.
Voorbeeld rechts: .right { position:absolute; right:0px; width:400px; background-color:#b0e0e6; } When aligning elements like this, it is always a good idea to predefine margin and padding for the element. This is to avoid visual differences in different browsers. There is a problem with IE8 and earlier, when using the position property. If a container element (in our caseelements p > i:first-child Match all elements in all first child
elements p:first-child i The :lang pseudo-class allows you to define special rules for different languages. In the example below, the :lang class defines the quotation marks for q elements with lang="no": q:lang(no) { quotes: "~" "~"; } Voorbeeld van :focus in een formulier.
Note: IE8 supports the :focus pseudo-class only if a !DOCTYPE is specified.
Pseudoclass: :link a:link Selects all unvisited links :visited a:visited Selects all visited links :active a:active Selects the active link :hover a:hover Selects links on mouse over :focus input:focus Selects the input element which has focus :first-letter p:first-letter Selects the first letter of everyelement :first-line p:first-line Selects the first line of every
element :first-child p:first-child Selects every
elements that is the first child of its parent :before p:before Insert content before every
element :after p:after Insert content after every
element :lang(language) p:lang(it) Selects every
element with a lang attribute value starting with "it" h1:before {content:url(smiley.gif);} Full vertical menu example:
* * * * Weer leuk zie ook voorbeelden. opacity:0.6; filter:alpha(opacity=60); /* For IE8 and earlier / An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth.
Verschillende media
@media screen,print
{
p.test {font-weight:bold;}
}
all Used for all media type devices
aural Used for speech and sound synthesizers
braille Used for braille tactile feedback devices
embossed Used for paged braille printers
handheld Used for small or handheld devices
print Used for printers
projection Used for projected presentations, like slides
screen Used for computer screens
tty Used for media using a fixed-pitch character grid, like teletypes and terminals
tv Used for television-type devices
/* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ /
#pageHeader h1 {
background: transparent url(h1.gif) no-repeat top left;
margin-top: 10px;
width: 219px;
height: 87px;
float: left;
}
#pageHeader h1 span {
display:none
}
*
*/