12. kesäkuuta 2021

Koodinurkka 3: Sivuston koostumus, muutamia CSS-komentoja

Seuraa blogin muutosta täällä!

Tällä kertaa pääsemme vihdoin leikkimään CSS koodilla! Tutustutaan kuitenkin aluksi siihen, millainen on bloggerissa tehtävän blogin peruskoostumus ja millä nimikkeillä mikäkin osuus tunnetaan koodin puolella. Emme lähde tutkimaan yksityiskohtaisesti jokaista elementtiä, mutta esittelen niitä sen verran että tiedätte mitkä ovat koodauksen kannalta tärkeitä elementtejä. Voit katsoa alla olevan kuvan suurempana tästä.

1. Body
Body on sivun "alku ja juuri". Sillä voi määrittää päätaustan värin, miten kaukana sisältö on sivuston reunoista, mikä on sivuston pääfontti, onko sisältö keskellä ja sivulla. 

2. Content-outer ja 3. Content-inner
Blogin reunat ja varsinaisen blogin pohja. Sivustoa tehdessä käytän itse mieluiten wrapperia, jonka säädöillä pidän "sivuston kasassa". Eli kaikki sivulla oleva sisältö, tulee wrapperin sisälle ja itse wrapper määrittää onko sivusto koko ruudun kokoinen, pieni kaistale keskellä, jne. Bloggerissa näillä on hauska leikitellä, koska niiden avulla pystyy saamaan esimerkiksi helposti tupla- tai vaikka triplareunat blogille. Olen tässä omassa blogissani hyödyntänyt tätä ominaisuutta ja pinkit reunat ovatkin itseasiassa content-outerin taustaväri. Musta, ohuempi reuna niiden sisäpuolella on taasen content-innerin reunaväri.

4. Header
Header sisältää kaikessa lyhykäisyydessään blogin otsikkokuvan ja mahdollisen kuvauksen.

5. Tabs-outer
Tämä sisältää navigaation, eli välilehdet, eli sivujen linkit. Rakkaalla lapsella on monta nimeä. Suosittelen käyttämään kuitenkin nimitystä navigaatio, joka on ammattikielen sana.

6. Main
Main on blogitekstit sisältävä osuus, joka sisältää monta tärkeää osuutta sisällään, mutta käydään niitä yksityiskohtaisemmin läpi myöhemmin, sillä editoimme niitä suhteellisen paljon. Main voi olla myös koko blogin, eli content-innerin levyinen, mikäli blogiin ei ole määritetty sivupalkkia ja se voi sijaita myös blogin oikealla puolella, mikäli sivupalkki on asetettu vasemmalle.

7. Sidebar-right-1
Sivupalkki. Mikäli se on määritetty vasemmalle, on sen nimi sidebar-left-1. Sivupalkkeja voi olla vierekkäin myös kaksi, jolloin nimet määrittyvät sidebar-right(/left)-1 ja sidebar-right(/left)-2. Sidebarin sisällä on mainin tavoin useampi tärkeä osuus, joihin syvennymme myöhemmin lisää.

8. Footer-outer
Yleisemmin käytetään vain nimitystä footer. Se sisältää useimmiten sivun tekijänoikeusmerkinnät ja tietynlaista sivupohjaa tehdessä footerilla on hyvinkin suuri merkitys koodauksen kannalta, koska sen avulla "lopetetaan" koodi. Bloggerissa footer sisältää nimenomaan tekijänoikeusmerkinnät ja kertoo kävijälle blogin olevan bloggerissa tehty. Tätä footeria ei pidä sekoittaa mainissa olevaan post-footeriin, joka toimii suurinpiirtein samaan tapaan lopettaen postauksen.

Nyt kun olemme käyneet hieman pääosuuksia sivustosta läpi, voimme avata teeman suunnittelytyökalun. Valitse vasemmasta valikosta Lisäasetukset ja sen pikkuvalikosta alimmaisena oleva Lisää CSS.

Aloitetaan päätaustan muokkaamisesta. Klikkaa Lisää yksilöity CSS ja liitä siihen seuraava koodinpätkä. Koodissa { -merkki aloittaa tyylin määrittelemisen ja } -merkki sulkee sen. Näiden väliin asetetaan komennot, esimerkiksi background on komento. Komennon jälkeen laitetaan : -merkki ja sen jälkeen komennon määritelmä, kuten alla olevassa esimerkissä määritelmänä on väri. Komento suljetaan ; -merkillä.

