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

L2 Rubrik nivå 1 Rubrik nivå 2 Lorem ipsum...

CSS-fil: L2.CSS L2 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 "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 L4 p { font-family:Arial, Helvetica, sans- serif; margin:15px; padding:1em; background-color:red; width:10em; color:black; }

Extern "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 Rubrik 1 Lorem... #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: "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 andra rubriken 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 andra rubriken Nam liber tempor …. Claritas est etiam ….

Pseudoelement p:first-letter {font-size:36px} p:first-line {font-size:24px}

Att manipulera "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 "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 "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 "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 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 "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 "utf-8"; div.thumbnail { 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 div.thumbnail {width: 130px; float:left; margin: 0 10px 10px 0; background: url(Bild_bak.jpg) no-repeat;} div.thumbnail img {margin:10px px; 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

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;} Lorem ipsum... Julias Caesar

@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

Rubriken Lorem ipsum... mer info 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: px; background: url(Bild_17d.jpg) no-repeat 0 100%;} div#pullquote p.furtherinfo a {padding: 0 20px 20px 0; text-align:right; background: url(Bild_17c.jpg) no-repeat 100% 100%; color:#2ABFFF;}

Länkar L10

Länkar – 5 tillstånd Normal a:link Visited a:visited Hover a:hover Active a:active Focus a:focus

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad mini m veniam, 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 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; background: yellow;}

Tabeller L14

Prislista för maskinskruv, trådspik, bultar och fjäderbrickor Detalj Maskinskruv Trådspik Bultar Fjäderbrickor 1 kg kg 3.00

Prislista för maskinskruv, trådspik, bultar och fjäderbrickor Detalj Maskinskruv Trådspik Bultar Fjäderbrickor 1 kg kg 3.00

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

Prislista för maskinskruv, trådspik, bultar och fjäderbrickor Detalj Maskinskruv Trådspik Bultar Fjäderbrickor 1 kg kg kg 3.50 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;}

2 kg tr.alternate { background: #D7E0EA; } tr.alternate th { background:#8AA9C7; }

Att disponera sidan

Tvåspaltig sidlayout – inte ännu

Länk 1 Länk 2 Länk 3 Tvåspaltig design Lorem ipsum dolor sit amet,

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

Detta är rubriken Claritas est … Claritas est etiam … Nam liber tempor cum … Sidfot med exempelvis författarnamn

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

Hem Om Tjänster Personal Portfölj Kontakt Webbkartan 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;}

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

Hem Om Tjänster Personal Portfölj Kontakt Webbkartan

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

Direkt till innehållet Hem Om Tjänster Medarbetare Portfölj Kontakt

@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

Fyrfolket Direkt Hem Om Tjänster Medarbetare Portfölj Kontakta oss Om Stora Fjäderäggs fyrplats Lorem ipsum dolor sit amet, in torquent nunc pretium pharetra.... Dui nunc dui ultrices nulla..... 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;}