selector { CSS property: value; property2: value; Code Camp for Girls Sonja Jaakkola & Sanna Nygård

Koko: px

Aloita esitys sivulta:

Download "selector { CSS property: value; property2: value; Code Camp for Girls 2015 - Sonja Jaakkola & Sanna Nygård"

Hilja Myllymäki
7 vuotta sitten
Katselukertoja:

2 selector { CSS property: value; property2: value; Code Camp for Girls Sonja Jaakkola & Sanna Nygård

3 CSS selectorit

4 Elementti HTML CSS <h1>otsikko</h1> h1 { color: pink;

5 Luokka HTML CSS <h2 class= sub-title >Otsikko</h2>.sub-title { color: pink;

6 Sisäkkäiset elementit HTML CSS <header class= serious > <h2 class= sub-title > Otsikko </h2> </header>.sub-title { color: pink;.serious.sub-title { color: black;

7 Useampi luokka HTML CSS <div class= block > </div> <div class= block special > </div> <div class= block > </div>.block { background-color: pink; width: 400px;.block.special { background-color: white;

8 Tekstin muokkaus

9 Fontit sans-serif (päätteetön) Arial Verdana Impact serif (päätteellinen) Georgia Times New Roman

10 Fontti HTML CSS <h1>otsikko</h1> h1 { font-family: Arial, Helvetica, sans-serif; Otsikko

11 Tekstin koko, paksuus & väri HTML CSS <h1>otsikko</h1> h1 { font-family: Arial, Helvetica, sans-serif; font-size: 24px; Otsikko font-weight: normal; color: #850b40;

12 Tekstin välistykset HTML CSS <body> <p>integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui.</p> </body> body { font-family: Arial, Helvetica, sans-serif; p { line-height: 1.5; letter-spacing: 1px;

13 HARJOITUS Luo otsikoita ja tekstikappaleita. Tyylittele tekstit. Huomiota voi kiinnittää mm. fonttiin, kokoon, väriin, paksuuteen & välistyksiin

14 Keskitys ja välistykset

15 Display: Block Elementti on oletuksena laatikko, joka varaa koko käytettävissäolevan tilan leveyssuunnassa, ja jolle voi lisätä välistyksiä. Tällaisia ovat oletuksena esim: <div> <h1> <p> <li> h1 div p p

16 Display: Inline Elementti on vie vain sen tarvitseman tilan. Tällaisia ovat oletuksena esim: <span> <a> <img> h1 p a a a a

17 body div class= container p a a a a

18 Block elementin keskitys HTML CSS <div class= container > </div>....container { width: 1080px; margin: 0 auto;

19 body div p a a a a

20 Inline elementtien keskitys HTML CSS <div class= container > <p>....container { text-align: center; </div> </p>

21 divclass= container div class= inner div class= inner div class= inner

22 Välistykset: margin HTML CSS <div class= container > <div class= inner >...</div> <div class= inner >...</div> <div class= inner >...</div> </div>.inner { margin: 20px 0; margin: 20px 0 20px 0; margin-top: 20px; margin-bottom: 20px;

23 divclass= container div class= inner div class= inner div class= inner

24 Välistykset: padding HTML CSS <div class= container > <div class= inner ></div> <div class= inner ></div> <div class= inner ></div> </div>.container { padding: 0 20px; padding: 0 20px 0 20px; padding-left: 20px; padding-right: 20px;

25 HARJOITUS Luodaan sivuun keskitetty div-elementti, jonka sisälle laitetaan esim. div-elementtejä, otsikko, tekstiä ja kuva Voitte kokeilla myös välistyksien lisäämistä.

26 Taustat

27 body divclass= container

28 Taustaväri HTML CSS <body> <div class= container >... </div> </body> body{ background-color: pink;.container{ background-color: grey;

29 body divclass= container

30 Toistuva taustakuva HTML CSS <body> <div class= container >... </div> body{ background-image: url('../images/image.jpg'); background-repeat: repeat; </body>

31 divclass= container

32 Koko alueen kattava taustakuva HTML CSS <body> <div class= container >... </div> body{ background-image: url('../images/image.jpg'); background-size: cover; </body>

33 HARJOITUS Asettakaa taustakuva ja/tai taustaväri jollekin elementille.

34 Sivun rakenne

35 div class= container div class= columns div class= left div class= right

36 Elementtien asettelu HTML CSS <div class= columns clearfix > <div class= left ></div> <div class= right ></div> </div>.left,.right { width: 45%;.left { float: left;.right { float: right;

37 div class= container div class= columns div class= left div class= right

38 Elementtien asettelu HTML CSS <div class= columns clearfix > <div class= left ></div> <div class= right ></div> </div>.left { float: left; width: 60%;.right { float: right; width: 30%;

39 Elementtien asettelu HTML CSS <div class= columns clearfix > <div class= left ></div> <div class= right ></div> </div>.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;

40 HARJOITUS Luo divin sisään kaksi rinnakkaista elementtiä, ja käytä clearfix-luokkaa.

41 Navigaatio listan avulla

42 linkki linkki linkki linkki linkki

43 Navigaatio listan avulla HTML CSS <ul class= navi >.navi { <li><a href=... >Linkki 1</a></li> <li><a href=... >Linkki 2</a></li> <li><a href=... >Linkki 3</a></li> </ul> li{ margin: 0; padding: 0; list-style-type: none; margin: 5px; display: inline-block;

44 Napit

45 klikkaa mua!

46 Napit HTML CSS <a class= button >Klikkaa mua!</a>.button { display: inline-block; padding: 16px 32px 16px 32px; background-color: green; color: white;

47 klikkaa mua!

48 Napit HTML CSS <a class= button >Klikkaa mua!</a>.button:hover { background-color: red;

49 Pyöristetyt kulmat

50 kuva

51 Pyöreä kuva HTML CSS <div class= round-image ></div>.round-image { height: 300px; width: 300px; border-radius: 150px; background-image: url('...'); background-size: cover;

52 klikkaa mua!

53 Pyöristetty nappi HTML CSS <a class= button >Klikkaa mua!</a>.button { display: inline-block; padding: 16px 32px 16px 32px; background-color: green; color: white; border-radius: 10px;

Samankaltaiset tiedostot

Lisätehtävät. Frantic 2015 sivu 1 www.frantic.com

Lisätehtävät. Frantic 2015 sivu 1 www.frantic.com Lisätehtävät Frantic 2015 sivu 1 www.frantic.com Fontit - Google fonts Fonttien käyttäminen verkossa ilman uusien fonttien lataamista on melko rajattua, sillä koskaan ei voi tietää mitä fontteja vastaanottajan