- Tervetuloa tutustumaan töihini ja blogin kuvitus- ym ohjeisiin!
HTML5 ja CSS3 osa 6: CSS alkaa
Tuts+ suomennos: GIF-animaatiosta makro
2016/01/12
Tuts+ suomennos: Luo siveltimiä Photoshopissa
2016/01/21HTML5 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 ja suositeltavin tapa käyttää CSS:ää sivuilla, on tehdä erillinen tiedosto ja linkittää se HTML-tiedostoon sivun head-osiossa. Tämän avulla on kätevää yhtenäistää sivuston ulkoasu; linkitetään vain sama tiedosto kaikkiin sivuihin! Myös muutosten teko on helppoa: Haluatko kaikki h1-tason otsikot mustan sijaan sinisiksi? Tee muutos tyylitiedostoon ja väri vaihtuu kaikissa otsikoissa niillä sivuilla, joille css-tiedosto on linkitetty.
<link rel="stylesheet" type="text/css" href="tyylitiedosto.css" />
Toinen tapa on kirjoittaa tyylisäännöt suoraan head-osioon style-tagilla. Silloin ne koskevat vain kyseistä html-sivua ja jos käytössä on myös ulkoinen tiedosto, yliajaa tämä tapa yhtäläisyydet.
<style type="text/css"> tähän väliin tyylit </style>
Kolmas, vähiten suositeltava tapa on kirjoittaa tyylisääntö suoraan sivulla olevan tagin yhteyteen lisäämällä style jonkin tagin nimen perään. Tämä on kaikkein ”voimakkain” tapa, se yliajaa kaksi edellä mainittua, jos yhtäläisyyksiä ilmenee.
<p style="color:red;">
Tässä on punainen kappale
</p>
Lähdetään liikkeelle väreistä. Nythän teksti on oletuksena mustaa. Vaihdetaan ensimmäiseksi pääotsikkojen, eli <h1>-tagia käyttävien otsikkojen väri punaiseksi. Avaa uusi dokumentti Muistioon ja kirjoita:
h1 {
color: red;
}
Säännön voisi kirjoittaa yhteen pötköönkin, mutta tämä tapa on selkeä ja yleisin. Ensin määritellään valitsin (h1) ja sille ominaisuus (color eli väri) ja lopuksi ominaisuuden arvo (red eli punainen) jotka suljetaan kaarisulkeiden sisään. Jokaisen ominaisuuden jälkeen kaksoispiste ja ominaisuus+arvo parin jälkeen tulee laittaa puolipiste. Kirjoita aina pienillä kirjaimilla. Voit asettaa valitsimille useita ominaisuuksia samaan sääntöön, esim:
h1 {
color: red;
background-color: green;
}
Mutta tallennetaan tämä mini-tyylitiedostomme nimellä tyylitiedosto.css samaan kansioon ekasivu.html:n kanssa:
ja linkitetään se sitten ekasivu.html:ään: (Huom. Kun avaat Muistiossa tiedostoja, saattaa olla ettet näekään tekemiäsi html/css tiedostoja kansiossa. Vaihda silloin Avaa-ikkunassa Muoto-kohtaan ”Kaikki tiedostot”)
<head>
<link rel="stylesheet" type="text/css" href="tyylitiedosto.css" />
<meta charset="UTF-8">
<title>Eka html sivuni ikinä!</title>
</head>
Kun päivität tai avaat nyt sivun, pitäisi kaikkien h1-otsikoiden olla punaisia:
Kun määrittelet värejä, voit käyttää joko 16 perusväriä nimeltä (red, blue jne), värien Hex-arvoja (#0000FF) tai RGB-arvoja (rgb(255, 255, 0))
Laitetaan vielä css-tiedostoon toinen tyyli koko sivun taustalle. Vaihda tilalle haluamasi väri.
body { background-color: #b0c4de; }
Eri värejä on helppo kokeilla ”suunnittelemalla selaimessa”. esim Chromessa voi napsauttaa sivun/elementin päällä hiiren kakkosella ja valita valikosta ”tarkastele elementtiä”:
Kun nyt haluaa kokeilla jotain toista väriä h1-otsikolle, napsauttaa vain oikealla pientä värineliötä ja aukeaa paletti. Näin voi käsitellä muistakin elementtejä kaikkien tyylien osalta, eikä siis vain värejä, vaan kaikkia ominaisuuksia. Muutokset eivät tallennu alkuperäiseen css-tiedostoon. (Kopioi jos tykästyt).
CSS3 toi mukanaan tuen alpha-kanaville, eli läpinäkyvyydelle (0.0-1.0): p {background-color: rgba(255, 0, 0, 0.3);} Voit myös määrittää värejä hsla arvojen mukaan (väri, kylläisyys, valoisuus, alpha): hsla(0, 100%, 50%, 0.3);
Hyvän HSL/RGB(A)/HEX värivalitsimen löydät linkistä: Color picker tool
Liukuväritkin ovat mahdollisia mutta ongelmana kattavan selaintuen puuttuminen. Tämän vuoksi eri selaimia varten pitää lisätä selainkohtaiset määrittelyt. Sekään ei auta IE9 ja aiempien kohdalla, ne eivät tue liukuja ollenkaan.
HUOM. Esimerkissä käytetty <div> tagia. Sekin on meille uusi tuttavuus. Div oli ennen HTML5:a suuressa suosiossa, sillä koska div-elementillä ei ole varsinaista rakenteellista erityismerkitystä, voidaan sitä käyttää lohkojen (sivun yläosa, alaosa jne) tekemiseen. Nykyään HTML5:n uudet rakenne-elementit ovat korvanneet divit monessa kohdassa (esim. header, footer, nav).
<head>
<style>
#liuku {
height: 200px;
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 > 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 > 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 > 15 */
background: linear-gradient(red, blue); /* Standardi, aina viimeisenä */
}
</style>
</head>
<body>
<div id="liuku"></div>
</body></html>
