Die CSS-Beispiele entsprechen dem XHTML 1.0 - und dem CSS 2 - Standard (ohne Garantie).
Cascading Style Sheets
Die officzielle W3C Seite: http://www.w3.org/Style/CSS/[mehr]
CSS Browserkompatibilität
Browserkompatibilität - Was geht und was geht nicht. http://www.css4you.de/browsercomp.html/browserfilter/safari_3-0+;firefox_3-0+;opera_9-5+;ie_7;ie_6;[mehr]
Box mit abgerundete Ecken |
|
CSS |
HTML |
CSS.box h1, .box h1 { margin:0; font-size:1.2em; padding:0 10px 5px 10px; border-bottom:1px solid #444; } .box p, .box p { margin:0; font-size:10px; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; } .box { background: transparent; width:240px; float:left; margin-top: 0; margin-right: 3px; margin-bottom: 0; margin-left: 3px; } .top, .bottom { display:block; background:transparent; font-size:1px; } .b1, .b2, .b3, .b4 { display:block; overflow:hidden; } .b1, .b2, .b3 { height:1px; } .b2, .b3, .b4 { background:#fff; border-left:1px solid #444; border-right:1px solid #444; } .b1 { margin:0 5px; background:#444; } .b2 { margin:0 3px; border-width:0 2px; } .b3 { margin:0 2px; } .b4 { height:2px; margin:0 1px; } .boxcontent { display:block; border:0 solid #444; border-width:0 1px; height:200px !important; overflow: auto; } * html .boxcontent { height:1px; } .farbe { color:#fff; background-color: #9CF; } |
|
Box mit Schatten |
|
CSS |
HTML |
body {font-family: serif; background-color: #fff; color: #000; padding: 0; margin: 0;}
P {margin: 0.7em 1em;} DIV.shadow, DIV.shadow2, DIV.shadow3, DIV.shadow4, DIV.shadow5 {padding: 1px; border-radius: 10px; -moz-border-radius: 10px;} DIV.shadow {background-color: #8e8e8e; border: 1px solid #959595; margin: 0px;} DIV.shadow2 {background-color: #aaa; border: 1px solid #bebebe; margin: 0;} DIV.shadow3 {background-color: #d1d1d1; border: 1px solid #e1e1e1; margin: 0;} DIV.shadow4 {background-color: #ededed; border: 1px solid #f6f6f6; margin: 0;} DIV.shadow5 {float: left; background-color: #fcfcfc; border: 1px solid #fff; margin: 0.7em 1em;} |
|
