Översikt
Grundläggande om CSS
Lighthouse HTML-”krokar” för CSS
Översikt
Anpassad CSS (Cascading Style Sheets) kan användas i hela Lighthouse Studio för att ändra utseendet på enkäten.
Stilinställningarna i Lighthouse Studio är som standard tomma. Om du t.ex. skapar en ny fråga och klickar på ikonen Paintbrush för Header 1 anges ingen teckensnittsstorlek. Om ingen teckensnittsstorlek anges på frågenivå används den teckensnittsstorlek som anges på en högre nivå. CSS har kaskader av prioritetsnivåer. En teckensnittsstorlek kan anges för all text i en enkät eller för en viss fråga. En teckensnittsstorlek som definieras för en viss fråga åsidosätter den teckensnittsstorlek som definieras på undersökningsnivå.
Lighthouse Studio har inbyggd CSS som styr undersökningsstilar. Diagrammet nedan hjälper till att illustrera hur CSS används i Lighthouse Studio och visar de olika nivåerna av stilprioritering. Stilar som definieras på frågenivå åsidosätter stilar som definieras i undersökningsstilen. Stilar som definieras i enkätstilen åsidosätter stilar som definieras i grundstilarket ssi_style.css.
CSS Basics
CSS står för Cascading Style Sheets. CSS gör det möjligt att ändra stilen (bakgrundsfärg, typsnitt, avstånd osv.) i HTML för webbsidor. CSS gör det möjligt att skilja stilen från strukturen på en webbsida.
CSS kan definieras inom HTML-elementen. Till exempel:
<p style=”color: green;”>
Svar på frågorna nedan.
</p>
CSS:en ”color: green;” ändrar textfärgen inom taggen <p> till grön. Den här stilen kan separeras från <p>-taggen. Följande instruktioner:
<style type=”text/css”>
p
{
color: Green;
}
</style>
<p>
Svar på frågorna nedan.
</p>
Ändra all text inom <p>-taggar på sidan till grönt.
Antag att du har flera webbsidor och att du vill att texten inom alla <p>-taggar för alla sidor ska vara grön. Du kan skapa en separat textfil som heter ”mystyle.css” som innehåller följande CSS:
p
{
color: green;
}
Ovanpå varje webbsida, inuti taggen <head>, skulle du sedan inkludera:
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
Detta styr stilen för alla webbsidor från en fil. Om du vill ändra färgen från grönt till blått behöver du bara redigera mystyle.css. Genom att använda CSS på detta sätt blir det mycket enklare att ändra stilen på alla webbsidor än att definiera stilen på varje enskild sida. Stilar som definieras i en extern fil har lägre prioritet än stilar som definieras i en <style>-tagg på webbsidan. Stilar som definieras i HTML inuti ett ”style”-attribut har högre prioritet än stilar som definieras i <style>-taggen.
CSS består av olika stil-”regler” som definierar hur HTML:s utseende ska ändras. I CSS-regeln nedan är ”p” selektorn och ”color: green” är deklarationen.
p
{
color: green;
}
Selektorn identifierar vilken del av HTML som ska påverkas av deklarationen. Deklarationen består av en egenskap och ett värde separerade med ett kolon. Flera deklarationer separeras med semikolon. Till exempel:
p
{
color: green;
font-size: 18px;
padding: 10px;
}
Selektorn kan vara namnet på vilket HTML-element som helst. Till exempel: p, div, span, table, tr, td osv. Flera element kan läggas till i regeln separerade med kommatecken. Till exempel:
div, p, td
{
color: green;
}
CSS:en ovan ändrar text inom <div>, <p> och <td>-taggarna till grön. Du kan också ange att endast <p>-taggar inom <div>-taggar ska markeras:
div p
{
color: green; /*Vänd texten till grönt*/
}
Märk väl att det är ett mellanslag som skiljer ”div” från ”p”. Detta indikerar att endast <p>-taggar inom <div>-taggar påverkas. Lägg också märke till kommentaren ”Gör texten grön”. CSS-kommentarer finns mellan /* och */. All text mellan /* och */ påverkar inte CSS.
En Class Selector är ett sätt att identifiera specifika HTML-element. Anta att du har följande HTML:
<div class=”header1″>
Hur gammal är du?
</div>
Den <div> ovan har ett attribut som heter ”class” med värdet ”header1”. Du identifierar en klass i CSS genom att placera ett ”.” framför dess namn. Till exempel
.header1
{
color: green;
}
CSS:en ovan gör att texten inom taggar med klassen ”header1” blir grön. Lighthouse Studio använder klassväljaren i stor utsträckning. Klasser är utformade för att identifiera ett eller flera element på webbsidan. Om det finns ett unikt element som identifieras med ett ”id” används ett ”#”-tecken i stället för ett ”.”. Till exempel:
<div>
Hur gammal är du?
</div>
Följande CSS kan användas för att välja denna <div>:
#Q1_div
{
color: Green;
}
Lighthouse Studio innehåller många klasser och ID:er i den HTML som skapas för att hjälpa dig att identifiera specifika områden på sidan. Du kan sedan använda dessa ”class”- och ”id”-namn i din CSS.
Mer information om CSS finns på http://www.w3schools.com/css.
Lighthouse HTML ”Hooks” för CSS
Lighthouse Studio genererar HTML för din enkät baserat på de olika frågetyper och inställningar som du konfigurerar i programmet. HTML-filen innehåller attributen ”class” och ”id” i många av dess taggar. HTML för rubrik 1 ser till exempel ut så här:
<div class=”header1″> Rubrik 1 Text </div>
Attributet ”class” i taggen <div> ovan identifierar rubrik 1. Följande CSS kan sedan användas för att ändra textfärgen för Header 1 i hela undersökningen:
.header1
{
color: green;
}
Diagrammet nedan visar några av de viktigaste klasserna som finns i Lighthouses HTML.
Utvidare klasser och id:er kan undersökas genom att se Lighthouses HTML. Detta kan göras med hjälp av ”View Source” i din webbläsare.
Vissa HTML-element i Lighthouse Studio innehåller flera klasser och ett id. Olika sätt har tillhandahållits för att CSS ska kunna manipulera undersökningens presentation eller stil. HTML för en select-fråga med namnet ”Q1” ser ut så här:
<div class=”question select”>
…
</div>
Märk att två klasser, ”question” och ”select”, har tilldelats den här <div> taggen.
Följande CSS ändrar stilen Header 1 för Q1. Inga andra frågor påverkas.
#Q1_div .header1
{
color: blue;
}
Tecknet # ovan identifierar HTML-taggen med id:et ”Q1_div”. Efter ”#Q1_div” kommer ett mellanslag och sedan ”.header1”. Denna CSS-regel ändrar texten för rubrik 1 till blått inuti fråga Q1. Följande text drar en svart ram runt alla frågor: