Overblik
Grundlæggende om CSS
Lighthouse HTML-“kroge” til CSS
Overblik
Brugerdefineret CSS (Cascading Style Sheets) kan bruges i hele Lighthouse Studio til at ændre undersøgelsens udseende.
Stilindstillingerne i hele Lighthouse Studio er som standard tomme. Hvis du f.eks. opretter et nyt spørgsmål og klikker på Paintbrush-ikonet for Header 1, er der ikke angivet nogen skriftstørrelse. Hvis der ikke er angivet nogen skriftstørrelse på spørgsmålsniveau, anvendes den skriftstørrelse, der er angivet på et højere niveau. CSS har kaskader af prioriteringsniveauer. Der kan angives en skriftstørrelse for al tekst i en undersøgelse eller for et bestemt spørgsmål. En skriftstørrelse, der er defineret for et bestemt spørgsmål, tilsidesætter den skriftstørrelse, der er defineret på undersøgelsesniveau.
Lighthouse Studio har indbygget CSS, der styrer undersøgelsesstile. Nedenstående diagram er med til at illustrere, hvordan CSS bruges i Lighthouse Studio, og viser de forskellige niveauer af stilprioritet. Stilarter, der er defineret på spørgsmålsniveauet, tilsidesætter stilarter, der er defineret i undersøgelsesstilen. Stilarter, der er defineret i undersøgelsesstilen, tilsidesætter stilarter, der er defineret i grundstilarket ssi_style.css.
CSS-grundlæggende oplysninger
CSS står for Cascading Style Sheets. CSS giver dig mulighed for at ændre stilen (baggrundsfarve, skrifttypestil, mellemrum osv.) i HTML for websider. CSS giver dig mulighed for at adskille stilen fra strukturen på en webside.
CSS kan defineres inden for HTML-elementerne. For eksempel:
<p style=”color: green;”>
Svar venligst på nedenstående spørgsmål.
</p>
CSS’en “color: green;” ændrer tekstens farve inden for <p>-tagget til grøn. Denne stil kan adskilles fra <p>-tagget. Følgende vejledning:
<style type=”text/css”>>
p
{
color: green;
}
</style>
<p>
Besvar venligst spørgsmålene nedenfor.
</p>
ændre al tekst inden for <p>-tags på siden til grøn.
Sæt, at du har flere websider, og du vil have teksten inden for alle <p>-tags for alle sider til at være grøn. Du kan oprette en separat tekstfil med navnet “mystyle.css”, der indeholder følgende CSS:
p
{
color: green;
}
Overst på hver webside inden for <head>-taggen skal du så inkludere:
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
Dette styrer stilen for alle websider fra én fil. Hvis du vil ændre farven fra grøn til blå, skal du blot redigere mystyle.css. Ved at bruge CSS på denne måde er det meget nemmere at ændre stilen på alle dine websider end at definere stilen på hver enkelt side. Stilarter, der er defineret i en ekstern fil, har lavere prioritet end stilarter, der er defineret i et <style>-tag på websiden. Stilarter, der er defineret i HTML inden for en “style”-attribut, har højere prioritet end stilarter, der er defineret inden for <style>-tagget.
CSS består af forskellige stil-“regler”, der definerer, hvordan HTML’s udseende skal ændres. I CSS-reglen nedenfor er “p” selektoren og “color: green” er deklarationen.
p
{
color: green;
}
Selektoren identificerer, hvilken del af HTML’en, der skal påvirkes af deklarationen. Deklarationen består af en egenskab og en værdi adskilt af et kolon. Flere deklarationer adskilles med semikolon. For eksempel:
p
{
color: green;
font-size: 18px;
padding: 10px;
}
Selektoren kan være navnet på et hvilket som helst HTML-element. For eksempel: p, div, span, table, tr, td osv. Der kan tilføjes flere elementer til reglen adskilt med kommaer. Eksempel:
div, p, td
{
color: green;
}
CSS’en ovenfor ændrer teksten inden for <div>, <p> og <td>-tags til grøn. Du kan også angive, at kun <p>-tags inden for <div>-tags skal markeres:
div p
{
color: green; /*Vend teksten til grøn*/
}
Bemærk, at der er et mellemrum, der adskiller “div” fra “p”. Dette angiver, at kun <p>-tags inden for <div>-tags er berørt. Læg også mærke til kommentaren “Gør teksten grøn”. CSS-kommentarer er indeholdt mellem /* og */. Enhver tekst mellem /* og */ påvirker ikke CSS’en.
En Class Selector er en måde, hvorpå du kan identificere bestemte HTML-elementer. Antag, at du har følgende HTML:
<div class=”header1″>
Hvor gammel er du?
</div>
Den ovenstående <div> har en attribut med navnet “class” med værdien “header1”. Du identificerer en klasse i CSS ved at sætte et “.” foran dens navn. For eksempel
.header1
{
color: green;
}
CSS’en ovenfor gør, at teksten inden for tags med klassen “header1” er grøn. Lighthouse Studio bruger klassevælgere i høj grad. Klasser er designet til at identificere et eller flere elementer på websiden. Hvis der er et unikt element, der er identificeret med et “id”, bruges et “#”-tegn i stedet for et “.”. For eksempel:
<div>
Hvor gammel er du?
</div>
Følgende CSS kan bruges til at vælge denne <div>:
#Q1_div
{
color: green;
}
Lighthouse Studio indeholder mange klasser og ID’er i den HTML, der oprettes, for at hjælpe dig med at identificere bestemte områder på siden. Du kan derefter bruge disse “class”- og “id”-navne i din CSS.
Mere oplysninger om CSS kan findes på http://www.w3schools.com/css.
Lighthouse HTML-“kroge” til CSS
Lighthouse Studio genererer HTML til din undersøgelse baseret på de forskellige spørgsmålstyper og indstillinger, du konfigurerer i softwaren. HTML’en indeholder “class”- og “id”-attributter i mange af dens tags. HTML for Header 1 ser f.eks. således ud:
<div class=”header1″> Header 1 Text </div>
Attributten “class” i <div>-tagget ovenfor identificerer Header 1. Følgende CSS kan derefter bruges til at ændre tekstfarven på Header 1 i hele undersøgelsen:
.header1
{
color: green;
}
Diagrammet nedenfor viser nogle af de vigtigste klasser, der er til stede i Lighthouse’s HTML.
Den yderligere klasser og id’er kan undersøges ved at se Lighthouse’s HTML. Dette kan gøres ved hjælp af “View Source” i din webbrowser.
Nogle HTML-elementer i Lighthouse Studio indeholder flere klasser og et id. Der er forskellige måder, hvorpå CSS’en kan manipulere præsentationen eller stilen af undersøgelsen. HTML for et udvalgt spørgsmål med navnet “Q1” ser således ud:
<div class=”question select”>
…
</div>
Bemærk, at der er tildelt to klasser “question” og “select” til dette <div>-tag.
Følgende CSS ændrer stilen Header 1 for Q1. Ingen andre spørgsmål påvirkes.
#Q1_div .header1
{
color: blue;
}
Tegnet # ovenfor identificerer HTML-tagget med id’et “Q1_div”. Efter “#Q1_div” er der et mellemrum og derefter “.header1”. Denne CSS-regel ændrer teksten for Header 1 til blå inden for spørgsmål Q1. Følgende tegner en sort kant omkring alle spørgsmål: