Yleiskatsaus
CSS:n perusteet
Lighthouse HTML:n ”koukut” CSS:ää varten
Yleiskatsaus
Muokattua CSS:ää (Cascading Style Sheets) voidaan käyttää kaikkialla Lighthouse Studiossa kyselytutkimuksen ulkonäön muokkaamiseen.
Oletusarvona tyyliasetukset ovat tyhjiä kaikkialla Lighthouse Studiossa. Jos esimerkiksi luot uuden kysymyksen ja napsautat Paintbrush-kuvaketta otsikon 1 kohdalla, kirjasinkokoa ei ole määritetty. Jos kysymystasolla ei ole määritetty fonttikokoa, käytetään ylemmällä tasolla määritettyä fonttikokoa. CSS:ssä on kaskadoituvat prioriteettitasot. Fonttikoko voidaan määrittää koko kyselyssä olevalle tekstille tai tietylle kysymykselle. Tietylle kysymykselle määritetty fonttikoko ohittaa tutkimustasolla määritetyn fonttikoon.
Lighthouse Studiossa on sisäänrakennettu CSS, joka ohjaa kyselytutkimuksen tyylejä. Alla oleva kaavio auttaa havainnollistamaan, miten CSS:ää käytetään Lighthouse Studiossa, ja havainnollistaa tyylin prioriteetin eri tasoja. Kysymystasolla määritellyt tyylit ohittavat tutkimustyylissä määritellyt tyylit. Kyselytyylissä määritellyt tyylit ohittavat perustyylitiedostossa ssi_style.css määritellyt tyylit.
CSS:n perusteet
CSS tulee sanoista Cascading Style Sheets. CSS:n avulla voit muokata verkkosivujen HTML:n tyyliä (taustaväriä, kirjasintyyliä, välejä jne.). CSS:n avulla voit erottaa tyylin verkkosivun rakenteesta.
CSS voidaan määritellä HTML-elementtien sisällä. Esimerkiksi:
<p style=”color: green;”>
Vastaathan alla oleviin kysymyksiin.
</p>
CSS ”color: green;” muuttaa tekstin värin <p>-tagin sisällä vihreäksi. Tämä tyyli voidaan erottaa <p>-tagista. Seuraavat ohjeet:
<style type=”text/css”>
p
{
color: green;
}
</style>
<p>
Vastaathan alla oleviin kysymyksiin.
</p>
muuta kaikki sivulla olevien <p>-tagien sisällä oleva teksti vihreäksi.
Esitetään, että sinulla on useita verkkosivuja ja haluat, että kaikkien sivujen kaikkien <p>-tagien sisällä oleva teksti on vihreä. Voit luoda erillisen tekstitiedoston nimeltä ”mystyle.css”, joka sisältää seuraavan CSS:
p
{
väri: vihreä;
}
Kunkin web-sivun yläosaan <head>-tagin sisälle sisällyttäisit tällöin:
<<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
Tämä ohjaa kaikkien verkkosivujen tyyliä yhdestä tiedostosta. Jos haluat vaihtaa värin vihreästä siniseksi, voit yksinkertaisesti muokata mystyle.css-tiedostoa. CSS:n käyttäminen tällä tavoin tekee tyylin muuttamisen kaikilla verkkosivuillasi paljon helpommaksi kuin tyylin määrittäminen jokaisella yksittäisellä sivulla. Ulkoisessa tiedostossa määritellyillä tyyleillä on alhaisempi prioriteetti kuin tyyleillä, jotka on määritelty verkkosivun <style>-tagissa. HTML:n sisällä ”style”-attribuutin sisällä määritellyillä tyyleillä on korkeampi prioriteetti kuin <style>-tagin sisällä määritellyillä tyyleillä.
CSS koostuu erilaisista tyyli-”säännöistä”, jotka määrittelevät, miten HTML:n ulkoasua muutetaan. Alla olevassa CSS-säännössä ”p” on valitsija ja ”color: green” on julistus.
p
{
color: green;
}
Valitsija määrittää, mihin HTML:n osaan julistus vaikuttaa. Deklaraatio koostuu ominaisuudesta ja arvosta, jotka on erotettu kaksoispisteellä. Useat ilmoitukset erotetaan puolipisteillä. Esimerkiksi:
p
{
color: green;
font-size: 18px;
padding: 10px;
}
Valitsin voi olla minkä tahansa HTML-elementin nimi. Esimerkiksi: p, div, span, table, tr, td jne. Sääntöön voidaan lisätä useita elementtejä pilkuilla erotettuna. Esimerkiksi:
div, p, td
{
väri: vihreä;
}
Ylläoleva CSS muuttaa <div>-, <p>- ja <td>-tavaramerkkien sisällä olevan tekstin väriksi vihreä. Voit myös määrittää, että vain <p>-tagien sisällä olevat <div>-tagit valitaan:
div p
{
color: green; /*Tekstin muuttaminen vihreäksi*/
}
Huomaa, että välilyönnillä erotetaan ”div” ja ”p”. Tämä osoittaa, että vain <p>-tagit <div>-tagien sisällä vaikuttavat. Huomaa myös kommentti ”Tee tekstistä vihreää”. CSS-kommentit ovat /*:n ja */:n välissä. Kaikki /*:n ja */:n välissä oleva teksti ei vaikuta CSS:ään.
Luokanvalitsin on tapa, jolla voit tunnistaa tiettyjä HTML-elementtejä. Oletetaan, että sinulla on seuraava HTML:
<div class=”header1″>
Minkä ikäinen olet?
</div>
Yllä olevalla <div>:llä <div>:llä on attribuutti nimeltä ”luokka”, jonka arvo on ”header1”. CSS:ssä luokka tunnistetaan laittamalla ”.” sen nimen eteen. Esimerkiksi
.header1
{
color: green;
}
Ylläoleva CSS tekee ”header1”-luokalla varustettujen tagien sisällä olevasta tekstistä vihreää. Lighthouse Studio käyttää luokanvalitsimia paljon. Luokkien tarkoituksena on tunnistaa yksi tai useampi elementti verkkosivulla. Jos on olemassa yksilöllinen elementti, joka on tunnistettu ”id”-merkillä, käytetään ”#”-merkkiä ”.”:n sijasta. Esimerkiksi:
<div>
Minkä ikäinen olet?
</div>
Tämän <div> valitsemiseen voitaisiin käyttää seuraavaa CSS:
#Q1_div
{
väri: green;
}
Lighthouse Studio sisältää monia luokkia ja tunnuksia luomassaan HTML:ssä, jotka auttavat sinua tunnistamaan sivun tietyt alueet. Voit sitten käyttää näitä ”class”- ja ”id”-nimiä CSS:ssäsi.
Lisätietoa CSS:stä löytyy osoitteesta http://www.w3schools.com/css.
Lighthouse HTML ”koukut” CSS:ää varten
Lighthouse Studio luo kyselysi HTML:n eri kysymystyyppien ja ohjelmassa määrittelemiesi asetusten perusteella. HTML sisältää ”class”- ja ”id”-attribuutteja monissa tageissa. Esimerkiksi otsikon 1 HTML näyttää tältä:
<div class=”header1″> Otsikon 1 teksti </div>
Yllä olevan <div>-tagin <div> ”class”-attribuutti yksilöi otsikon 1. Seuraavaa CSS:ää voidaan sitten käyttää Header 1 -tekstin värin muuttamiseen koko kyselyssä:
.header1
{
color: green;
}
Alhaalla olevassa kaaviossa on esitetty joitakin tärkeimpiä Lighthousen HTML:ssä esiintyviä luokkia.
Lisäisiä luokkia ja tunnuksia voi tutkia tarkastelemalla Lighthousen HTML:ää. Tämä voidaan tehdä käyttämällä selaimen ”View Source” -toimintoa.
Jotkut Lighthouse Studion HTML-elementit sisältävät useita luokkia ja id:n. On annettu erilaisia tapoja antaa CSS:n manipuloida kyselyn esitystapaa tai tyyliä. HTML-valintakysymyksen nimeltä ”Q1” HTML näyttää tältä:
<div class=”question select”>
…
</div>
>
Huomaa, että tälle <div>-tunnisteelle on määritetty kaksi luokkaa nimeltä ”question” ja ”select”.
Seuraava CSS muuttaa otsikon 1 tyyliä Q1:lle. Tämä ei vaikuta muihin kysymyksiin.
#Q1_div .header1
{
color: blue;
}
Ylläoleva #-merkki yksilöi HTML-tunnisteen, jolla on tunniste ”Q1_div”. ”#Q1_div”:n jälkeen on välilyönti ja sitten ”.header1”. Tämä CSS-sääntö muuttaa otsikon 1 tekstin siniseksi kysymyksen Q1 sisällä. Seuraava piirtää mustan kehyksen kaikkien kysymysten ympärille: