Übersicht
CSS-Grundlagen
Lighthouse HTML „Hooks“ für CSS
Übersicht
Benutzerdefinierte CSS (Cascading Style Sheets) können in Lighthouse Studio verwendet werden, um das Aussehen der Umfrage zu verändern.
Standardmäßig sind die Stileinstellungen in Lighthouse Studio leer. Wenn Sie zum Beispiel eine neue Frage erstellen und auf das Pinsel-Symbol für Kopfzeile 1 klicken, ist keine Schriftgröße angegeben. Wenn auf der Ebene der Frage keine Schriftgröße angegeben ist, wird die auf einer höheren Ebene angegebene Schriftgröße verwendet. CSS bietet kaskadierende Prioritätsebenen. Eine Schriftgröße kann für den gesamten Text in einer Umfrage oder für eine bestimmte Frage festgelegt werden. Eine für eine bestimmte Frage definierte Schriftgröße hat Vorrang vor der auf Studienebene definierten Schriftgröße.
Lighthouse Studio verfügt über ein integriertes CSS, das die Umfragestile steuert. Das nachstehende Diagramm veranschaulicht, wie CSS in Lighthouse Studio verwendet wird, und zeigt die verschiedenen Ebenen der Stilpriorität. Stile, die auf der Frageebene definiert sind, haben Vorrang vor den im Umfragestil definierten Stilen. Stile, die im Umfragestil definiert sind, setzen Stile außer Kraft, die im Basis-Stylesheet ssi_style.css definiert sind.
CSS-Grundlagen
CSS steht für Cascading Style Sheets. Mit CSS können Sie den Stil (Hintergrundfarbe, Schriftart, Abstände usw.) des HTML für Webseiten ändern. Mit CSS können Sie den Stil von der Struktur einer Webseite trennen.
CSS kann innerhalb der HTML-Elemente definiert werden. Zum Beispiel:
<p style=“color: green;“>
Bitte beantworten Sie die folgenden Fragen.
</p>
Das CSS „color: green;“ ändert die Textfarbe innerhalb des <p>-Tags auf grün. Dieser Stil kann vom <p>-Tag getrennt werden. Die folgenden Anweisungen:
<style type=“text/css“>
p
{
color: Grün;
}
</style>
<p>
Bitte beantworte die folgenden Fragen.
</p>
Ändern Sie den gesamten Text innerhalb der <p>-Tags auf der Seite in grün.
Angenommen, Sie haben mehrere Webseiten und möchten, dass der Text innerhalb aller <p>-Tags für alle Seiten grün ist. Sie können eine separate Textdatei mit dem Namen „mystyle.css“ erstellen, die folgendes CSS enthält:
p
{
Farbe: grün;
}
Am Anfang jeder Webseite innerhalb des <head>-Tags würden Sie dann folgendes einfügen:
<link rel=“stylesheet“ type=“text/css“ href=“mystyle.css“>
Dies steuert den Stil für alle Webseiten aus einer Datei. Um die Farbe von Grün auf Blau zu ändern, müssen Sie nur mystyle.css bearbeiten. Wenn Sie CSS auf diese Weise verwenden, ist es viel einfacher, den Stil für alle Ihre Webseiten zu ändern, als den Stil auf jeder einzelnen Seite zu definieren. Stile, die in einer externen Datei definiert sind, haben eine geringere Priorität als Stile, die innerhalb eines <style>-Tags auf der Webseite definiert sind. Stile, die im HTML innerhalb eines „style“-Attributs definiert sind, haben eine höhere Priorität als Stile, die im <style>-Tag definiert sind.
CSS besteht aus verschiedenen Stil-„Regeln“, die festlegen, wie das Aussehen des HTML zu ändern ist. In der folgenden CSS-Regel ist „p“ der Selektor und „color: green“ die Deklaration.
p
{
color: green;
}
Der Selektor gibt an, welcher Teil des HTML von der Deklaration betroffen sein wird. Die Deklaration besteht aus einer Eigenschaft und einem Wert, die durch einen Doppelpunkt getrennt sind. Mehrere Deklarationen werden durch Semikolon getrennt. Zum Beispiel:
p
{
Farbe: grün;
Fontgröße: 18px;
Padding: 10px;
}
Der Selektor kann der Name eines beliebigen HTML-Elements sein. Zum Beispiel: p, div, span, table, tr, td, etc. Mehrere Elemente können der Regel durch Kommata getrennt hinzugefügt werden. Beispiel:
div, p, td
{
Farbe: grün;
}
Das obige CSS ändert den Text innerhalb der Tags <div>, <p> und <td> in grün. Sie können auch festlegen, dass nur <p>-Tags innerhalb von <div>-Tags ausgewählt werden sollen:
div p
{
Farbe: grün; /*Den Text grün färben*/
}
Beachten Sie, dass ein Leerzeichen zwischen „div“ und „p“ steht. Dies bedeutet, dass nur <p>-Tags innerhalb von <div>-Tags betroffen sind. Beachten Sie auch den Kommentar „Turn the text green“. CSS-Kommentare sind zwischen /* und */ enthalten. Jeder Text zwischen /* und */ wirkt sich nicht auf das CSS aus.
Ein Class Selector ist eine Möglichkeit, bestimmte HTML-Elemente zu identifizieren. Angenommen, Sie haben folgendes HTML:
<div class=“header1″>
Wie alt sind Sie?
</div>
Das obige <div> hat ein Attribut namens „class“ mit dem Wert „header1“. Sie identifizieren eine Klasse in CSS, indem Sie ein „.“ vor ihren Namen setzen. Zum Beispiel
.header1
{
Farbe: grün;
}
Das obige CSS bewirkt, dass der Text innerhalb von Tags mit der Klasse „header1“ grün ist. Lighthouse Studio verwendet häufig Klassenselektoren. Klassen dienen dazu, ein oder mehrere Elemente auf der Webseite zu identifizieren. Wenn es ein eindeutiges Element gibt, das mit einer „id“ gekennzeichnet ist, wird ein „#“-Zeichen anstelle eines „.“ verwendet. Zum Beispiel:
<div>
Wie alt sind Sie?
</div>
Das folgende CSS könnte verwendet werden, um dieses <div> auszuwählen:
#Q1_div
{
color: green;
}
Lighthouse Studio enthält viele Klassen und IDs innerhalb des HTML, das es erstellt, um Ihnen zu helfen, bestimmte Bereiche der Seite zu identifizieren. Sie können diese „class“- und „id“-Namen dann in Ihrem CSS verwenden.
Weitere Informationen über CSS finden Sie unter http://www.w3schools.com/css.
Lighthouse HTML „Hooks“ für CSS
Lighthouse Studio generiert das HTML für Ihre Umfrage basierend auf den verschiedenen Fragetypen und Einstellungen, die Sie in der Software konfigurieren. Der HTML-Code enthält die Attribute „class“ und „id“ in vielen seiner Tags. Der HTML-Code für Kopfzeile 1 sieht zum Beispiel so aus:
<div class=“header1″> Kopfzeilentext </div>
Das Attribut „class“ im obigen <div>-Tag kennzeichnet Kopfzeile 1. Das folgende CSS kann dann verwendet werden, um die Textfarbe der Überschrift 1 in der gesamten Umfrage zu ändern:
.header1
{
Farbe: grün;
}
Das folgende Diagramm zeigt einige der wichtigsten Klassen, die im HTML von Lighthouse vorhanden sind.
Zusätzliche Klassen und IDs können untersucht werden, indem man das HTML von Lighthouse betrachtet. Dies kann mit „Quelltext anzeigen“ in Ihrem Webbrowser erfolgen.
Einige HTML-Elemente in Lighthouse Studio enthalten mehrere Klassen und eine ID. Es gibt verschiedene Möglichkeiten, die Darstellung oder den Stil der Umfrage mit Hilfe von CSS zu manipulieren. Der HTML-Code für eine Auswahlfrage mit dem Namen „Q1“ sieht wie folgt aus:
<div class=“question select“>
…
</div>
Beachten Sie, dass diesem <div>-Tag zwei Klassen „question“ und „select“ zugewiesen wurden.
Das folgende CSS ändert den Stil der Überschrift 1 für Q1. Andere Fragen sind davon nicht betroffen.
#Q1_div .header1
{
color: blue;
}
Das obige #-Zeichen identifiziert den HTML-Tag mit der ID „Q1_div“. Nach „#Q1_div“ kommt ein Leerzeichen und dann „.header1“. Diese CSS-Regel ändert den Text für die Überschrift 1 innerhalb der Frage Q1 in Blau. Im Folgenden wird ein schwarzer Rahmen um alle Fragen gezeichnet: