CSS Cascading Style Sheets <img src="bild1.jpg" alt="bild 1" /> <p>första bilden</p> <img src="bild2.jpg" alt="bild 1" /> <p>andra bilden</p> <img src="bild3.jpg" alt="bild 3" /> <p>tredje bilden</p> <img src="bild4.jpg" alt="bild 4" /> <p>fjärdebilden</p> <img src="bild5.jpg" alt="bild 5" /> <p>femte bilden</p> @charset "utf-8"; div.thumbnail width: 130px; margin: 0 10px 10px0; background: url(bg.jpg) no-repeat; div.thumbnail width: 250px; margin: 0 10px 10px0; 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; <img src="bild1.jpg" alt="bild 1" /> <p>första bilden</p> <img src="bild2.jpg" alt="bild 1" /> <p>andra bilden</p> <img src="bild3.jpg" alt="bild 3" /> <p>tredje bilden</p> <img src="bild4.jpg" alt="bild 4" /> <p>fjärdebilden</p> <img src="bild5.jpg" alt="bild 5" /> <p>femte bilden</p> Tvåspaltig sidlayout not yet 1
<body> <div id="nav"> <ul> <li><a href="#">länk 1 </a></li> <li><a href="#">länk2 </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; 2
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; Snyggare meny med CSS #content width:450px; border:solid; div.bryt clear:both #header color: #CC0000; width:450px; #spalt1 color: #CC9900; width:150px; width:150px; <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; padding:.2em.5em; border-bottom:1px solid #fff; width: 7em; ul#navigation a:hover background:#69c; color:#000; 3
Vertikal meny Vertikal meny <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> 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 ulmargin-left: 30px; div#vertmenu li background-color: #FFA; float: left; ul#navigation margin-left: 0; padding-left: 0; list-style-type:none; background: #036; width:100%; ul#navigation li display:inline; ul#navigation a display:block; padding:.2em 1em; text-decoration:none; background:#036; border-right:1px solid #fff; ul#navigationa: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 4
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; margin:0; padding:20px; border-bottom:5px solid #387a9b; #nav 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(bullet.jpg) no-repeat 95%.4em; padding:0 20px 5px 0; #content width:475px; margin-left:45px; padding:15px 0; #footer clear:both; background:#387a9b; 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 background:#175b7d; CSS3 Några exempel på nyheter i CSS3 Exempeldokument <!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="pingviner"> </body> </html> Exempeldokument #left padding:15px; background-color: #DDD; color: rgb(50,100,200); width: 300px; height: 400px; padding-left: 25px; p color: #333; font-weight: bold; img padding-left: 25px; 5
Runda hörn img #left border-radius:10px; padding:15px; background-color: #DDD; color: rgb(50,100,200); width: 300px; height: 400px; padding-left: 25px; border:2px solid; border-radius:25px; border-color: #C00; Skugga Box shadow Webkit- renderingsmotor #left padding:15px; background-color: #DDD; color: rgb(50,100,200); width: 300px; height: 400px; padding-left: 25px; border:2px solid; border-radius:25px; border-color: #C00; -webkit-box-shadow: 10px 10px 5px #888888; Skugga bakom text h1 text-shadow: 5px 5px 2px #888; HSLa Hue, färg 0-360 Saturation, mättnad 0 100% Lightness, ljushet 0 100% alpha, opacitet 0-1 6
HSL-färger och CSS #mindiv1 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 #mindiv2 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 #mindiv3 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(#0ae), to(#015)); Inbäddade fonter @font-face font-family: rubrikfont; src: url('maturasc.ttf'); h1 font-family:rubrikfont; #left font-family:rubrikfont; padding:15px; Rotera img border-radius:10px; transform:rotate(30deg); -ms-transform:rotate(7deg); /* IE 9 */ -webkit-transform:rotate(7deg); /* Safari and Chrome*/ 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åggrå 7
Metodik - w3school.com - Google - Forum - Tutorials - DreamWeaver eller liknande - Inspireras av andra (ex http://www.csszengarden.com/) - Knyck och modifiera kod Är det så enkelt som det låter?? - Arbeta i etapper! 8