Overzicht
CSS basis
Lighthouse HTML “Hooks” voor CSS
Overzicht
Aangepaste CSS (Cascading Style Sheets) kunnen in Lighthouse Studio worden gebruikt om het uiterlijk van de enquête aan te passen.
De standaardinstelling is dat de stijlinstellingen in Lighthouse Studio leeg zijn. Als u bijvoorbeeld een nieuwe vraag maakt en op het penseelpictogram voor koptekst 1 klikt, is er geen lettergrootte gespecificeerd. Als er geen lettergrootte is opgegeven op vraagniveau, wordt de lettergrootte gebruikt die op een hoger niveau is opgegeven. CSS beschikt over trapsgewijze prioriteitsniveaus. Een lettergrootte kan worden opgegeven voor alle tekst in een enquête of voor een bepaalde vraag. Een lettergrootte die voor een bepaalde vraag is gedefinieerd, heeft voorrang boven de lettergrootte die op het onderzoeksniveau is gedefinieerd.
Lighthouse Studio heeft CSS ingebouwd dat de stijlen van enquêtes regelt. Het onderstaande diagram helpt te illustreren hoe CSS wordt gebruikt in Lighthouse Studio, en toont de verschillende niveaus van Style prioriteit. Stijlen die zijn gedefinieerd op het niveau van de vraag hebben voorrang boven stijlen die zijn gedefinieerd in de stijl van de enquête. Stijlen die zijn gedefinieerd in de enquêtestijl overschrijven stijlen die zijn gedefinieerd in het basisstijlblad ssi_style.css.
CSS-basics
CSS staat voor Cascading Style Sheets. Met CSS kunt u de stijl (achtergrondkleur, lettertypestijl, spatiëring, enzovoort) van de HTML voor webpagina’s wijzigen. CSS maakt het mogelijk om de stijl te scheiden van de structuur van een webpagina.
CSS kan worden gedefinieerd binnen de HTML-elementen. Bijvoorbeeld:
<p style=”color: green;”>
Beantwoord de onderstaande vragen.
</p>
De CSS “color: green;” verandert de tekstkleur binnen de <p> tag in groen. Deze stijl kan worden gescheiden van de <p>-tag. De volgende instructies:
<style type=”text/css”>
p
{
color: groen;
}
</style>
<p>
Beantwoord de vragen hieronder.
</p>
wijzig alle tekst binnen <p>-tags op pagina in groen.
Stel dat u meerdere webpagina’s hebt en dat u de tekst binnen alle <p>-tags voor alle pagina’s groen wilt hebben. U kunt een apart tekstbestand maken met de naam “mystyle.css” maken dat de volgende CSS bevat:
p
{
kleur: groen;
}
Boven aan elke webpagina in de <head>-tag voegt u dan toe:
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
Dit regelt de stijl voor alle webpagina’s vanuit één bestand. Als u de kleur van groen in blauw wilt wijzigen, hoeft u alleen maar mystyle.css te bewerken. Door CSS op deze manier te gebruiken, is het veel eenvoudiger om de stijl van uw webpagina’s te wijzigen dan om de stijl op elke afzonderlijke pagina te definiëren. Stijlen die in een extern bestand zijn gedefinieerd, hebben een lagere prioriteit dan stijlen die in een <style>-tag op de webpagina zijn gedefinieerd. Stijlen die binnen een “style”-attribuut in de HTML zijn gedefinieerd, hebben een hogere prioriteit dan stijlen die binnen de tag <style> zijn gedefinieerd.
CSS bestaat uit verschillende stijl-“regels” die definiëren hoe het uiterlijk van de HTML moet worden gewijzigd. In de CSS-regel hieronder is de “p” de selector en de “color: green” de declaratie.
p
{
color: green;
}
De selector geeft aan welk deel van de HTML door de declaratie zal worden beïnvloed. De declaratie bestaat uit een eigenschap en een waarde, gescheiden door een dubbele punt. Meervoudige declaraties worden gescheiden door puntkomma’s. Bijvoorbeeld:
p
{
color: green;
font-size: 18px;
padding: 10px;
}
De selector kan de naam van een willekeurig HTML element zijn. Bijvoorbeeld: p, div, span, table, tr, td, etc. Meerdere elementen kunnen aan de regel worden toegevoegd, gescheiden door komma’s. Bijvoorbeeld:
div, p, td
{
kleur: groen;
}
De CSS hierboven verandert tekst binnen <div>, <p>, en <td> tags in groen. U kunt ook opgeven dat alleen <p>-tags binnen <div>-tags moeten worden geselecteerd:
div p
{
kleur: groen; /*De tekst groen maken*/
}
Merk op dat er een spatie staat tussen “div” en “p”. Dit geeft aan dat alleen <p> tags binnen <div> tags worden beïnvloed. Let ook op het commentaar “Maak de tekst groen.” CSS commentaar staat tussen /* en */. Tekst tussen /* en */ heeft geen invloed op de CSS.
Een Class Selector is een manier waarmee u specifieke HTML-elementen kunt identificeren. Stel dat u de volgende HTML hebt:
<div class=”header1″>
Hoe oud bent u?
</div>
De <div> hierboven heeft een attribuut met de naam “class” met de waarde “header1”. Je identificeert een klasse in CSS door een “.” voor de naam te plaatsen. Bijvoorbeeld
.header1
{
kleur: groen;
}
De CSS hierboven zorgt ervoor dat de tekst binnen tags met de “header1” klasse groen wordt. Lighthouse Studio maakt veel gebruik van klasse selectors. Klassen zijn ontworpen om een of meer elementen op de webpagina te identificeren. Als er een uniek element is geïdentificeerd met een “id” dan wordt een “#” teken gebruikt in plaats van een “.”. Bijvoorbeeld:
<div>
Hoe oud bent u?
</div>
De volgende CSS zou kunnen worden gebruikt om deze <div> te selecteren:
#Q1_div
{
color: green;
}
Lighthouse Studio bevat vele klassen en ID’s binnen de HTML die het maakt om u te helpen specifieke gebieden van de pagina te identificeren. U kunt dan deze “klasse” en “id” namen gebruiken binnen uw CSS.
Meer informatie over CSS kan worden gevonden op http://www.w3schools.com/css.
Lighthouse HTML “Hooks” voor CSS
Lighthouse Studio genereert de HTML voor uw enquête op basis van de verschillende vraagtypen en instellingen die u in de software configureert. De HTML bevat “klasse”- en “id”-attributen in veel van de tags. De HTML voor kop 1 ziet er bijvoorbeeld als volgt uit:
<div class=”header1″>Koptekst 1 </div>
Het kenmerk “class” in de tag <div> hierboven identificeert kop 1. De volgende CSS kan dan worden gebruikt om de tekstkleur van kop 1 in de hele enquête te wijzigen:
.header1
{
kleur: groen;
}
Het onderstaande diagram toont enkele van de belangrijkste klassen die in de HTML van Lighthouse aanwezig zijn.
Extra klassen en id’s kunnen worden bekeken door de HTML van Lighthouse te bekijken. Dit kan worden gedaan met behulp van “View Source” in uw web browser.
Sommige HTML-elementen in Lighthouse Studio bevatten meerdere klassen en een id. Er zijn verschillende manieren voorzien om de CSS in staat te stellen de presentatie of stijl van de enquête te manipuleren. De HTML voor een geselecteerde vraag met de naam “Q1” ziet er als volgt uit:
<div class=”question select”>
…
</div>
Merk op dat er twee klassen “question” en “select” zijn toegewezen aan deze <div> tag.
De volgende CSS wijzigt de stijl van koptekst 1 voor vraag 1. Andere vragen worden niet beïnvloed.
#Q1_div .header1
{
kleur: blauw;
}
Het # teken hierboven identificeert de HTML tag met het “Q1_div” id. Na “#Q1_div” staat een spatie en dan “.header1”. Deze CSS regel verandert de tekst voor koptekst 1 in blauw binnen vraag Q1. Het volgende tekent een zwarte rand rond alle vragen: