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

En presentation över ämnet: "CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll."— Presentationens avskrift:

1 CSS Cascading Style Sheets

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

3 INTRO TILL CSS L2

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

5

6 CSS-fil: L2.CSS L2 h1 { text-align: center; } h2 { font-style: italic; } p { color: maroon;}

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

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

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

10 Kantlinjer h1 { border-width: 1px; border-style: dashed; border-color: red; }

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

12 Margin p { color: maroon; margin-top: 1em; margin-bottom: 3em; border-width: 1px; border-style: solid; border-color: blue; line-height: 130%; }

13 STILMALLAR 3 sätt att stila på - L4

14 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)

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

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

17 Box-modellen L5

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

19 Selektorer

20 Selektor { egenskap: värde;} @charset "utf-8"; /* CSS Document */ p {color:black;} p em {color:green;} div p {color:red;}.special{background-color:#999999;

21 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.

22

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

24 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 ….

25

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

27

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

29

30 Position static p#third{ position: static; }

31

32 Position relative p{border: 1px solid #333333;} p#first{} p#second{} p#third{ position: relative; left: 20px; top: 30px; } p#fourth{}

33

34 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{}

35

36 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{}

37

38 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 …

39 @charset "utf-8"; /* CSS Document */ p{ } img{ margin: 10px; } p#first{} p#second{} p#third{} p#fourth{}

40

41 Float left @charset "utf-8"; /* CSS Document */ p{ } img{ margin: 10px; float:left } p#first{} p#second{} p#third{} p#fourth{}

42

43 @charset "utf-8"; /* CSS Document */ p{ float:right } img{ margin: 10px; float:right } p#first{} p#second{} p#third{} p#fourth{}

44

45 Display img{ display:inline;margin: 10px; }

46

47 img{ display:block;margin: 10px; }

48

49 Bakgrundsbild

50 Rubrik 1 Lorem...

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

52

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

54

55

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

57

58 ”Fotoalbum” L12

59

60 Första bilden Andra bilden Tredje bilden Fjärdebilden Femte bilden @charset "utf-8"; div.thumbnail { width: 130px; float:left; margin: 0 10px 10px 0; background: url(Bild_bak.jpg) no- repeat; }

61

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

63

64 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

65

66 Citat L13

67

68 Lorem ipsum.... Julias Caesar

69 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

70

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

72

73 Runda hörn L17

74

75 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: 0 0 0 20px; 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;}

76

77

78 Länkar L10

79

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

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

82

83 Tabeller L14

84

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

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

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

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

89

90 2 kg 3.00 4.00 5.00 3.00 tr.alternate { background: #D7E0EA; } tr.alternate th { background:#8AA9C7; }

91

92 Att disponera sidan

93 Tvåspaltig sidlayout – inte ännu

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

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

96

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

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

99

100 Trespaltig med float och div

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

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

103 Vertikal meny L15

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

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

106

107 Horisontell meny L16

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

109

110 Hem Om Tjänster Personal Portfölj Kontakt Webbkartan

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

112 En fin rubrik L18

113

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

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

116

117 Två spaler rubrik och footer L19

118

119 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

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

121