body {
    background: #ff0000;
}

Huomaat varmasti esikatselusta, että tausta muuttui kirkkaanpunaiseksi. Saman värin saa myös käyttämällä tekstiä red HEX-koodin sijasta. Voit tutustua lisää taustaväreihin täällä. Sivustolta löydät värien nimiä (esim. Red), HEX-koodeja (esim. #ff000) ja RGB koodit (esim. 255,0,0) Background on hyvin toimiva koodi sellaisenaan, jos haluaa asettaa taustalle monta eri asetusta. Jokaisen asetuksen voi myös tehdä hieman yksityiskohtaisemmin, esimerkiksi background-color komennolla voi muuttaa pelkkää taustaväriä ja background-image komennolla voi lisätä taustakuvan. Background komentoon voi kuitenkin lisätä nämä molemmat vaihtoehdot, jolloin koodi on ainakin omasta mielestä hieman selkeämpää kun asetuksia on vain yksi eikä miljoona. Muutetaan taustaväri seuraavaksi harmaaksi ja lisätään siihen yksi iso kuva.

body {
    background: #333 url(https://i.imgur.com/vVlKkPY.jpg);
}

Lisäsin kuvan Imguriin, joten voit huoletta käyttää vaikka samaa kuvaa testauksen aikana. Kuvasta näkyy tällä hetkellä vain taustan bokeh efekti, joka sinällään on toimiva taustakuva, mutta muutetaanpa hieman koodia jotta saamme kuvan näkyviin. Lisätään samalla muitakin komentoja koodiin, kerron niiden merkitykset alla.

body {
    background: #333 url(https://i.imgur.com/vVlKkPY.jpg) fixed no-repeat;
    background-size: 100% auto;
    background-position: center;
}

Lisäsin background kohtaan fixed no-repeat. Fixed tarkoittaa sitä, että kuva pysyy paikoillaan kun sivua rullataan. Jos otat tuon komennon pois, huomaat että kuva liikkuu sivun mukana. No-repeat taas merkitsee sitä, että kuva ei toistu Y- tai X-akselilla. Jos haluat että kuva toistuu, voit jättää tämän määrittämättä. Toistuvuuden voi määrittää myös pelkästään vaaka- tai pystysuuntaan seuraavalla koodilla:

background-repeat: repeat-y

Y-akseli toistaa kuvaa pystysuunnassa ja jos toiston haluaa vaakasuuntaan korvataan repeat-y komennolla repeat-x. Mutta palataan äsken lisättyyn koodiin. Background-size määrittää taustakuvan koon selaimessa. 100% auto tarkoittaa sitä, että kuva on vaakasuunnassa täysin samankokoinen näyttösi kanssa ja pystysuunnassa kuvan koko määrittyy automaattisesti leveyden mukaan. Jos haluat määrittää kuvan korkeuden olevan sama kuin näytön korkeus, tulee komento laittaa auto 100%. Koodin viimeinen komento background-position määrittää missä kohtaa näyttöä taustakuva on. Tähänkin on erilaisia variaatioita.

Muokataan seuraavaksi content-outeria ja content-inneriä. Mutta ensin sananen sellaisista määrityksistä kuin div ja class. Molempia pystyy editoimaan CSS-tyylitiedostossa, mutta niillä on kuitenkin selkeä ero.

Div on ns. laatikko sivulla, jolle voidaan määritellä leveys, korkeus, läpinäkyvyys, fontti, taustaväri, jne. Class on tyyli, jolle voi määritellä aivan samat asiat. Ero näillä on se, että diviä voi muokata classilla, mutta classia ei voi muokata divillä. En ole aiemmin joutunut näitä eroja selittämään, joten toivottavasti saat näistä jotain irti.

Classin voi liittää myös muualle, kuin vain diviin. Sillä voi editoida esimerkiksi vain tietyn kappaleen tekstistä, muuttaa yksittäisen linkin värit, yms. Ylipäätään sillä voi yksilöidä samankaltaisia elementtejä eroamaan toisistaan. Suosittelen lukemaan esimerkiksi tämän sivun tekstin, siellä asia on selitetty melko hyvin. CSS-tyylitiedostossa div merkitään #divin_nimi ja class .classin_nimi. Content-outer ja content-inner ovat bloggerissa tyylejä, joten niiden eteen lisätään piste.

.content-outer {
    background: #fff;
    border-radius: 10px;
}

.content-inner {
    border-radius: 10px;
    border: 1px solid black;
    background: rgba(0,0,0,0);
}

Ensimmäisenä lisäsin content-outeriin taustavärin, koska tein content-innerin läpinäkyväksi. Koodilla rgba(0,0,0,0) luodaan musta väri, joka on täysin läpinäkyvä. Väri määrittyy siten, että nollat ovat järjestyksessä vasemmalta oikealle seuraavat: Punainen, vihreä, sininen. Viimeinen nolla on alpha ja sillä määritetään läpinäkyvyys asteikolla 0-1. Kuten todettua, 0 on täysin läpinäkyvä ja 1 läpinäkymätön. Voit kokeilla tähän eri asteita, esim. 0.5. Muista tehdä määritelmä pisteellä, muuten koodi ei toimi. Voit myös muuttaa taustan sävyä, muuttamalla kolmen ensimmäisen nollan lukua 0-255 välillä. 0,0,0 on musta ja 255,255,255 on valkoinen.

Border-radius komennolla lisäsin reunoihin pyöreyden ja border lisää mustan reunusvärin. Voit kokeilla reunan erilaisia asetuksia täällä. Rullaat sivua alaspäin ja valitset vihreätaustaisen "Try it yourself" nappulan.

Muokataan tähän postauksen loppuun vielä hieman itse postauksia. Kuten sanoin aiemmin, main sisältää monta eri osuutta, joita pystymme muokkaamaan. Alla oleva .date-outer koskee aina yhtä kokonaista postausta. Tämän huomaa siitä, että laitoin postausten väliin 20px tyhjää tilaa, joka näkyy kohdassa margin-bottom.

.date-outer{
    font-size: 12px;
    border-radius: 10px;
    border: 0.01em solid rgba(0,0,0,0.3);
    box-shadow: 0px 2px 3px #000;
    margin-bottom: 20px;
    padding: 20px;
    background: url(https://i.imgur.com/O7N80dW.png);
    background-position: top center;
}

Koska lisäsin postauksiin toistuvan taustakuvan, jossa on paljon pieniä osia, päätin hieman suurentaa fonttia (aiempi oli 11px). Halusin myös lisätä erilaisen leveysmääritelmän, jotta näet miten paljon erilaisia vaihtoehtoja on olemassa. Border kohdassa olen nyt määrittänyt leveyden em määritelmällä, joka on hieman tarkempi kuin px. Voit kokeilla tätä ominaisuutta jo aiemmin linkitetyssä W3schoolissa.

Box-shadowlla tein pienen varjon postaukseen. Määritykset tarkoittavat seuraavia:
0px: Kuinka paljon sivuun varjo siirtyy (esim. 5px siirtää sitä oikealle, -5px vasemmalle)
2px: Miten paljon varjo siirtyy pystysyynnassa (5px siirtää sitä alemmas, -5px ylemmäs)
3px: Varjon koko

Margin-bottom tekee postauksen alapuolelle tilaa. Jos siinä olisi pelkästään margin, tekisi se yhtä paljon tilaa postauksen joka reunalle. Tilan olisi voinut määrittää myös ylös komennolla margin-top. Paddingissa määritelmät ovat samat, eli sen voi myös asettaa top, bottom, left tai right. Erona marginiin on se, että padding tekee tyhjän tilan postauksen sisäpuolelle, kun margin tekee sen ulkopuolelle. Huomioitavaa on myös se, että mikäli laatikolle on annettu tietty leveysarvo, esim. 500px ja korkeudeksi vaikkapa myös 500px, laittamalla tyyliin esim. padding: 20px; tulee laatikon kooksi 540 x 540. Margin sen sijaan pitää laatikon saman kokoisena.

Siinä kaikki tällä kertaa. Seuraavassa koodinurkassa ei käsitellä koodausta, vaan teen pyynnöstä postauksen siitä, miten bloggeriin luodaan blogi, sillä kaikille koko blogin luominen ei ole tuttu asia.

Ei kommentteja:

Lähetä kommentti