Aulikki Hyrskykari. CSS Taustaa CSS syntaksi CSS Valitsimet Kuvat verkkosivulla

HTML
DOWNLOAD

Koko: px

Aloita esitys sivulta:

Download "Aulikki Hyrskykari. CSS Taustaa CSS syntaksi CSS Valitsimet Kuvat verkkosivulla"

Raimo Pesonen
8 vuotta sitten
Katselukertoja:

4.4.2013 Aulikki Hyrskykari CSS Taustaa CSS

1 Aulikki Hyrskykari CSS Taustaa CSS syntaksi CSS Valitsimet Kuvat verkkosivulla

2 Tyylipohjakieli Nimi tulee piirteiden putousmaisesta periytymisestä o cascade = vesiputous o tyylipiirteet periytyvät DOM hierarkiassa äidiltä lapselle - ts. piirteiden periytyminen ympäröivältä elementiltä o periytyminen on kuitenkin piirrekohtaista, kaikki piirteet eivät ole periytyviä Alettiin käyttää vasta kun www sivuja oli jo kirjoitettu HTML:llä useampia vuosia Aiemmissa HTML versioissa ollut o muotoiluun liittyviä elementtejä ja attribuutteja o esim <font>, <br> ja <center> o HTML5 versiosta ne on poistettu o kaikki muotoilutieto annetaan erillisissä CSS tyylipohjadokumenteissa, CSSmuotoilusääntöinä (poikkeus: taulukon border attribuutti).

3 Eivät ole tyylipohjakielen eri versioita, vaan kerroksia o ts. uusi CSS kerros on aina tuonut kieleen lisää tyylisääntöjä Vaiheet o ensimmäisen kerroksen tyylisäännöt CSS1 julkaistiin vuonna 1996 o CSS2 julkaistiin jo heti sen jälkeen 1997 korvatiin tarkistetulla versiolla CSS2.1. o CSS2.1 kehitystyö saatettiin päätökseen W3C Recommendation CSS2.1 julkistettiin kesällä 2011 o CSS3 kerrosta kehitetty jo vuodesta 1998, ajoittain kehittely ollut laimeaa o uusien selainten ilmaantuminen markkinoille, sai CSS3 kehityksen aktivoitumaan jälleen o CSS2.1:n saattaminen stabiiliin vaiheeseen kesti kauan CSS3:a ei enää haluttu kehittää isona monoliittinen kokoelma tyylisääntöjä CSS3 jaettiin useampaan moduuliin, joista kukin toteuttaa tiettyyn aihepiiriin liittyvät säännöt o CSS3 moduuleista on jo tällä hetkellä standardoitu: värit, nimiavaruudet, valitsimet ja mediakyselyt. o Neljännen tason moduuleitakin kehityksen alla (CSS4)

4 Tapa 1: suositeltavin tapa o erillinen *.css tiedosto o liitetään tiedosto HTML dokumenttiin otsikko osassa <link> elementin avulla. o usein järkevää kirjoittaa useampia tyylitiedostoja tiettyyn dokumentiin helpompi liittää vain kulloinkin tarpeelliset tyylitiedostot <!DOCTYPE html> <html lang="fi"> <head> <meta charset="utf 8" /> <title>sivun otsikko</title> <link rel="stylesheet" type="text/css" href="polku/perustyylit.css" /> <link rel="stylesheet" type="text/css" href="polku/navigointi.css" /> <link rel="stylesheet" type="text/css" href="polku/erityisettyylit.css" />...

