AVOIMET

• Apache
• ASP
• Cold Fusion
• CSS
• DHTML & DOM
• JSP ja servletit
• JavaScript
• Konehuone
• Multimedia
• .NET
• Internet-markkinointi
• Perl
• PHP
• SQL
• VBScript
• XHTML
• XML

REK. KÄYTTÄJILLE

• ActionScript 2.0
• ASP
• Apache
• Dreamweaver MX
• Flash
• Flash Lite 2.0
• Java
• MySQL
• MS Access
• MS IIS
• PHP
• SQL
• XSL

FAQ / UKK

• FAQ

PALVELUT YRITYKSILLE

• Hakukoneoptimointi
• Hakusanamainonta
• Kotisivut
• Koulutus ja kurssit

PALVELUT YKSITYISILLE

• Soittoäänet ja muu mobiiliviihde

CSS-opas

 

Johdatus tyylikieliin ja CSS:n historiaan

CSS (Cascading Style Sheets) on yksinkertainen tyylikieli, jonka avulla määritellään HTML, XHTML ja XML -dokumenttien ulkoasu ja esitystapa. Muiden tyylikielten (DSSSL ja XSL) tapaan CSS:n olemassaolon syynä on asiakirjan esittämiseen liittyvien ohjeiden erottaminen varsinaisesta asiakirjan sisällöstä ja rakenteesta.

Web-kehityksessä käytettävien tyylikielten kohdalla valinta suoritetaan yleensä CSS ja XSL-kielen välillä. Kumpaa siis tulisi hyödyntää? Alla olevaa taulukkoa tarkastelemalla käy selvästi ilmi, että CSS-kieltä tulisi hyödyntää jos haluaa työskennellä tavallisten web-sivujen kanssa, sen sijaan jos tavoitteena on XML-pohjaisten web-sovellusten työstäminen, on XSL-tehokkaampi optio.

	CSS	XSL
Voidaan käyttää HTML/XHTML-dokumenttien ulkoasun määrittämiseen?
Voidaan käyttää XML-dokumenttien ulkoasun määrittämiseen?
Voidaan käyttää muuntamaan dokumentin rakenne ja sisältö toiseen muotoon
Syntaksi / kieli	CSS	XML

Tyylimäärittely on joukko jollain tyylikielellä, kuten CSS tai XSL, kirjoitettuja lauseita, jonka avulla määritellään dokumentin esitys/asettelumalli ja ulkoasu.

CSS:n kehitystyö alkoi 1990-luvun puolivälissä kun kävi ilmeiseksi, että HTML-kieli enää vastannut sille asetettuja vaatimuksia. Selainsodan (Netscape vs. Internet Explorer) riehuessa huipussaan, molemmat selainvalmistajat lisäsivät HTML-kieleen selainkohtaisia piirteitä, joiden avulla voitiin määritellä mm. tekstin ulkoasu, erilaisia korostuskeinoja jne. Lopputuloksena oli sivustojen toimimattomuus eri selaimilla sekä HTML-kielen jakaantuminen selainkohtaisiin versioihin.

Ratkaisuksi tähän kaaostilanteeseen kehitettiin CSS, jonka tavoitteena oli

• HTML-kielen rakenteellisuuden palauttaminen ja selainkohtaisten HTML-murteiden poistaminen. Tämä tavoite on saavutettu on hyvin pitkälti XHTML-kielen myötä.
• Erillisten muotoiluelementtien (kuten <font>) poistaminen HTML-kielestä. Tämä tavoite on saavutettu hyvin pitkälti vasta XHTML-kielen myötä, sen sijaan HTML-kielen (toistaiseksi) viimeinen versio 4.0 ei tähän pystynyt.
• Yhtenäinen - selaimesta, käyttöjärjestelmästä ja mediasta riippumaton - tapa määritellä web-dokumenttien ulkoasu. Tämä tavoite on saavutettu hyvin pitkälti, tosin selaimissa on hyvin paljon eriasteisia toteutuksia / bugeja.

Esimerkki. Ylemmällä rivillä oleva HTML-koodi sisältää muotoiluun erikoistuneita komentoja tuottaakseen 12pt lihavoitua tekstiä punaisella Verdana-fontilla, alapuolella oleva XHTML-koodi ainoastaan viittaa CSS-tyylimäärittelyn luokkaan nimeltä huom. CSS:n käytön avulla on mahdollista vähentää sivun esittämisessä tarvittavan HTML/XHTML-koodin määrää jopa 60%.

 <p><font face="Verdana" color="red" size="12pt"><b> Tärkeä kommentti! </b></font></p>


 <p class="huom">Tärkeä kommentti!</p>   

CSS-tyylimäärittely voi sijaita joko ulkoisessa CSS-tyylitiedostossa, tai olla upotettu osaksi HTML/XHTML tai XML-dokumenttia. CSS-tyylitiedoston tiedostopääte on ".css".

Tutustu artikkelin muihin osiin:
»»» CSS »»»Johdatus tyylikieliin ja CSS:n historiaan
»»» CSS »»»CSS-kielen eri versiot

Tallenna tämä sivu kirjanmerkkeihin!