CSS Cascading Style Sheets
<div class="thumbnail"> <img src="bild1 100.jpg" alt="bild 1" /> <p>första bilden</p> <div class="thumbnail"> <img src="bild2 100.jpg" alt="bild 2" /> <p>andra bilden</p> <div class="thumbnail"> <img src="bild3 100.jpg" alt="bild 3" /> <p>tredje bilden</p> <div class="thumbnail"> <img src="bild4 100.jpg" alt="bild 4" /> <p>fjärdebilden</p> <div class="thumbnail"> <img src="bild5 100.jpg" alt="bild 5" /> <p>femte bilden</p> @charset "utf 8"; div.thumbnail { width: 130px; float:left; margin: 0 10px 10px 0; background: url(bild_bak.jpg) norepeat; }
<div class="thumbnail"> <img src="bild1 100.jpg" alt="bild 1" /> <p>första bilden</p> <div class="thumbnail"> <img src="bild2 100.jpg" alt="bild 2" /> <p>andra bilden</p> <div class="thumbnail clear"> <img src="bild3 100.jpg" alt="bild 3" /> <p>tredje bilden</p> <div class="thumbnail"> <img src="bild4 100.jpg" alt="bild 4" /> <p>fjärdebilden</p> <div class="thumbnail clear"> <img src="bild5 100.jpg" alt="bild 5" /> <p>femte bilden</p> div.thumbnail {width: 130px; float:left; margin: 0 10px 10px 0; background: url(bild_bak.jpg) no repeat;} div.thumbnail img {margin:10px 0 0 10px; border:1px solid #777;} div.thumbnail p { margin: 0; padding:0 20px 20px 10px; background: url(bild_bak.jpg) no repeat 0 100%; }.clear { clear:left;}
div.thumbnail {float:left; width: 250px; margin: 0 10px 10px 0; padding bottom:10px; border:1px solid #777;} div.thumbnail img {float: left; border:1px solid #777; margin:10px 10px 0 10px;} div.thumbnail p { margin: 0; padding:10px; } <div class="thumbnail"> <img src="bild1 100.jpg" alt="bild 1" /> <p>första bilden</p> <div class="thumbnail"> <img src="bild2 100.jpg" alt="bild 2" /> <p>andra bilden</p> <div class="thumbnail"> <img src="bild3 100.jpg" alt="bild 3" /> <p>tredje bilden</p> <div class="thumbnail"> <img src="bild4 100.jpg" alt="bild 4" /> <p>fjärdebilden</p> <div class="thumbnail"> <img src="bild5 100.jpg" alt="bild 5" /> <p>femte bilden</p>
Tvåspaltig sidlayout inte ännu
<body> <div id="nav"> <ul> <li><a href="#">länk 1 </a></li> <li><a href="#">länk 2 </a></li> <li><a href="#">länk 3 </a></li> </ul> <div id="content"> <h1>tvåspaltig design</h1> <p>lorem ipsum dolor sit amet, </p> </body>
body{ margin: 0px; padding: 0px; } div#nav{ position:absolute; width: 150px; border top width: 0px; border right width: 2px; border bottom width: 0px; border left width: 0px; border top style: solid; border right style: solid; border bottom style: solid; border left style: solid; border right color: #CC0000; } div#content{margin left:150px;}
body{ margin: 0px; padding: 0px; font family: Verdana, Arial, Helvetica, sans serif; font size: 1em;} div#nav{ position:absolute; width: 150px; left: 0px; top: 0px; margin top: 22px; margin left: 15px; padding top:.5em; border top width: 2px; border bottom width: 1px; border top style: solid; border bottom style: solid; border top color: #069; border bottom color: #069;}
div#nav ul{ margin top: 0px; margin bottom:.8em; } div#nav li{ font size:.75em; font weight: bold; } div#content{ margin left:165px; margin top: 20px; padding right: 1em; padding bottom: 0px; padding left: 1em; }
Trespaltig med float och div
<body> <div id="header"><h1>detta är rubriken</h1> <div id="content"> <div id="spalt1"><p>claritas est </p> <div id="spalt2"><p>claritas est etiam </p> <div id="spalt3"><p>nam liber tempor cum </p> <div class="bryt"> <div id="foot">sidfot med exempelvis författarnamn </body>
body{ margin: 0px; padding: 0px; font family: Verdana, Arial, Helvetica, sans serif; font size: 1em;} #content{width:450px;border:solid;} div.bryt{clear:both} #header{ color: #CC0000; width:450px;} #spalt1{ color: #CC9900; width:150px; width:150px; float:left;}
ul#navigation {margin left: 0; padding left: 0; list style type:none;} ul#navigation a {display:block; text decoration:none; background:#036; color:#fff; padding:.2em.5em; border bottom:1px solid #fff; width: 7em;} ul#navigation a:hover {background:#69c; color:#000;}
<ul id="navigation"> <li><a href="#">hem</a></li> <li><a href="#">om</a></li> <li><a href="#">tjänster</a></li> <li><a href="#">personal</a></li> <li><a href="#">portfölj</a></li> <li><a href="#">kontakt</a></li> <li><a href="#">webbkartan</a></li> </ul> ul#navigation {margin left: 0; padding left: 0; list style type:none;} ul#navigation a {display:block; text decoration:none; background:#036; color:#fff; padding:.2em.5em; border bottom:1px solid #fff; width: 7em;}
body{ font family: Verdana, Arial, Helvetica, sans serif; font size: 1em;} * {margin:0;padding:0;} div#vertmenu{ width: 100%; font size:.8em; background color: #CCF; margin top: 20px; border top width: 1px; border bottom width: 1px; border top style: solid; border bottom style: solid; border top color: #069; border bottom color: #069;} div#vertmenu ul{ margin left: 30px;} div#vertmenu li{ background color: #FFA; float: left;}
<ul id="navigation"> <li><a href="#">hem</a></li> <li><a href="#">om</a></li> <li><a href="#">tjänster</a></li> <li><a href="#">personal</a></li> <li><a href="#">portfölj</a></li> <li><a href="#">kontakt</a></li> <li><a href="#">webbkartan</a></li> </ul>
ul#navigation {margin left: 0; padding left: 0; list style type:none; background: #036; float:left; width:100%;} ul#navigation li {display:inline;} ul#navigation a {display:block; float:left; padding:.2em 1em; color:#fff; text decoration:none; background:#036; border right:1px solid #fff;} ul#navigation a:hover {background:#69c; color:#000;}
<div id="container"> <h1>fyrfolket</h1> <div id="nav"> <ul> <li><a href="#">direkt </a></li> <li><a href="#">hem</a></li> <li><a href="#">om</a></li> <li><a href="#">tjänster</a></li> <li><a href="#">medarbetare</a></li> <li><a href="#">portfölj</a></li> <li><a href="#">kontakta oss</a></li> </ul> <div id="content"> <h2>om Stora Fjäderäggs fyrplats</h2> <p>lorem ipsum dolor sit amet, in torquent nunc pretium pharetra...</p> <p>dui nunc dui ultrices nulla....</p> <div id="footer"> Copyright webbplatsen 2006
body {text align:center; background: #B0BFC2; color:#444} #container {text align:left; margin: 0 auto; width: 700px; background:#fff url(header base.jpg) repeat y;} h1 {background:#d36832; color:#fff; margin:0; padding:20px; border bottom:5px solid #387a9b;} #nav {float:left; width:130px; display:inline; margin left:20px; padding:0;} #nav ul {margin:0; padding:25px 0; list style type:none; text align:right;} #nav li {background:url(header bullet.jpg) no repeat 95%.4em; padding:0 20px 5px 0;} #content {float:left; width:475px; margin left:45px; padding:15px 0;} #footer {clear:both; background:#387a9b; color:#fff; padding:5px 10px; text align: right; font size: 80%} h2 {margin top:0; color:b23b00; font weight:normal;} a:link {color:#175b7d; text decoration:none;} a:visited {color:#600; text decoration:none;} a:hover, a:active {color:#fff; background:#175b7d;}
CSS3 Några exempel på nyheter i CSS3
Basdokument som används i flertalet exempel <!DOCTYPE HTML> <html> <link href="ex_a_base.css" rel="stylesheet" type="text/css"> <body> <div id="left"> <H1>Pingvinsång</H1> <p> Fyra små pingviner, klädda i svart och vitt<br> Leker i Arctic snön så ljus<br> Det snöade och snöade hela dagen<br> Och en liten pingvin vaggade bort.<br> Tre små pingviner klädda i svart och vitt,<br> leker i Arctic snön så ljus.</p> <img src="penguins.jpg" width="200" height="150" alt="penguins"> </body> </html> @charset "utf 8"; /* CSS Document */ #left{padding:15px; background color: #DDD; color: rgb(50,100,200); width: 300px; height: 400px; float:left; padding left: 25px;} p{ img{ color: #333; font weight: bold;} padding left: 25px;}
Runda hörn img{ } #left { } border radius:10px; padding:15px; background color: #DDD; color: rgb(50,100,200); width: 300px; height: 400px; float:left; padding left: 25px; border:2px solid; border radius:25px; border color: #C00;
Skugga Box shadow #left { } padding:15px; background color: #DDD; color: rgb(50,100,200); width: 300px; height: 400px; float:left; padding left: 25px; border:2px solid; border radius:25px; border color: #C00; webkit box shadow: 10px 10px 5px #888888;
Webkit renderingsmotor
Skugga bakom text h1 { text shadow: 5px 5px 2px #888;}
HSL färger #middle2 { padding:15px; border:6px double rgb(142 137 129); border radius: 25px; border top right radius: 0px; border bottom left radius: 0px; background color: hsl(120, 50%, 50%);
Transparenta färger HSLA #middle3 { padding:15px; border radius: 25px; border top right radius: 0px; border bottom left radius: 0px; background image: url(test.jpg); color: hsla(120,0%,40%,.6); }
Gradienter #lower { padding:15px; background color: #36F; border radius: 25px; border top right radius: 0px; border bottom left radius: 0px; background: webkit gradient (linear, left top, left bottom, from(#00abeb), to(#015));}
Egna fonter @font face { font family: rubrikfont; src: url('maturasc.ttf'); } h1 { font family:rubrikfont;} #left { } padding:15px; background color: #DDD; color: rgb(50,100,200); width: 300px; height: 400px; float:left; padding left: 25px; border:2px solid; border radius:25px; border color: #C00; font family:rubrikfont;
Rotera img{ border radius:10px; /*transform:rotate(30deg);*/ webkit transform:rotate(30deg); }
Spalter.newspaper { moz column count:3; /* Firefox */ webkit column count:3; /* Safari and Chrome */ column count:3; } <p class="newspaper"> Utseende<br> Pingviner skiljer sig ganska mycket åt i storlek och vikt trots att de är tämligen lika i kroppsform och dräkt. Huvudsakligen är de blåsvarta eller blåg