CSS perusteet Metropolia. Juhana Lindström Web-kehittäjä – 4 vuotta verkkosivujen toteuttamista ja ylläpitoa – Toteuttanut tai kehittänyt yli 20 eri verkkosivustoa.

Esitys aiheesta: "CSS perusteet Metropolia. Juhana Lindström Web-kehittäjä – 4 vuotta verkkosivujen toteuttamista ja ylläpitoa – Toteuttanut tai kehittänyt yli 20 eri verkkosivustoa."— Esityksen transkriptio:

1 CSS perusteet Metropolia

2 Juhana Lindström Web-kehittäjä – 4 vuotta verkkosivujen toteuttamista ja ylläpitoa – Toteuttanut tai kehittänyt yli 20 eri verkkosivustoa – Sempre Media, www.sempre.fiwww.sempre.fi

3 Työkalut Notepad++ – Kevyt ja näppärä koodinkirjoitustyökalu, korostaa koodisyntaksia helpommin luettavaksi, hyödyllisiä toimintoja Selaimet – Kehitys: Firefox, Chrome Hyvät kehitystyökalut, tukee uusia CSS-määrityksiä – Testaus (1): Safari, Opera Yleensä ei ongelmia – Testaus (2): Internet Explorer 9-7 IE9 hyvät kehitys- ja testityökalut IE versioihin 9-7 IE7 yleensä aina jotain ongelmia, vaatii erillisiä CSS-määrityksiä

4 Oppimateriaalia W3schools.com, http://www.w3schools.com/css/default.asp http://www.w3schools.com/css/default.asp – Perustietoa CSS-tyylimääritteistä ja niiden toiminnasta, demonstraatioita. CSS-Tricks, http://css-tricks.com/http://css-tricks.com/ – Neuvoja ja ohjeita mm. selainyhteensopivuuteen, uusien CSS-määritteiden käyttöön, hackeja, ym…

5 PERUSASIAT Syntaksi ja tyypillisimpiä arvoja

6 Syntaksi Color: #FF0000; Background-color: #FF0000; CSS-tiedostossa: a { color:#ff0000; } HTML-koodissa: Etusivu

7 Mittayksiköt Pikseliä (px) – Border-width:3px; Prosenttia (%) – Width:50%; Suhteessa vallitsevaan fonttikokoon (em) – Line-height:1.3em; – Em Calculator, http://riddle.pl/emcalc/http://riddle.pl/emcalc/ Muitakin on: in, cm, mm, pt…

8 Värit Nimi: black, red, white Hex: #00000, #FF0000, #FFFFFF RGB-arvo: rgb(0,0,0), rgb(255,0,0), rgb(255,255,255) RGBA-arvo: rgba(255,0,0,1), rgba(255,0,0,0.5) HSL-arvo: hsl(170,50%,70%) HSLA-arvo: hsla(170,50%,70%,0.5)

9 RAKENNE HTML-elementit oikean kokoisiksi ja oikeaan paikkaan.

10 Box model Margin – Tyhjä tila tämän ja muiden elementtien välissä, aina läpinäkyvä Border – Elementin reuna Padding – Reunan ja sisällön välinen tyhjä tila Content – Elementin sisältö, esim tekstiä

11 Käyttäytyminen display: block; – block (esim. div) Elementti näkyy laatikkona, vie koko rivin – inline-block (esim. img) Elementti näkyy laatikkona, kulkee tekstin seassa – inline (esim. a, span) Elementti ei näy laatikkona, kulkee tekstin mukana – none Elementtiä ei näytetä – Muitakin on: table, table-row, table-cell…

12 Näkyminen Visibility: hidden; – Visible, hidden Määritteellä visibility:hidden; elementti piirretään sivulle läpinäkyvänä, toisin kuin määritteellä display:none; jolloin elementtiä ei parjaatteessa ole koko sivulla.

13 Koko Width:960px; – Auto, mittayksiköt Min-width:320px; Max-width:100%; Height:auto; – Auto, mittayksiköt Min-height:200px; Max-height:100%;

14 Asemointi Position:absolute; – Absolute Täsmällinen sijainti Suhteutuu edelliseen position määriteltyyn elementtiin – Relative Suhteellinen sijainti elementin normaalista sijainnista – Fixed Sijainti selainikkunassa, scrollaus ei vaikuta Z-index: 10; – Elementin järjestys syvyyssuunnassa eli päällekkäin float: left; – Left Elementti tasataan vasemaan laitaan, muu sisältö kiertää elementin – Right Elementti tasataan oikeaan laitaan, muu sisältö kiertää elementin

15 TYYLITTELY HTML-elementtien ja sisällön personointi

16 Tekstin tyylittely Font-family: arial, sans-serif; Font-size:1.5em; – Selainten oletusarvo on 16px Font-weight:bold; Text-decoration:underline; Text-transform:uppercase; Text-align:right; Line-height:1.5em; Letter-spacing: 0.2em;

17 Taustan tyylittely Background-color: #eeeeee; Background-image:url(layout/tausta.png); Background-repeat:repeat-x; – repeat, repeat-x, repeat-y, no-repeat Background-position: 0px 300px; Background-attachment: fixed; – Scroll, fixed

18 Reunan tyylittely Border: solid 1px #ff0000; = Border-style: solid; Border-width:1px; Border-color:#FF0000;

19 JIPOT JA KIKAT Hyvä tietää

20 Fallback Selaimille jotka eivät tue jotain määritystä kannattaa määrittää varavaihtoehto. Esimerkki: background-color: #FF0000; background-color: rgba(255,0,0,0.5); Selain näyttää elementin viimeisten ymmärtämiensä määritysten mukaisesti.

21 Blockin keskitys Margin: 0px auto; – Keskittää block-tyyppisen elementin – Vertaa teksti asemointiin: Text-align:left; => float:left; text-align:center;=> margin: 0px auto; Text-align:right;=> float:right; – Toisin kuin floatissa, teksti ei kierrä elementtiä.

22 CSS3 -SILMÄNKARKKIA Ne uudet jutut

23 Nurkan pyöristys border-radius: 1em; border-radius:20px 15px 10px 5px;

24 Varjot Box-shadow: 10px 7px 5px #eeeeee; Box-shadow: inset 10px 10px 10px -5px #d5d5d5; – Ulkopuolella (outset), sisällä (inset) – Sijainti sivusuunnassa vasemmasta laidasta – Sijainti pystysuunnassa ylälaidasta – Varjon reunan häivytyksen leveys – Varjon levittäytyminen laatikon mitoista Text-shadow: 5px 3px 5px #757575;

25