JWT 2017 luento 2 to 10.3.2016 klo 12-14 Aulikki Hyrskykari PinniB1096 1
Edellinen luento o Kurssin sisältö ja suoritus, Web terminologiaa, HTML-kehitys, HTMLkertausta ja julkaisu shell.sis-palvelimella, validointi, HTML5-kertausta, koodin kirjoitustyylit, DOMista alustavasti Tänään o CSS-kertausta CSS-säännöt ja valitsimet Lokeromalli ja marginaalien käyttäytyminen Asemointi (kellutus, relative, absolue, fixed, sticky) Taustat o Joitain edistyneempiä piirteitä (CSS3 ) webfonttien käyttö viewport-prosentti display (none, block, inline, inline-block) liike palstoitus flexbox 2
CSS-kertausta (Cascading Style Sheets) HTML-dokumentti määrittelee sivun sisällön ja rakenteen (mitä) CSS-tyylitiedostot määritelevät miten sivu näytetään käyttäjälle (miten) CSS ZEN GARDEN 3
CSS säännön (rule) syntaksi selector property (piirre) value valitsin { ominaisuus: arvo; declaration 4
CSS säännön (rule) syntaksi p { color: red; 5
CSS säännön syntaksi (2) valitsin[, valitsin]* { ominaisuus: arvo[; ominaisuus: arvo]*[;] 6
CSS säännön syntaksi (2) p, h1,.tarkea { color: red; width: 240px; 7
Tyylipohja (tyyliohje, stylesheet) * { /* yhtenäistetään kaikkien elementtien marginaalit ja leveyden tulkinnat */ margin: 0; box-sizing: border-box; h1 { /* ensimmäisen tason otsikolle määritellään varjostus */ text-shadow: 4px 4px 2px black; p { /* kappaleiden teksti punaisella, ja kappaleleveyden määritys*/ color: red; width: 240px; 8
CSS valitsimet kolme perusvalitsinta HTML-dokumentti CSS-tyyliohjeet o Elementtivalitsin (type selector) <p> tekstiä </p> p { color: red; o Luokkavalitsin (class selector) <p class ="tarkea"> tekstiä </p>.tarkea { color: red; o id-valitsin (id selector) <p id = "uniikki"> tekstiä </p> #uniikki { color: red; 4 9
Attribuutti-, pseudoluokka- ja pseudoelementivalitsin o Attribuuttivalitsin e1[ ] elementtien valinta muiden kuin id- ja luokka-attribuuttien arvoja käyttäen ks. esim. MDN: Attribute selectors o Pseudoluokkavalitsin e1:takennin etsintä ei nimen, attribuuttien eikä attribuuttien sisältöjen perusteella, vaan jonkun muun elementin ominaisuuden perusteella (esim. käyttöliittymäelementeille hakua elementin tilan perusteella) ks. esim. MDN: Pseudo classes o Pseudolelementtivalitsin e1::tarkennin "luo" pseudoelementin, ts. vastaavaa elementtiä ei varsinaisesti ole olemassa ks. esim. MDN: Pseudo elements 10
Valitsinten yhdisteleminen o Kontekstinen valitsin (decendant selector, jälkeläisvalitsin) e1 e2 kohdistuu elementin e1 sisällä oleviin kaikkiin e2-elementteihin, esim. <article> <p> Teksti p-elementeissä, article-elementin sisällä sinistä </p> </article> <p> Tämä ei sinistä </p> <article> <div> <p>onko tämä sinistä? </p> </div> </article> article p { color: blue; 11
Valitsinten yhdisteleminen (2) o Lapsivalitsin (child selector) e1 > e2 kohdistuu elementin e1 välittömiin e2-lapsiin (siis ei myöhempiin jälkeläisiin), esim. <article> <p> Teksti p-elementeissä, article-elementin sisällä sinistä </p> </article> <p> Tämä ei sinistä </p> <article> <div> <p>onko tämä sinistä? </p> </div> </article> article > p { color: blue; 12
Valitsinten yhdisteleminen (3) o Luokkien käyttö tarkentimena (chaining classes):.luokannimi <div class = "yksi"> Tekstiä div-elementin sisällä, jolla luokka "yksi" <span class = "kaksi kolme"> Tekstiä span-elementissä divin sisällä, tällä luokka "kaksi" </span> </div> <div class ="yksi kolme"> Tekstiä div-elementissä, joka on edellisen divin ensimmäinen sisarus, tällä on kaksi luokkaa: luokat "yksi" ja "kolme" </div> Miten saadaan valituksi ensimmäinen div? Miten saadaan nämä kaksi tekstiä valituksi? div.yksi { color: red; div.yksi > span { color: red; div.yksi.kolme { color: red; div.yksi.kaksi > span { color: red;? 13
Lokeromalli kehys (border) marginaali (margin) täyte (padding) sisältö (content) 5 14
Marginaalin käyttäytyminen horisontaalisesti margin: 20px margin: 60px content content margin: 80px 15
Marginaalin käyttäytyminen vertikaalisesti margin: 20px content etäisyys? margin: 60px 60 px margins collapse vertically content 16
Kellutus (float left, float right, float both) <main> <p id="p1"></p> <p id="p2"></p> <p id="p3"></p> <p id="p4"></p> <section> tekstiä </section> </main> p { width: 50px; height: 50px; border: 1px solid black; main { background-color: lightblue; #p1 { background-color: yellow; #p2 { background-color: blue; #p3 { background-color: red; #p4 { background-color: green; o Kellutettu elementti irroitetaan dokumentivirrasta (document flow) 7 o Kellutuksen kokeilua (jos kellutus tuottaa vaikeuksia, täällä yksi rauhallisessa tahdissa asiaa selittävä video: https://css-tricks.com/video-screencasts/42-all-about-floats-screencast/ 17
Asemointi (positioning) position: static relative abolute fixed Staattinen o oletus kaikille elementeille paitsi <html>-elementille, sen oletus on suhteellinen) o elementti sijoittuu normaalisti omalle paikalleen elementtivirrassa 18
Suhteellinen (relative) o Absoluuttinen asemointi siirtää elementin normaalilta paikaltaan elementtivirrassa siirto annetaan css-ominaisuuksilla top, bottom, left, right (siirto yläreunasta ja vasemmalta tai alarunasta ja oikealta) elementtiä ei oteta irti dokumenttivirrasta, ts. muut osat olettavat, että elementti on alkuperäisessä paikassaan elem { position: relative top: 50px; left: 100px; 50px elem 100px elem sama vaikutus: bottom: -50px; right: -100px 7 19
Absoluuttinen (absolute) o Aboluuttisesti asemoitu kiinnitetään esivanhempansa kohtaan top, bottom, left, right kiinnittävä elementti, on se lähin esivanhempi, jonka asemointi on jokin muu kuin staattinen asemointi elementti otetaan irti dokumenttivirrasta elem { position: absolute; bottom: 10px; left: 50%; elem elem 50% 10px 8 20
Kiinteä (fixed) o Kuten absoluuttinen, mutta kiinnittävän esivanhempi elementin sijasta kiinnitetään viewporttiin (selainikkunaan) 9 o Uusi position: sticky; on sekoitus absoluuttista ja kiinteää (fixed) asemointia asemointi on fixed tiettyyn raja-arvoon asti, ja sen jälkeen absolute 21
Taustat (background) o Taustojen avulla helposti vaikuttavia efektejä ks esim. Me tiedämme missä asut background-color background-position (top, left, bottom, right, center, %, inherit,..) background-repeat (repeat, no-repeat, repeat-x, repeat-y,..) background-clip (content-box, border-box, margin-box,..) background-attachments 10 22
CSS edistyneempiä piirteitä
Webfonttien käyttäminen o Tietyt vakiofontitkäytettävissä aina esimerkiksi Times, Georgia, Arial, Tahoma, Lucida Console, jne. o Iso valikoima ilmaisia fontteja, helppo ottaa käyttöön etsi ensin haluamasi fontti, esim. www.fontsquirrel.com lataa fontin määrittelevä tiedosto palvelimelle (esim. Chunkfive.otf), ts. tallenna se omaan public_html hakemistoosi tuo fonttitiedosto html-tiedostoosi: @fontface-sääntö (CSS3) tämän jälkeen voit käyttää sitä samalla tavalla kuin vakiofonttejakin h1, h2 { @font-face { font-family: "ChunkFiveRegular"; src: local ( ChunkFiveRegular") url("fonts/chunkfive.otf") format ("opentype"); font-family: "ChunkFiveRegular", "Georgia", serif;
Webfonttien käyttäminen 2 o Googlefontit: https://www.google.com/fonts# ei tarvitse tallentaa palvelimelle voi käyttää linkkaamalla kirjasintiedoston suoraan Googlen palvelimelta o Esimerkiksi fontti "Indie Flower " etsi h1, h2 Googlen { palvelusta valitse use ja saat valmiit skriptin fontin käyttämiseksi itse asiassa googlen antamasa link-tiedostossa vain vastaava @font-face -sääntö jonka itse kirjoitimme edellä <link href= 'https://fonts.googleapis.com/css?family=indie+flower' rel='stylesheet' type='text/css'> font-family: 'Indie Flower', cursive;
Uusi mittayksikkö: viewport-prosentti o Mittayksikkö, joka suhteessa viewport-ikkunan leveyteen (viewport on selainikkunassa näkyvä sivun osa): vw, vh, vmin, vmax o Pienissä laitteissa viewport usein kapeampi kuin selainikkuna ikkunaa selataan pyyhkäisyllä sivusuunnassa o Esimerkiksi 1vw = 1/100 nykyisen viewport-leveydestä (1%) 15vh = 15/100 nykyisen viewport-korkeudesta (15%) o Helpottaa erityisesti elementtien korkeuden säätelyssä korkeuden säätely vanhoillakin prosenttimitoilla mahdollista mutta hankalaa joutuu huolehtimaan että äiti-elementillä on korkeus koska (width ja height) eivät ole periytyviä ominaisuuksia esimerkki halutaan määrätä kuvan korkeus, mutta sitoa se sivun leveyteen, ei korkeuteen 11 26
Elementtien sijoittelusta: CSS-ominaisuus display o Määrittää miten elementti sijoittuu suhteessa sitä edeltäviin ja sitä seuraaviin elementteihin o display: none elementti muutetaan näkymättömäksi o display: block leveys/korkeus voidaan asettaa (widht ja hight) asemoituu aina omalle rivilleen o display: inline leveys/korkeus määräytyy automaattisesti, sitä ei voi asettaa asemoituu samalle riville (jos mahtuu) o display: inline-block asemoituu kuten inline-elementti mutta sille voi antaa leveyden/korkeuden 12 27
Oletusarvoa voi muuttaa o Esim esimerkiksi avautuvan valikon toteutus ul-elementtien ul-lapset, joilla nav äitinä tai esiäitinä nav ul ul { display:none; nav ul li:hover > ul { display: block; nav elementin ul lapsen hiiren kursorin alla olevan li-lapsen ul-lapsi <nav> <ul class="menu"> <li> Ensimmäinen valikko <ul> <li><a href="#">(1) Eka alkio</a></li> <li><a href="#">(1) Toka alkio</a></li> <li><a href="#">(1) Kolmas alkio</a></li> </ul> </li> <li> Toinen valikko. </li> <li> Kolmas valikko. </li> </ul> </nav> 28
Esimerkki, listan tyylittely valikoksi <nav> <ul> <li><a href="#">eka alkio</a></li> <li><a href="#">toka alkio</a></li> <li><a href="#">kolmas alkio</a></li> </ul> </nav> Muutetaan listan rivit inline-elementeiksi, poistetaan pallukat, määritellään listan tausta vihreäksi ja täytettä reunoille (0.5 fonttikorkeutta vertikaalisessa ja 1 fonttikorkeus horisontaalisesssa suunnassa) nav li { display: inline; list-style-type: none; nav ul { background-color: LightGreen; padding: 0.5em 1em; 29
Listan tyylittely valikoksi.. Muutetaan listanalkio vahvennetuksi san-serif-fontiksi ja poistetaan linkille oletusarvoisesti annettava alleviivaus. nav li {.. font-family: "Helvetica", "Arial", "sans-serif"; font-weight: bold; nav a { text-decoration: none; Listan alkioille ei voi määritellä täytettä, kun muutimme elementit inline-elementiksi. Muutetaan navin sisällä olevat listanalkiot inline-block-elementiksi, niin täytteen antaminen onnistuu. Lisätään vielä kaksi mouse-over-efektiä (hoover-pseudoluokkavalitsimella), listanalkio-elementin taustavärin muutos, ja kallistus. nav li { display:inline-block; padding: 1em; nav li:hoover { text-decoration: none; 12 30
Oletusarvoinen display-arvo o Oletusarvoisesti display: block lohkoelementit, esim. <div>, <p>, <ol>, <ul>, <li>,... o Oletusarvoisesti display:inline sisäelementit, esim. <span>, <em>,... ns. replaced elements poikkeus: vaikka ovat inline-elementtejä, niiden leveys/korkeus voidaan asettaa esim. <img> ja <textarea> 31
inline / block / inline-block o display: inline marginaali ja täyte määräytyvät automaattisesti, niitä ei voi itse asettaa muiden elementtien sallitaan asemoitua elementin eteen tai jälkeen o display: block marginaali ja täyte voidaan asettaa pakotettu rivinvaihto elementin jälkeen o display: inline-block muiden elementtien sallitaan asemoitua elementin eteen tai jälkeen marginaalit & täytteet ja leveys & korkeus voidaan asettaa 32
Liikettä sivulle CSS3-ominaisuuksilla o CSS3:n mukana on tulossa käyttöön tyyliominaisuuksia, joiden avulla wwwsivuille saa suoraan liikettä ja jonkinasteista interaktiivisuutta ennen tarvittu joko JavaScriptia tai Flashiä liikkeen saamiseksi www-sivuille edellä käytetty transform esimerkki yhdestä uudesta CSS3-tyyliominaisuudesta o Valitsimen avulla määrättyä elementtiä voidaan kiertää paikallaan halutun astemäärän verran o Muita transform funktioita, esim. scale, skaalaus, elementin koon muuttaminen translate, siirtäminen paikaltaan o Elementin ominaisuuden animoitu muutos transition, tyylin arvosta toiseen animate, animointipolussa useampia avainkehyksia (keyframes) elem { transform: rotate(10deg); elem {transform: scale(x,y); elem {transform:translate(x,y); elem {transition: width 2s; 33
Tekstin palstoitus (CSS3) o Tekstin jakaminen palstoihin voidaan kiinnittää palstanleveys column-width tai palstojen lukumäärä column-count o Palstojen välille voidaan määritellä väliin jätettävä leveys: column-gap Mahdollisen palstanjakoviivan ominaisuudet: column-rule useamman palstan yli jatkuva elementti: column-span (vrt taulukon solun span-ominaisuus) 34
Flexbox (CSS3) o Maalaisjärkisempi tapa joustavien asemointien tekemiseksi kehyksen sisällä joko horisontaalissa tai vertikaalissa (!) suunnassa siksi ei puhuta leveydestä ja korkeudesta, tarvitaan uudet termit sijoittelun pääsuunta, main axis ristikkäinen suunta, cross axis o Kehykselle määritellään kehys boksi div-fl-kehys { display: flex; 35
Flexbox 2 (CSS3) flex-direction: row flex-direction: column o Asemointiin voi vaikuttaa (kehyksen) ominaisuuksilla paljon mahdollisuuksia, tässä vain osa asemointisuuntaan (flex-direction) asemoitavien elementtien rivitykseen (flex-wrap), = vaihdetaanko riviä (saraketta) kun eivät mahdu vai kutistetaanko niitä asemoitavien sijoitteluun pääsuunnassa (justify-content), vasempaan tai oikeaan suoraan, keskitettynä, välistettynä, jne. o Asemoitavalle elementille ei tarvitse määritellä tyyliominaisuuksia paitsi, jos haluaa yksittäisen boksin käyttäytyvän muista poikkeavasti esim. muut kutistuvat sivua kavennettaessa, mutta yksi ei 13 hyvä tutoriaali 36