9. Tehtävä - CSS:n perusteet

Tässä opintojaksossa opitaan CSS-kielen perusteet. Edistyneemmät ominaisuudet ja CSS3 käsitellään 2. vuoden kurssilla Web-sovelluskehitys.

Mihin CSS -muotoilukieltä tarvitaan?

CSS -muotoilukielellä (tästä eteenpäin pelkkä CSS) käytetään kaikkien HTML -elementtien muotoilemiseen. Tyypillisiä muutoksia ovat esimerkiksi elementin koon asettaminen (width ja height), taustavärin asettaminen, tekstityypin (fontin) muuttaminen, elementin siirtäminen ruudulla ja niin edelleen.

CSS:n käyttötarkoitus

Tähän saakka olemme tehneet elementtien muotoilut suoraan elementtiin, tarkemmin sanottuna elementin style –attribuuttiin. Tämä toimii, mutta on hieman ‘rumaa’, sillä on huomattavasti selkeämpää tehdä merkinnät omaan css –tiedostoonsa.

Tyypillisesti suunnittelemme ja toteutamme kokonaisia sivustoja kerralla, jolloin kaikki sivuston sivut ovat päällisin puolin saman näköisiä. Mikäli tekisimme kaikille sivuille muutokset aina style -määreen sisään, pitäisi meidän käydä läpi kaikki sivuston sivut silloin kun teemme pienen muutoksen ulkoasuun (esimerkiksi taustakuvan vaihtaminen tai linkkien värin vaihtaminen selkeämmäksi).

Mikä tämä ‘CSS’ sitten on?

CSS, Cascade Style Sheet, on muotoilukieli, jota olemme jo käyttäneet. Käytännössä kaikki mitä olemme Style –määreen sisään kirjoittaneet on ollut puhdasta CSS:ää.  Sillä kerrotaan millainen on juuri se elementti, jota haluamme muokata. Tähän asti tämä on ollut selvää, sillä style on vaikuttanut ainoastaan siihen samaan elementtiin, jota työstämme sillä hetkellä.


Yksilöivä kenttä, "ID"

CSS:ää varten meidän pitää ratkaista se miten määritämme yksittäisen elementin, ennen kuin voimme siirtyä kirjoittamaan CSS –tiedostoon tietoja.

Käytännössä tämä elementin yksilöinti tapahtuu HTML –tiedostossa kyseisen elementin kohdalla. Elementille annetaan uusi attribuutti nimi, tunnistekenttä (engl. Identifier).

Käytännössä siis näin:

<div id =”nimi_tahan”>
</div>

 

HUOM!

id EI SAA:

  • Alkaa numerolla

  • Sisältää välilyöntiä (korvaa tarvittaessa välilyönti alaviivalla esimerkiksi_näin.

  • Sisältää erikoismerkkejä ( esim. piste, pilkku, huutomerkki, risuaita, kysymysmerkki jne.)

CSS -tiedoston luonti

Uusi css –tiedosto luodaan aivan samalla tavalla kuin uusi html –tiedostokin. Ainut ero on, että valitset tiedostopäätteeksi .html:n sijaan .css.

Nimeä tiedosto ja tallenna se samaan kansioon html –tiedostojesi kanssa.

Esimerkki notepad ++ -ohjelmassa

  1. paina yläkulmasta file -> new

  2. Tallenna tiedosto nimellä (‘save as’)

  3. Anna tiedostolle nimi ja tallenna se tiedostomuotoon ‘cascade style sheet’ ( .css )

 

CSS –tiedoston käyttäminen

CSS-tiedostoa voidaan käyttää siten, että selaimelle kerrotaan tässä käytettävän CSS:ää.

Lisää siis tämä rivi oman HTML –tiedostosi <head> -elementin sisälle ja muuta viitteenä oleva tiedoston nimi vastaamaan omaa tiedostonimeäsi.

<head>
   <link rel="stylesheet" href="oma_nimeamasi_CSS.css">
</head>


YouTube-video



Tehtävä:

Edellisessä tehtävässä teimme itseoppimistehtävänä kolmiosaisen keskitetyn sivuston. Sivustolla on rakenteeltaan kolme käytännössä täysin identtistä sivua. Tämän tehtävän tarkoituksena on muokata tuota sivustoa siten, että tyylimäärittelyt siirretään CSS –tiedostoon HTML tiedostoista.

 

Tee sivustolle oma CSS tiedosto. Esimerkiksi keskitettysivu.css.

  1. Linkkaa tiedosto kaikkiin kolmeen sivuston sivuun.

    1. Linkkaaminen tapahtui HTML –tiedoston head osassa.

    2. Kirjoita sinne rivi: <link type="text/css" href="keskitetty.css" rel="stylesheet" />

  2. Ala käymään ensimmäistä sivua läpi ylhäältä alas.

  3. Aina kun vastaan tulee elementti, jossa on STYLE attribuutti, anna sille elementille kuvaava nimi (esim: uloin, banneri, keskusta, menu, ekalinkki jne.. )

  4. Leikkaa kaikki style:n sisältö talteen ( ctrl + x)

  5. Mene CSS tiedostoon ja tee sinne uusi sääntö

  6. Koska annoit elementille nimen, voit yksinkertaisesti viitata risuaidalla siihen CSS:n puolella. (esimerkki alla)

  7. Kirjoita risuaidan jälkeen antamasi nimi, kirjoita aaltosulut ja liitä (ctrl+v) leikkaamasi sisältö. Tarkista ettet vahingossa liittänyt ylimääräisiä merkkejä, kuten lainausmerkkiä ’ ” ’.

  8. Tarkista että sivu toimii vielä päivittämällä se selaimessa ( paina F5 –näppäintä )

  9. Poista HTML:n elementistä style –teksti ja siihen liittyvät muut merkit ( =”” )

  10. Siirry seuraavaan elementtiin ja toista kohtia 3-7

  11. Kun kaikki elementit on käyty läpi, muista tallentaa.

  12. Käy läpi jokainen elementti ja anna niille ID:t, jotka ovat samat kuin ensimmäisessä läpikäydyssä sivussa.

  13. Poista style-määre ja stylen sisältö

  14. Seuraavat sivut ovat huomattavasti nopeampia käydä läpi, sillä niihin pitää vaan merkitä ID:t vastaamaan ensimmäisen sivun ID:tä. Stylet voi poistaa suoraan sisältöineen, sillä stylen sisällöt on jo kopioitu talteen.

  15. Käy läpi molemmat sivut ja tarkista että sivu toimii yhä päivittämällä selaimesi ( painamalla F5 )

Esimerkki:

#uloin {
width:900px;
height 900px;
margin-left:auto;
margin-right: auto;
background-color:grey;
margin-top:20px;
}
Comments