CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll

CSS

Cascading Style Sheets

Varför CSS

• Lätt att underhålla

• Mindre filstorlekar

• Ökad tillgänglighet

• Olika media

• Större typografisk kontroll

INTRO TILL CSS

L2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>L2</title></head>

<body><h1>Rubrik nivå 1</h1><h2>Rubrik nivå 2</h2><p> Lorem ipsum ...</p></body>

CSS-fil: L2.CSS

<head><meta http-equiv="Content-Type" content="text/html;

charset=utf-8" /><title>L2</title><link href="L2.css" rel="stylesheet" type="text/css" />

</head>

h1 { text-align: center; }h2 { font-style: italic; }p { color: maroon;}

Deklarationer

• h1 { text-align: center; }

• h2 { font-style: italic; }

• p { color: maroon;}

Kommentar, kombinerade selektorer

@charset "utf-8";

h1, h2 { text-align: center; color:#007FFF; /*Färgerna anges som RR GG BB*/}

h2 { font-style: italic; }

p { color: maroon;}

Formattera font

h2

{

font-style: italic;

font-variant: small-caps;

font-weight: bold;

font-size: 100%;

line-height: 120%;

font-family:Arial, Helvetica, sans-serif;

}

Kantlinjer

h1

{

border-width: 1px;

border-style: dashed;

border-color: red;

}

Padding

p { color: maroon; padding-top: 1em; padding-right: 2em; padding-bottom: 3em; padding-left: 4em; border-width: 1px; border-style: solid; border-color: blue; line-height: 130%;}

Margin

p

{

color: maroon;

margin-top: 1em;

margin-bottom: 3em;

border-width: 1px;

border-style: solid;

border-color: blue;

line-height: 130%;

}

STILMALLAR

3 sätt att stila på

-

L4

In-line-kod <h1>Rubrik 1</h1><p style="font-family:Arial, Helvetica,

sans-serif; margin:15px; padding:1em; background-color:gray; width:10em; color:yellow"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

</p>

(4a)

Rubrikformat<title>L4</title><style type="text/css" media="screen">

p{font-family:Arial, Helvetica, sans-serif;margin:15px;padding:1em;background-color:red;width:10em;color:black;}

</style></head>

Extern stilmall@charset "utf-8";

p{font-family:Arial, Helvetica, sans-serif;margin:15px;padding:1em;background-color:gray;width:10em;color:white;}

h1{margin:15px;}

Box-modellen

L5

Box-modellen<div id="content">

<h1>Rubrik 1</h1>

<p>Lorem ... </p>

</div>

#content{margin:10px;border:5px solid gray;background-color:blue;width:200px;padding:25px;}

p{font-family:Arial, Helvetica, sans-serif;margin:15px;padding:10px;background-color:gray;margin:20px;border:10px dashed white;background-color:red;width:120px;}

h1{color:white;}

Selektorer

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;

}

Position relative

p{border: 1px solid #333333;}p#first{}p#second{}p#third{

position: relative;left: 20px;top: 30px;

}p#fourth{}

Position absolute – rel dok@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 – rel browser@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;

}

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;}



<img src="Bild2-100.jpg" alt="bild 2" /> <p>Andra bilden</p></div><div class="thumbnail clear">


<img src="Bild4-100.jpg" alt="bild 4" /> <p>Fjärdebilden</p></div><div class="thumbnail clear">


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; }



<img src="Bild2-100.jpg" alt="bild 2" /> <p>Andra bilden</p></div><div class="thumbnail">


<img src="Bild4-100.jpg" alt="bild 4" /> <p>Fjärdebilden</p></div><div class="thumbnail">


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>






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;}


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;}

Documents

CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll