Presentation is loading. Please wait.

Presentation is loading. Please wait.

CSS Cascading Style Sheets. Formattering av text Lorem ipsum dolor... Ut enim ad... Duis "utf-8"; p { font-family:Arial, Helvetica,

Similar presentations


Presentation on theme: "CSS Cascading Style Sheets. Formattering av text Lorem ipsum dolor... Ut enim ad... Duis "utf-8"; p { font-family:Arial, Helvetica,"— Presentation transcript:

1 CSS Cascading Style Sheets

2 Formattering av text Lorem ipsum dolor... Ut enim ad... Duis "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; }

3

4 Selektor { egenskap: "utf-8"; /* CSS Document */ p {color:black;} p em {color:green;} div p {color:red;}.special{background-color:#999999;

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

6

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

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

9

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

11

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

13

14 Position static p#third{ position: static; left: 20px; top: 30px; }

15

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

17

18 Position "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{}

19

20 Position "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{}

21

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

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

24

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

26

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

28

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

30

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

32

33 Lorem ipsum dolor… Ut wisi enim ad minim… Nam liber tempor cum soluta… Claritas est etiam processus...

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

35

36 Lorem ipsum. Ut wisi enim ad Nam liber tempor Claritas est etiam.

37

38 Bakgrundsbild

39 Rubrik 1 Lorem...

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

41

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

43

44

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

46

47 ”Fotoalbum” L12

48

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

50

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

52

53 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

54

55 Citat L13

56

57 Lorem ipsum.... Julias Caesar

58 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

59

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

61

62 Runda hörn L17

63

64 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 {display:block; padding: 0 20px 20px 0; text-align:right; background: url(Bild_17c.jpg) no-repeat 100% 100%; color:#2ABFFF;}

65

66 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;} Rubriken Lorem ipsum... mer info

67

68 Länkar L10

69

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

71 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; z-index: 1; background: yellow;}

72

73 Tabeller L14

74

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

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

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

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

79

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

81

82 Att disponera sidan

83 Tvåspaltig sidlayout – inte ännu

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

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

86

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

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

89

90 Trespaltig med float och div

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

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

93 Vertikal meny L15

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

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

96

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

98 Horisontell meny L16

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

100

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

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

103 En fin rubrik L18

104

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

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

107

108 Två spaler rubrik och footer L19

109

110 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

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

112


Download ppt "CSS Cascading Style Sheets. Formattering av text Lorem ipsum dolor... Ut enim ad... Duis "utf-8"; p { font-family:Arial, Helvetica,"

Similar presentations


Ads by Google