5 Tapa 2: o suoraan HTML dokumentin otsikko osaan <style> elementtiä käyttäen o esimerkiksi dokumentin taustavärin ja vasemman marginaalin määrääminen seuraavasti <!DOCTYPE html> <html lang="fi"> <head> <meta charset="utf 8" /> <title>sivun otsikko</title> <style type="text/css"> body { background color:maroon; margin left:20px; p { color:white; </style>...

6 Tapa 3: o suoraan elementtiin style attribuuttia käyttäen (tällöin valitsin jää pois, koska kohde elementtiä ei tarvitse määritellä) <p style="color:sienna; margin left:20px"> This is a paragraph. </p> Tavat 1 3 eivät sulje toisiaan pois o yhteentörmäystilanteessa elementtiin kirjoitettu sääntö kumoaa otsikko osan säännön, joka edelleen kumoaa mahdollisen tyylitiedostossa annetun säännön

Tyylisääntö (Style rule) o valitsin (selector) o piirre (feature) o säännön esittely (declaration of a rule) Sama sääntö kohdistetaan useammalle elementille

7 Tyylisääntö (Style rule) o valitsin (selector) o piirre (feature) o säännön esittely (declaration of a rule) Sama sääntö kohdistetaan useammalle elementille h1, h2 { color: blue; Useita sääntöjä samalle elementille o /* kommentointi */ body { /* tekstin ja taustan väri */ color: purple; background color: silver;

8 Määrittää, mihin dokumenttipuun elementtiin tyylisääntö kohdistuu CSS2.1 valitsimet o hahmo (pattern), jota dokumenttipuusta haetaan o sääntö kohdistetaan elementtiin tai elementteihin, johon hahmonhaku sopii (pattern matching)

9 Elementtivalitsin (Type selector) on valitsimista yksinkertaisin o e hahmo sopii kaikkiin elementteihin <e> p { padding left: 10px; Valitsinlista o sama sääntö kohdistetaanuseanpaan elementtiin h1 { color: purple; font weight: bold; h2 { color: purple; font weight: bold; h1, h2 { color: purple; font weight: bold;

10 Sääntö halutaan kohdistaa tiettyihin elementteihin o eivät välttämättä samantyyppisiä o käytetään attribuuttia class elementtien ryhmittelyyn Esim. halutaan tärkeä teksti vahvennettuna ja punaisena o määritellään tärkeiden tekstien elementit kuuluvaksi luokkaan tarkea ts. annetaan niille attribuutti class="tarkea" <p class="tarkea"> Tämä kappale on kokonaisuudessaan aivan erityisen tärkeä. </p> <p> Tämä teksti on muuten ihan tavallista, mutta <span class="tarkea">huomaa erityisesti tämä tärkeä asia</span>. Joskus tärkeää voi olla koko kappale, jolloin piirre voidaan antaa koko <p> elementille, kuten seuraavasssa kappaleessa on tehty. </p> o ja määritellään luokan "tarkea elementeille haluttu sääntö.tarkea { color: red; font weight: bold;

11 Edellä kuvattujen valitsimien (elementti ja luokkavalitsin) yhdistelmä o elementin nimi.luokan nimi o sääntö kohdistuu annetun nimisiin elementteihin, jotka kuuluvat annettuun luokkaan h1.tarkea { color: maroon; font weight: bold; o kohdistuu vain h1 elementteihin, jotka kuuluvat annettuun luokkaan tarkea

12 HTML elementit voidaan myös nimetä yksilöllisesti o ja kohdistaa sääntöjä yksittäisiin elementteihin <h1 id="paaotsikko">koko JUTUN OTSIKKO</h1> o sääntö kohdistetaan tähän elementtiin käyttämälla id valitsinta o muodostuu # merkistä ja id attribuutin arvosta #paaotsikko { color: green; text align: center;

13 Kontekstinen valitsin (jälkeläisvalitsin, descendant selector) o muodostuu välilyönnillä erotetuista elementin nimistä o e1 e2 kohdistuu e1 elementtien sisällä oleviin e2 elementteihin o elementtilistassa voi olla enemmänkin kuin kaksi elementtiä (sama logiikka) ul li { font size: small; ul ul li { font size: x small; o huomaa ero pilkuin erotetun luettelon ja välilyönnein erotetun luettelon välillä o kontekstisessa valitsimessa voidaan elementin nimien sijasta käyttää myös class tai id attribuutteja ja kaikkien näiden yhdistelmiä td, em { font family: sans serif; font weight: bold; td em { font family: sans serif; font weight: bold; aside p.ingressi { font family: sans serif; color: blue;

14 Kohdistuu tietyn elementin lapseen o e1 > e2 kohdistuu kaikkiin elementteihin, joiden äiti on e1 li > strong { color:#f00; o sääntö kohdistuisi listan riveillä oleviin <strong> elementteihin o kuitenkin vain niihin <strong> lapsielementteihin, o ei hierarkiassa syvemmälle, esimerkiksi lapsenlapsiin <li> <strong>tähän tekstiin yllä oleva hahmohaku sopii</strong> <p> <strong>mutta ei tähän</strong> </p> </li>

15 Kohdistuu tiettyä elementtiä seuraavaan elementtiin o e1+e2 o elementeillä on siis sama äiti o elementin tulee seurata välittömästi elementtiä e1 h1+p {margin top: 14px; o ykköstason otsikkoa välittömästi seuraavaan kappaleeseen lisätään yläreunaan marginaalia 14 pikseliä.

16 Sovitetaan hahmoa elementin o attribuutin tai/ja o attribuutin arvon perusteella Seuraava sääntö kohdistuu p[dir] {color:#f00; o kappaleisiin, joilla on dir attribuutti (riippumatta attribuutin arvosta) p[dir=rtl] {color:#f00; o kappaleisiin, joissa tekstin kirjoitussuunnaksi on määritelty oikealta vasemalle p[class~=tarkea] {color:#f00; o kaikkiin niihin kappaleisiin, yksi attribuutin class arvoista on "tarkea" p[lang =en] {color:#f00; o kaikkiin kappaleisiin joiden attribuutin lang arvo alkaa kirjaimilla en (kuten en, en us, en gb, jne)

17 Pseudoluokkavalitsin kirjoitetaan elementin nimen perään kaksoispisteellä erotettuna o ei soviteta hahmoon elementin nimen, esiteltyjen attribuuttien eikä niiden sisältöjen vaan o jonkun muun elementin ominaisuuden perusteella o :link :visited :hover :active :focus :before :after :first letter :first line :first child :lang

18 Univeraalivalitsin *, sopii kaikkiin elementteihin o näkee harvoin käytettävän o itse asiassa se on käytössä koko ajan, mutta se jätetään kirjoittamatta näkyviin o jos universaalivalitsin on ainoa elementtivalitsin yksittäisessä valitsimessa, sen saa jättää pois.omaluokka *.omaluokka #osa 1 *#osa 1

19 Edellä lueteltujen valitsimien tehokkaan käytön opettelu on jo enemmän kuin perussivustojen toteuttamiseksi on välttämätöntä. Kolmostason valitsimetkin kuitenkin jo standardoitu o Merkkijonon hahmohaku valitsimet, joilla elementti voidaan valita sovittamalla merkkijonoa attribuutin arvon osaan (osamerkkijonoon, alkaa, loppuu, sisältää) o Rakenteelliset pseudovalitsimet, joilla haku tehdään dokumenttipuun rakenteen perusteella (juuri, n. lapsi, n. sisarus, ensimmäinen/viimeinen lapsi, lapsettomat elementit, jne.) o Käyttöliittymäelementtien pseudovalitsimet, joilla haku tehdään elementin tilan perusteella o Negaatio pseudoluokka, joka kohdistaa säännöt elementtiin, joka ei sovi annettuun hahmoon. o Sisaruspseudoluokka, jolla haetaan elementit jolla on sama äiti.

Samankaltaiset tiedostot

Edellinen luento o sisällön ryhmittelystä jatkoa o linkeistä (suhteelliset, absoluuttiset, sivun sisäiset) o taulukot o kuvat verkkosivulla

25.3.2014 Aulikki Hyrskykari Edellinen luento o sisällön ryhmittelystä jatkoa o linkeistä (suhteelliset, absoluuttiset, sivun sisäiset) o taulukot o kuvat verkkosivulla Tällä kertaa o Videotiedostot -