CSS

CSS-TYYLEIHIN LIITTYVÄÄ KOULUTUSTA VUONNA 2025!

Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi heti! Koulutuksen järjestää asiantuntijasi Koulutus- ja konsultointipalvelu KK Mediat.

CSS:n @-säännöt – yleiskatsaus

CSS:n @-sääntöjen avulla voidaan kohdistaa tyylisääntöjä tiettyyn tarkoitukseen, kuten tyylitiedostojen tuomiseen, median rajaamiseen tai web-fonttien lataamiseen.

@-säännön rakenne

@-säännöt alkavat aina @-merkillä, jota seuraa välittömästi määrite, joka kertoo säännön tarkoituksen. Lisätietoa ja esimerkkejä näistä alla olevassa listauksessa:

@import-sääntö
@import-säännöllä voit tuoda ulkoisen CSS-tiedoston toisen tyylitiedoston alkuun. Tuodut tyylit yhdistetään osaksi päätyylitiedostoa CSS:n cascade-prosessin mukaisesti. @import-sääntö on sijoitettava tyylitiedoston alkuun. Suorituskykysyistä @import-säännön käyttöä ei yleensä suositella (normaali link-elementti on useimmiten parempi vaihtoehto).
@media-sääntö
@media-säännön avulla CSS-tyylimäärittelyt voidaan kohdentaa määrättyyn mediaan, esim. tulostukseen tai näytölle. @media-sääntöön on mahdollista liittää mediakysely (eli media query) - tämä on olennainen osa responsiivista web suunnittelua.
@page-sääntö
@page-säännön avulla voidaan säätää tulosteen marginaaleja, paperikokoa tai muita tulostukseen liittyviä ominaisuuksia.
@font-face-sääntö
@font-face säännön avulla voidaan ladata ja käyttää web-fontteja. Web-fonttien ansiosta verkkosivujen typografia ei ole enää rajoittunut perinteisiin järjestelmäfontteihin kuten Arial, Helvetica tai Times New Roman.
@charset-sääntö
@charset-sääntö määrittää CSS-tiedostossa käytettävän merkistön enkoodauksen (pääsääntöisesti UTF-8). Useimmissa käyttötapauksissa CSS:n merkistöä ei tarvitse erikseen asettaa.

At-sääntö loppuu aina joko puolipisteeseen tai @-esittelylohkon lopetusmerkkiin (}).

Useimmat @-säännöt ovat hyvin tuettuja moderneissa selaimissa. Vaikka vanhemmat mediatyypit, kuten aural tai tty, ovat edelleen osa spesifikaatiota, niiden selaintuki on jo poistumassa.

@import ja ulkoisen tyylitiedoston tuominen

Esimerkki: 


@import url(tyyli.css);

@import-säännön ensisijainen tarkoitus oli estää vanhoja selaimia lukemasta moderneja tyylimäärittelyjä. Nykyisissä selaimissa alla esitetty ratkaisumalli ei ole enää tarpeen: 

...
<style type="text/css" media="all">
<!--
@import url(tyyli.css);
-->
</style>
...

@charset ja merkistön määrittely

Esimerkki: 


@charset "UTF-8";

@font-face – Mukautetut fontit käyttöön

Esimerkki: 


@font-face {
  font-family: 'MyFont';
  src: url('fonts/myfont.woff2') format('woff2');
}

Artikkelisarjan seuraavassa osassa tutustumme tarkemmin @media-sääntöön ja mediaqueryjen rooliin responsiivisessa web-suunnittelussa.

Artikkelin tiedot

Otsikko: CSS:n @-säännöt – yleiskatsaus

Kuvaus: Katsaus CSS:n @-sääntöihin ja niiden keskeisiin käyttötapoihin kuten tyylien tuontiin, mediarajauksiin ja web-fonttien lataamiseen.

Julkaisija: Koulutus- ja konsultointipalvelu KK Mediat

Viimeksi päivitetty: