CSS

2016/06/16
html css

HTML5 ja CSS3 Osa 10: Pseudo-luokat

Pseudo-luokat (pseudo-class) Osaat jo tehdä linkkejä sivuillesi, mutta niiden oletus-ulkoasu saattaa olla epäsopiva muuhun designiin nähden. Onneksi niitä voi tyylitellä, sillä <a> on tagi siinä missä muutkin. a  { color: red; background-color: yellow; } Linkit ovat kuitenkin hieman monimutkaisempia, sillä niillä on eri (neljä kpl) tilaa: Normaalitila, Vierailtu ja tila, jossa hiiri linkin päällä, mutta ei vielä napsauteta ja harvemmin käytetty aktiivinen tila. Nyt kun teet a-tagille tyylin, käytetään sitä kaikissa näissä […]
2016/05/24

HTML5 ja CSS3 Osa 9: Div ja Span

Nämä kaksi ovat hyviä kandidaatteja edellisessä osassa opetelluilla id:llä ja classilla muotoiltaviksi, sillä niillä ei ole mitään ennalta määrättyä tarkoitusta. Ennen HTML5:n uusia rakenne-elementtejä (näistä myöhemmin lisää) käytettiin diviä todella paljon sivun asetteluun, ja sillä on yhä paikkansa, jos et pysty käyttämään jossain kohtaa uusia elementtejä. (Voit lukea siitä lisää HTML Doctorin sivulta.). Käytä kuitenkin uusia rakenne-elementtejä aina kun pystyt, ne tuovat mukanaan myös merkityksen! Kaksi viimeistä kappaletta muotoiltu divin avulla alla olevassa […]
2016/04/13
html css

HTML5 ja CSS3 osa 8: class ja ID

Luokka eli class ja ID Edellisessä osassa opimme muotoilemaan tekstiä. Ja ottaa säännöt käyttöön esim kappaleessa. Mutta mitä jos haluaisimme tehdä yhden kappaleen, jossa on erilainen ulkoasu kuin sen alla olevassa kappaleessa? Ratkaisuja on parikin, mutta aloitetaan luokalla. Luokan eli classin hyvä puoli on, että useampi elementti voi jakaa saman luokan. Tehdään ensin tyyli esimerkkimme ekaa kappaletta varten. Luokan nimi alkaa aina pisteellä, mutta itse nimi voi olla mitä vain. .eka { color: red; […]
2016/02/22
html css

HTML5 ja CSS3 osa 7: Tekstin ulkoasu

Tekstin ulkoasu (font-family) Aloitetaan fontista. Asetetaan pääotsikon fontiksi Verdana: h1 { font-family: Verdana, Arial, sans-serif; } Säännöissä kannattaa hyödyntää mahdollisuutta lisätä yksi varafontti, mikäli ekaa vaihtoehtoa ei löydy (tässä siis toivotaan Verdanaa, mutta jos käyttäjän koneelta ei sitä löydy, käy myös Arial) ja jos Arialiakaan ei löydy, käy mikä tahansa päätteetön fontti (sans-serif. Pelkkä serif on päätteellinen fontti). Fontteja, jotka löytyvät melkein koneelta kuin koneelta on vain kymmenkunta ja nekin vaihtelevat Mac/Win koneilla. […]
2016/01/20
html css

HTML5 ja CSS3 osa 6: CSS alkaa

Pääsemme vihdoin CSS:n pariin. Homma käynnistyy esittelyllä ja värien käytöllä. Nyt meillä on HTML:n avulla rakennettuna sivu, jolla kuvia, lomake ja tekstiä. Tulos on aika ”ruma”, koska nykyään sivujen ulkoasua ei enää säädellä erilaisten tagien kautta, vaan käyttämällä Cascading Style Sheetseja, tyylitiedostoja eli CSS:ää. Sen avulla mm. värien vaihtaminen, taustakuvien asettaminen, reunusten tekeminen ja tekstin ulkoasun muuttaminen on todella kätevää ja helppoa. CSS:n avulla järjestelet myös kaikki elementit haluamallasi tavalla sivulla. Yleisin […]
2016/01/04
html css

HTML5 ja CSS3 osa 5: Lomake

Tässä osassa tutkitaan lomakkeen tekemisen salat Lomakkeen avulla voit olla yhteydessä käyttäjän kanssa. Voit kerätä sen avulla mm. tietoa tai käyttäjä voi lähettää palautetta tai tilata sinulta jotain. Lomake esitetään <form></form> tagilla. Kaikki lomake elementit, kuten tekstikentät, pudotusvalikot ym sijoitetaan aloittavan ja päättävän form-tagin sisään. <form action=""> <input type="text" name=”etunimi” id=”etunimi”  value="Kirjoita tähän etunimesi" /> </form> actionin avulla ilmaistaan mitä tulisi tapahtua, kun lomake lähetetään. Saat nämä tiedot palveluntarjoajaltasi, joten jätetään kohta […]