CSS-tyylitiedosto
CSS-tyylitiedosto
CSS-tyylitiedoston teko |
| Luo resurssienhallinnassa tyyli.css kotisivujen kansioon klikkaamalla hiiren oikealla näppäimellä ja valitsemalla Uusi --> Tekstitiedosto. Varmista, että Näytä-valikossa on ruksi kohdassa Tiedostotunnisteet (ks. kuva alla). Kopioi Listamaticista valitsemasi navigoinnin CSS-osuus tyyli.css-tiedostoon ja tallenna Tiedosto --> Tallenna (ctrl + s) . Lisää nettisivun html-koodin rivi < link rel="stylesheet" href="tyyli.css" type="text/css" > < HEAD>< /HEAD> -tagien väliin (muista poistaa ylimääräiset välilyönnit < merkkien jälkeen) |
CSS - tietoa |
| CSS:n avulla www-sivujen muotoilu helpottuu huomattavasti. CSS-tiedostossa määritellään www sivuston muotoilut ja itse sisältö löytyy HTML-tiedostosta. CSS:n voi sisällyttää HTML-tiedostoonkin, mutta em. mainittu tapa on selkeämpi. Esimerkki otsikkotyylin 1 muotoilusta CSS-tyylitiedostossa: h1 { text-align: left; /* tasaus vasemmalle */ margin-left: 0.5em; font-weight:bold; /* lihavointi */ Kommentoi CSS-koodisi, jotta sen muokkaaminen on helppoa myöhemminkin. Kommentit tulevat /* ja */ merkkien väliin, ks. yllä. Esimerkkejä CSS-tyylitiedoston vaikutuksesta www-sivun ulkonäköön: http://www.cs.tut.fi/~jkorpela/vompatit/index.html (Vompattisivu) ASCII-art, eli kirjaimista, numeroista ja erikoismerkeistä piirretyt kuvat & logot ovat tuttuja tietokoneiden alkuajoilta. CSS antaa niillekin aivan uuden ilmeen. Katso vaikkapa merkkien O|\\|\\\\((8ooo((8oooo))boOoooooo)boOooooooooo///?????___???CCO avulla piirretty Homer Simpson: http://nedbatchelder.com/blog/200805/css_homer_animated.html . |
Linkit |
|||
|
