Rubrik 1
#content {margin:10px; border:5px solid gray; background-color:blue; width:200px; padding:25px;}Lorem ...
Transcript Slide 1
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
Rubrik nivå 1
Rubrik nivå 2
Lorem ipsum ...
CSS-fil: L2.CSS
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
Rubrik 1
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.
(4a)Rubrikformat
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
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;
Detta är första rubriken
Och här kommer brödtexten
Lorem ipsum …
Ut wisi enim ad minim …
Detta är andrarubriken
Nam liber tempor
Claritas est etiam.
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}
Detta är första rubriken
Och här kommer brödtexten
Lorem ipsum dolor …
Ut wisi enim …
Detta är andrarubriken
Nam liber tempor ….
Claritas est etiam ….
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
• 
•
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
•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{ • } • p#first{} • p#second{} • p#third{} • p#fourth{} margin: 10px; float:left
@charset "utf-8"; /* CSS Document */ p{ float:right } img{ margin: 10px; float:right } p#first{} p#second{} p#third{} p#fourth{}
Display
img{ } display:inline; margin: 10px;
} } img{ display:block; margin: 10px;
Bakgrundsbild
Rubrik 1
Lorem ...
@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;}
Sidans rubrik
Lorem ipsum ...
@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
Första bilden
Andra bilden
Tredje bilden
Fjärdebilden
Femte bilden
width: 130px; float:left; margin: 0 10px 10px 0; background: url(Bild_bak.jpg) no repeat; }
Första bilden
Andra bilden
Tredje bilden
Fjärdebilden
Femte bilden
{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; }
Första bilden
Andra bilden
Tredje bilden
Fjärdebilden
Femte bilden
Citat
L13
Lorem ipsum ....
Julias Caesar