Panoramica
Fondamenti di CSS
Hooks” HTML per CSS
Panoramica
I CSS personalizzati (Cascading Style Sheets) possono essere utilizzati in Lighthouse Studio per modificare l’aspetto dell’indagine.
Per impostazione predefinita, le impostazioni di stile in Lighthouse Studio sono vuote. Per esempio, se crei una nuova domanda e clicchi sull’icona del pennello per l’intestazione 1, non è specificata la dimensione del carattere. Se non viene specificata alcuna dimensione del carattere a livello di domanda, viene usata la dimensione del carattere specificata a un livello superiore. I CSS presentano livelli di priorità a cascata. Una dimensione dei caratteri può essere specificata per tutto il testo di un sondaggio o per una domanda particolare. Una dimensione del carattere definita per una domanda particolare sovrascrive la dimensione del carattere definita a livello di studio.
Lighthouse Studio ha integrato il CSS che controlla gli stili dell’indagine. Il diagramma qui sotto aiuta ad illustrare come viene usato il CSS in Lighthouse Studio, dimostrando i diversi livelli di priorità dello stile. Gli stili definiti a livello di domanda sovrascrivono gli stili definiti nello stile dell’indagine. Gli stili definiti nello stile del sondaggio sovrascrivono gli stili definiti nel foglio di stile di base ssi_style.css.
Fondamenti di CSS
CSS sta per Cascading Style Sheets. I CSS ti permettono di modificare lo stile (colore di sfondo, stile dei caratteri, spaziatura, ecc.) dell’HTML per le pagine web. I CSS permettono di separare lo stile dalla struttura di una pagina web.
CSS possono essere definiti all’interno degli elementi HTML. Per esempio:
<p style=”color: green;”>
Si prega di rispondere alle domande seguenti.
</p>
Il CSS “color: green;” cambia il colore del testo dentro il tag <p> in verde. Questo stile può essere separato dal tag <p>. Le seguenti istruzioni:
<style type=”text/css”>
p
{
color: verde;
}
</stile>
<p>
Si prega di rispondere alle domande seguenti.
</p>
cambia tutto il testo all’interno dei tag <p> sulla pagina in verde.
Supponiamo che tu abbia più pagine web e vuoi che il testo all’interno di tutti i tag <p> per tutte le pagine sia verde. Puoi creare un file di testo separato chiamato “mystyle.css” che include il seguente CSS:
p
{
color: green;
}
In cima ad ogni pagina web all’interno del tag <head> dovresti poi includere:
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
Questo controlla lo stile per tutte le pagine web da un file. Per cambiare il colore da verde a blu devi semplicemente modificare mystyle.css. Usare i CSS in questo modo rende molto più facile cambiare lo stile in tutte le tue pagine web che definire lo stile in ogni singola pagina. Gli stili definiti in un file esterno hanno una priorità più bassa degli stili definiti all’interno di un tag <style> nella pagina web. Gli stili definiti all’interno dell’HTML all’interno di un attributo “style” hanno una priorità più alta degli stili definiti all’interno del tag <style>.
CSS consiste di varie “regole” di stile che definiscono come modificare l’aspetto dell’HTML. Nella regola CSS qui sotto la “p” è il selettore e il “color: green” è la dichiarazione.
p
{
color: green;
}
Il selettore identifica quale parte dell’HTML sarà interessata dalla dichiarazione. La dichiarazione consiste in una proprietà e un valore separati da due punti. Le dichiarazioni multiple sono separate da punti e virgola. Per esempio:
p
{
color: green;
font-size: 18px;
padding: 10px;
}
Il selettore può essere il nome di qualsiasi elemento HTML. Per esempio: p, div, span, table, tr, td, ecc. Più elementi possono essere aggiunti alla regola separati da virgole. Per esempio:
div, p, td
{
color: green;
}
Il CSS sopra cambia il testo all’interno dei tag <div>, <p>, e <td> in verde. Puoi anche specificare che solo i tag <p> all’interno dei tag <div> devono essere selezionati:
div p
{
color: green; /*Trasforma il testo in verde*/
}
Nota che c’è uno spazio tra “div” e “p”. Questo indica che solo i tag <p> all’interno dei tag <div> sono interessati. Notate anche il commento “Rendi il testo verde”. I commenti CSS sono contenuti tra /* e */. Qualsiasi testo tra /* e */ non influenzerà il CSS.
Un selettore di classe è un modo in cui puoi identificare specifici elementi HTML. Supponiamo che tu abbia il seguente HTML:
<div class=”header1″>
Quanti anni hai?
</div>
Il <div> sopra ha un attributo chiamato “class” con un valore di “header1”. Si identifica una classe nei CSS mettendo un “.” davanti al suo nome. Per esempio
.header1
{
color: green;
}
Il CSS qui sopra rende il testo all’interno dei tag con la classe “header1” verde. Lighthouse Studio usa pesantemente i selettori di classe. Le classi sono progettate per identificare uno o più elementi nella pagina web. Se c’è un elemento unico identificato con un “id” allora viene usato un segno “#” invece di un “. Per esempio:
<div>
Quanti anni hai?
</div>
Il seguente CSS potrebbe essere usato per selezionare questo <div>:
#Q1_div
{
color: verde;
}
Lighthouse Studio include molte classi e ID all’interno dell’HTML che crea per aiutarti a identificare aree specifiche della pagina. Puoi poi usare questi nomi di “classe” e “id” nei tuoi CSS.
Più informazioni sui CSS possono essere trovate a http://www.w3schools.com/css.
Lighthouse HTML “Hooks” per CSS
Lighthouse Studio genera l’HTML per il tuo sondaggio in base ai diversi tipi di domande e impostazioni che configuri nel software. L’HTML contiene attributi “class” e “id” in molti dei suoi tag. Per esempio l’HTML per l’intestazione 1 assomiglia a questo:
<div class=”header1″> Header 1 Text </div>
L’attributo “class” nel tag <div> sopra identifica l’intestazione 1. Il seguente CSS può quindi essere usato per cambiare il colore del testo dell’intestazione 1 in tutto il sondaggio:
.header1
{
color: green;
}
Il diagramma sottostante mostra alcune delle classi principali presenti nell’HTML di Lighthouse.
Le classi e gli id aggiuntivi possono essere esaminati visualizzando l’HTML di Lighthouse. Questo può essere fatto usando “View Source” nel tuo browser web.
Alcuni elementi HTML in Lighthouse Studio contengono classi multiple e un id. Sono stati forniti vari modi per permettere al CSS di manipolare la presentazione o lo stile dell’indagine. L’HTML per una domanda selezionata chiamata “Q1” appare così:
<div class=”question select”>
…
</div>
Nota che due classi “question” e “select” sono state assegnate a questo tag <div>.
Il seguente CSS cambia lo stile dell’intestazione 1 per Q1. Non sono interessate altre domande.
#Q1_div .header1
{
color: blue;
}
Il segno # sopra identifica il tag HTML con l’id “Q1_div”. Dopo “#Q1_div” c’è uno spazio e poi “.header1”. Questa regola CSS cambia il testo dell’intestazione 1 in blu all’interno della domanda Q1. Il seguente disegna un bordo nero intorno a tutte le domande:
.