View
230
Download
3
Category
Preview:
Citation preview
CSS
Cascading Style Sheets
Formattering av text<p class="introduction">Lorem ipsum dolor
...</p>
<p>Ut enim ad ... </p>
<p>Duis aute ....</p>
@charset "utf-8";
p{font-family:Arial, Helvetica, sans-serif;font-size:80%;line-height:1.4;margin:25px;}
p.introduction{font-family:"Times New Roman", Times, serif;font-style:italic;font-weight:bold;text-align:center;font-size:110%;color:#900;margin:25px;}
Selektor { egenskap: värde;}
@charset "utf-8";
/* CSS Document */
p {color:black;}
p em {color:green;}
div p {color:red;}
.special{background-color:#999999;
<body><h1>Detta är <em>första</em> rubriken </h1><p>Och här kommer <em>brödtexten</em> </p><p>Lorem ipsum … </p><div><p>Ut wisi enim ad minim … </p></div><h1 class="special">Detta är
<em>andra</em>rubriken </h1><p class="special">Nam liber tempor </p><p>Claritas est etiam.</p></body>
ID-selektrorer
p {color:black;}p#vanlig{color:blue;}p#vanlig em {color:green;}div p {color:red;}.special{background-color:#999999;}#speciell{background-color:#999900;}h1#first_header {border:dotted}* {color:maroon}
<body><h1 id="first_header">Detta är <em>första</em> rubriken
</h1><p id="vanlig">Och här kommer <em>brödtexten</em>
</p><p>Lorem ipsum dolor … </p><div id="speciell"><p>Ut wisi enim … </p></div><h1 class="special">Detta är <em>andra</em>rubriken
</h1><p class="special">Nam liber tempor …. </p><p>Claritas est etiam ….</p></body>
Pseudoelement
• p:first-letter {font-size:36px}
• p:first-line {font-size:24px}
Att manipulera text
@charset "utf-8";/* CSS Document */
p#vanlig{}
p#indent{text-indent: 25px;}
p#space{letter-spacing: 0.25em;}
p#height{line-height: 150%;}
p#transform{ text-transform: uppercase;}
Position static
p#third{
position: static;
left: 20px;
top: 30px;
}
Position relative
p{border: 1px solid #333333;}p#first{}p#second{}p#third{
position: relative;left: 20px;top: 30px;
}p#fourth{}
Position absolute@charset "utf-8";/* CSS Document */p{
border: 1px solid #333333;}p#first{}p#second{}p#third{
border: 1px solid #f00;position: absolute;left: 20px;top: 30px;color:red;
}p#fourth{}
Position Fixed@charset "utf-8";/* CSS Document */p{
border: 1px solid #333333;}p#first{}p#second{}p#third{
border: 1px solid #f00;position: fixed;left: 20px;top: 30px;color:red;font-weight: bolder;
}p#fourth{}
Float
• <img src="godis.jpg" alt="godis">• <p id="first">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
• <p id="second">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel …
@charset "utf-8";/* CSS Document */p{
}img{
margin: 10px;}p#first{}p#second{}p#third{}p#fourth{}
Float left• @charset "utf-8";• /* CSS Document */• p{•• }• img{• margin: 10px;• float:left• }• p#first{}• p#second{}• p#third{}• p#fourth{}
@charset "utf-8";/* CSS Document */p{float:right}img{
margin: 10px;float:right
}p#first{}p#second{}p#third{}p#fourth{}
Display
<body><img src="godis2.jpg" alt="godis"><img
src="godis2.jpg" alt="godis"><img src="godis2.jpg" alt="godis"><img src="godis2.jpg" alt="godis">
</body>
img{display:inline; margin: 10px;}
}
img{
display:block; margin: 10px;
}
<body><img src="godis2.jpg" alt="godis"><p id="first">Lorem ipsum dolor… </p><img src="godis2.jpg" alt="godis"><p id="second">Ut wisi enim ad minim… </p><img src="godis2.jpg" alt="godis"><p id="third">Nam liber tempor cum soluta… </p><p id="fourth">Claritas est etiam processus...</p></body>
p{ margin-top: 0px;margin-right: 0px;margin-bottom: 10px;margin-left: 0px;}
img{ display:block;float: left;margin-top: 0px;margin-right: 4px;margin-bottom: 4px;margin-left: 0px;}
.bryt{ clear: both;}
p#first{}p#second{}p#third{}p#fourth{}
<body><img src="godis2.jpg" alt="godis"><p id="first">Lorem ipsum. </p><div class="bryt"></div><img src="godis2.jpg" alt="godis"><p id="second">Ut wisi enim ad</p><div class="bryt"></div><img src="godis2.jpg" alt="godis"><p id="third">Nam liber tempor </p><p id="fourth">Claritas est etiam.</p></body>
Bakgrundsbild
<div id="content">
<h1> Rubrik 1</h1>
<p> Lorem ... </p>
</div>
@charset "utf-8";#content{background-image:url(book_600.jpg);margin:50px;width:500px;padding-top:0px;padding-left:95px;padding-below:25px;}
p{font-family:Arial, Helvetica, sans-serif;margin:15px;padding:30px;padding-top:10px;margin:20px;width:120px;}
h1{font-family:Arial, Helvetica, sans-serif;margin:15px;padding:2px;padding-top:10px;padding-left:30px;margin:20px;width:120px;}
Upprepad bild
#content{background-image:url(book_600_1.jpg);background-repeat:repeat-y;margin:50px;width:500px;padding-top:0px;padding-left:95px;padding-below:25px;}
<h1 id="header">Sidans rubrik</h1>
<p> Lorem ipsum ... </p>
@charset "utf-8";h1#header{color:#036;font-size:120%;font-weight:normal;text-transform:uppercase;text-align:center;letter-spacing: .5em;padding: .4em 0;border-top: 1px solid #069;border-bottom:1px solid #069;background: url(bild.jpg) repeat-x;
}
”Fotoalbum”
L12
<div class="thumbnail"><img src="Bild1-100.jpg" alt="bild 1" />
<p>Första bilden</p></div><div class="thumbnail">
<img src="Bild2-100.jpg" alt="bild 2" /> <p>Andra bilden</p></div><div class="thumbnail">
<img src="Bild3-100.jpg" alt="bild 3" /> <p>Tredje bilden</p></div><div class="thumbnail">
<img src="Bild4-100.jpg" alt="bild 4" /> <p>Fjärdebilden</p></div><div class="thumbnail">
<img src="Bild5-100.jpg" alt="bild 5" /> <p>Femte bilden</p></div>
@charset "utf-8";
div.thumbnail{width: 130px;float:left;margin: 0 10px 10px 0;background: url(Bild_bak.jpg) no-
repeat;}
<div class="thumbnail"><img src="Bild1-100.jpg" alt="bild 1" />
<p>Första bilden</p></div><div class="thumbnail">
<img src="Bild2-100.jpg" alt="bild 2" /> <p>Andra bilden</p></div><div class="thumbnail clear">
<img src="Bild3-100.jpg" alt="bild 3" /> <p>Tredje bilden</p></div><div class="thumbnail">
<img src="Bild4-100.jpg" alt="bild 4" /> <p>Fjärdebilden</p></div><div class="thumbnail clear">
<img src="Bild5-100.jpg" alt="bild 5" /> <p>Femte bilden</p></div>
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><div class="thumbnail">
<img src="Bild2-100.jpg" alt="bild 2" /> <p>Andra bilden</p></div><div class="thumbnail">
<img src="Bild3-100.jpg" alt="bild 3" /> <p>Tredje bilden</p></div><div class="thumbnail">
<img src="Bild4-100.jpg" alt="bild 4" /> <p>Fjärdebilden</p></div><div class="thumbnail">
<img src="Bild5-100.jpg" alt="bild 5" /> <p>Femte bilden</p></div>
Citat
L13
<blockquote>
<p>Lorem ipsum ....</p>
<p class="source">
Julias Caesar
</p>
</blockquote>
</body>
</html>
blockquote{ margin: 1em 0;
border: 1px solid #ddd;background: url(13.jpg) 5px 5px no-repeat;padding-top:30px;}
blockquote p{ padding:0 70px;}
blockquote p.source{ background: url(13b.jpg) no-
repeat 100% 100%;padding-bottom:30px;margin: 0 5px 5px 0;text-align: right;font-style: italic; }
<body>
<blockquote><p>Lorem ipsum ...</p>
<p class="source">Julias Caesar</p>
</blockquote>
</body>
@charset "utf-8";
blockquote{ margin: 1em 0;
border: 1px solid #000;background: #000 url(13c.jpg) no-repeat 0 0;padding-top:1px;color: #fff;/*width: 500px;*/}
blockquote p{ padding:0 1em 0 80px;}
blockquote p.source{ margin: 0;
border-top: 5px solid #fff;padding: .5em .5em .5em 80px;background:#336;font-style: italic;}
Runda hörn
L17
<body><div id="pullquote"><h2>Rubriken</h2><P>Lorem ipsum ...
</P><p
class="furtherinfo">
<a href="#">mer info</a>
</p>
</body>
div#pullquote{margin:2em;background:#00069c url(Bild_17a.jpg) no-repeat;}
div#pullquote h2{margin: 0;padding:20px 20px 0 20px;background: url(Bild_17b.jpg) no-repeat 100% 0;color:#2ABFFF;}
div#pullquote p{padding:0 20px ;color:#2ABFFF;}
div#pullquote p.furtherinfo{padding: 0 0 0 20px;background: url(Bild_17d.jpg) no-repeat 0 100%;}
div#pullquote p.furtherinfo a{display:block;padding: 0 20px 20px 0;text-align:right;background: url(Bild_17c.jpg) no-repeat 100% 100%;color:#2ABFFF;}
div#pullquote{background:#00069c url(Bild_17y.jpg) no-
repeat 0 100%;width:400px;color:#2ABFFF;}
div#pullquote p{padding:0 20px ;color:#2ABFFF;}
div#pullquote h2{margin: 0;padding:20px 20px 0 20px;background: url(Bild_17x.jpg) no-repeat 100% 0;color:#2ABFFF;}
div#pullquote p.furtherinfo{text-align:right;}
div#pullquote p.furtherinfo a{color:#2ABFFF;}
<body><div id="pullquote"><h2>Rubriken</h2><P>Lorem ipsum ... </P><p class="furtherinfo"><a href="#">mer info</a></p>
</body></html>
Länkar
L10
Länkar – 5 tillstånd
• Normal a:link
• Visited a:visited
• Focus a:focus
• Hover a:hover
• Active a:active
<p> Lorem ipsum dolor sit amet, <a href="L8.html">consectetur </a>adipisicing elit, sed do eiusmod tempor incididunt ut labore <a href="L8.html">et dolore magna</a> aliqua. Ut enim ad <a href="http://www.tfe.umu.se">minim veniam</a>, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p>
a{color:blue;}
a:link{color: red;}
a:visited{color: green;}
a:hover{color:black;font-weight:bold;text-decoration:none;border-bottom:1px solid blue;padding: .4em 0;position: relative;z-index: 1;background: yellow;}
Tabeller
L14
<table> <caption> Prislista för maskinskruv, trådspik, bultar och fjäderbrickor </caption> <tr> <td>Detalj</td> <td>Maskinskruv</td> <td>Trådspik</td> <td>Bultar</td> <td>Fjäderbrickor</td> </tr> <tr> <td>1 kg</td> <td>2.50</td> <td>3.50</td> <td>4.50</td> <td>2.50</td> </tr> <tr> <td>2 kg</td> <td>3.00</td>
<table summary="Tabell med skruv, spik, bult och bricksor för 1 till 4 kilo"> <caption> Prislista för maskinskruv, trådspik, bultar och fjäderbrickor </caption> <thead> <th>Detalj</th> <th abbr="skruv">Maskinskruv</th> <th abbr="spik">Trådspik</th> <th abbr="bultv">Bultar</th> <th abbr="brickor">Fjäderbrickor</th> </thead> <tbody> <tr> <td>1 kg</td> <td>2.50</td> <td>3.50</td> <td>4.50</td> <td>2.50</td> </tr> <tr> <td>2 kg</td> <td>3.00</td>
@charset "utf-8";
caption{text-align:left;margin:0 0 .5em 0;font-weight:bold;}
table{border-collapse:collapse;}
th, td{border-right: 1px solid #fff;border-bottom: 1px solid #fff;padding: .5em; }
tr{background:#B0C4D7;}
<table summary="Tabell med skruv, spik, bult och bricksor för 1 till 4 kilo">
<caption> Prislista för maskinskruv, trådspik, bultar och
fjäderbrickor </caption> <thead> <th>Detalj</th> <th abbr="skruv">Maskinskruv</th> <th abbr="spik">Trådspik</th> <th abbr="bultv">Bultar</th> <th abbr="brickor">Fjäderbrickor</th> </thead> <tbody> <tr> <th>1 kg</th> <td>2.50</td> <td>3.50</td> <td>4.50</td> <td>2.50</td> </tr> <tr> <th>2 kg</th> <td>3.00</td> <td>4.00</td> <td>5.00</td> <td>3.00</td> </tr> <tr> <th>3 kg</th> <td>3.50</td>
caption{text-align:left;margin:0 0 .5em 0;font-weight:bold;}
Table {border-collapse:collapse;}
th, td{border-right: 1px solid #fff;border-bottom: 1px solid #fff;padding: .5em;}
Tr {background:#B0C4D7;}
thead th{ background: #036;
color: #fff; }
tbody th{ font-weight: normal;
background:#658CB1;}
<tr class="alternate">
<th>2 kg</th>
<td>3.00</td>
<td>4.00</td>
<td>5.00</td>
<td>3.00</td>
</tr>
tr.alternate
{
background: #D7E0EA;
}
tr.alternate th
{
background:#8AA9C7;
}
Att disponera sidan
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></div><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><div id="content"><div id="spalt1"><p>Claritas est … </p></div><div id="spalt2"><p>Claritas est etiam … </p></div><div id="spalt3"><p>Nam liber tempor cum … </p></div><div class="bryt"></div></div>
<div id="foot">Sidfot med exempelvis författarnamn</div>
</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;}
Vertikal meny
L15
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;}
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;}
Horisontell meny
L16
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;}
En fin rubrik
L18
<div id="container"> <h1> <a href="/"><img src="fyrfolket.jpg" alt="Platsnamn" a /></a> </h1><ul id="topnav"> <li><a href="#">Direkt till innehållet</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="#">Kontakt</a></li></ul></div>
@charset "utf-8";body{margin:0;padding:0;text-align:center;background: #B0BFC2;color:#444}
#container{text-align:left;margin: 0 auto;width: 700px;background:#fff;}
h1{margin:0;padding:0;border-bottom:1px solid #fff;}
h1 img{display:block;border:0;}
ul#topnav{margin:0;padding:5px 10px;list-style-type:none;background:#387a9b;}
ul#topnav li{display:inline;background:url(header-bullet.jpg) no-
repeat 0 50%;padding:0 5px 0 20px;}
ul#topnav li a:link, ul#topnav li a:visited{text-decoration:none;color:#fff;}
ul#topnav li a:hover, ul#topnav li a:active{text-decoration:none;color:#387a9b;background:#fff;}
Två spaler rubrik och footer
L19
<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><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><div id="footer">Copyright © webbplatsen
2006</div>
</div>
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;}
Recommended