1 / 25

CSS perusteet

CSS perusteet. Metropolia. 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.fi. Työkalut. Notepad ++

zyta
Download Presentation

CSS perusteet

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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.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 • Perustietoa CSS-tyylimääritteistä ja niiden toiminnasta, demonstraatioita. • CSS-Tricks, http://css-tricks.com/ • Neuvoja ja ohjeita mm. selainyhteensopivuuteen, uusien CSS-määritteiden käyttöön, hackeja, ym…

  5. Syntaksi ja tyypillisimpiä arvoja Perusasiat

  6. Syntaksi • Color: #FF0000; • Background-color: #FF0000; • CSS-tiedostossa: a{ color:#ff0000;} • HTML-koodissa: <a href=”index.html” style=”color:#FF0000;” > Etusivu </a>

  7. Mittayksiköt • Pikseliä (px) • Border-width:3px; • Prosenttia (%) • Width:50%; • Suhteessa vallitsevaan fonttikokoon (em) • Line-height:1.3em; • EmCalculator, 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. HTML-elementit oikean kokoisiksi ja oikeaan paikkaan. Rakenne

  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. HTML-elementtien ja sisällön personointi Tyylittely

  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. Hyvä tietää Jipot ja kikat

  20. Fallback Selaimillejotkaeivättuejotainmääritystäkannattaamäärittäävaravaihtoehto. • Esimerkki:background-color: #FF0000; background-color: rgba(255,0,0,0.5); Selainnäyttääelementinviimeistenymmärtämiensämääritystenmukaisesti.

  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. Ne uudet jutut CSS3 -silmänkarkkia

  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;

More Related