Vizualizare
Bazele CSS
Lighthouse HTML „Hooks” pentru CSS
Vizualizare
Custom CSS (Cascading Style Sheets) poate fi folosit în Lighthouse Studio pentru a modifica aspectul sondajului.
În mod implicit, setările de stil din Lighthouse Studio sunt goale. De exemplu, dacă creați o nouă întrebare și faceți clic pe pictograma Paintbrush (Pensulă) pentru Header 1, nu este specificată dimensiunea fontului. Dacă nu este specificată dimensiunea fontului la nivelul întrebării, se utilizează dimensiunea fontului specificată la un nivel superior. CSS prezintă niveluri de prioritate în cascadă. O dimensiune a fontului poate fi specificată pentru tot textul dintr-un sondaj sau pentru o anumită întrebare. O dimensiune a fontului definită pentru o anumită întrebare prevalează asupra dimensiunii fontului definit la nivelul studiului.
Lighthouse Studio are încorporat CSS care controlează stilurile sondajelor. Diagrama de mai jos ajută la ilustrarea modului în care CSS este utilizat în Lighthouse Studio, demonstrând diferitele niveluri de prioritate a stilului. Stilurile definite la nivelul întrebărilor prevalează asupra stilurilor definite în stilul studiului. Stilurile definite în stilul de sondaj prevalează asupra stilurilor definite în foaia de stil de bază ssi_style.css.
Bazele CSS
CSS înseamnă Cascading Style Sheets (foi de stil în cascadă). CSS vă permite să modificați stilul (culoarea de fundal, stilul fontului, spațierea etc.) din HTML pentru paginile web. CSS vă permite să separați stilul de structura unei pagini web.
CSS poate fi definit în cadrul elementelor HTML. De exemplu:
<p style=”color: green;”>
Vă rugăm să răspundeți la întrebările de mai jos.
</p>
CSS „color: green;” schimbă culoarea textului din cadrul tag-ului <p> în verde. Acest stil poate fi separat de eticheta <p>. Următoarele instrucțiuni:
<style type=”text/css”>
p
{
color: green;
}
</style>
<p>
Vă rugăm să răspundeți la întrebările de mai jos.
</p>
modificați tot textul din interiorul etichetelor <p> de pe pagină în verde.
Să presupunem că aveți mai multe pagini web și doriți ca textul din interiorul tuturor etichetelor <p> pentru toate paginile să fie verde. Puteți crea un fișier text separat numit „mystyle.css” care include următorul CSS:
p
{
color: verde;
}
În partea de sus a fiecărei pagini web, în interiorul tag-ului <head>, veți include:
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
Aceasta controlează stilul pentru toate paginile web dintr-un singur fișier. Pentru a schimba culoarea din verde în albastru este suficient să editați mystyle.css. Folosind CSS în acest mod, schimbarea stilului în toate paginile web este mult mai ușoară decât definirea stilului pe fiecare pagină în parte. Stilurile definite într-un fișier extern au o prioritate mai mică decât stilurile definite în cadrul unei etichete <style> de pe pagina web. Stilurile definite în HTML în interiorul unui atribut „style” au o prioritate mai mare decât stilurile definite în cadrul tag-ului <style>.
CSS constă în diverse „reguli” de stil care definesc modul de modificare a aspectului HTML. În regula CSS de mai jos, „p” este selectorul, iar „color: green” este declarația.
p
{
color: green;
}
Selectorul identifică ce parte din HTML va fi afectată de declarație. Declarația este formată dintr-o proprietate și o valoare separate prin două puncte. Declarațiile multiple sunt separate prin punct și virgulă. De exemplu:
p
{
color: green;
font-size: 18px;
font-size: 18px;
padding: 10px;
}
Selectorul poate fi numele oricărui element HTML. De exemplu: p, div, div, span, table, tr, td, etc. La regulă se pot adăuga mai multe elemente separate prin virgule. De exemplu:
div, p, td
{
color: green;
}
CSS-ul de mai sus schimbă textul din tag-urile <div>, <p> și <td> în verde. De asemenea, puteți specifica faptul că doar tag-urile <p> din cadrul tag-urilor <div> ar trebui să fie selectate:
div p
{
color: green; /*Transformă textul în verde*/
}
Observați că există un spațiu care separă „div” de „p”. Acest lucru indică faptul că sunt afectate doar etichetele <p> din interiorul etichetelor <div>. De asemenea, observați comentariul „Transformă textul în verde”. Comentariile CSS sunt conținute între /* și */. Orice text între /* și */ nu va afecta CSS.
Un selector de clasă este o modalitate prin care puteți identifica elemente HTML specifice. Să presupunem că aveți următorul HTML:
<div class=”header1″>
Câți ani ai?
</div>
Cel <div> de mai sus are un atribut numit „class” cu valoarea „header1”. Identificați o clasă în CSS prin plasarea unui „.” în fața numelui său. De exemplu
.header1
{
color: green;
}
CSS-ul de mai sus face ca textul din interiorul tag-urilor cu clasa „header1” să fie verde. Lighthouse Studio folosește foarte mult selectorii de clasă. Clasele sunt concepute pentru a identifica unul sau mai multe elemente de pe pagina web. Dacă există un element unic identificat cu un „id”, atunci se folosește un semn „#” în loc de „.”. De exemplu:
<div>
Câți ani ai?
</div>
Pentru a selecta acest <div> s-ar putea folosi următorul CSS:
#Q1_div
{
color: green;
}
Lighthouse Studio include multe clase și ID-uri în HTML-ul pe care îl creează pentru a vă ajuta să identificați zone specifice ale paginii. Puteți folosi apoi aceste nume de „class” și „id” în cadrul CSS-ului dumneavoastră.
Mai multe informații despre CSS pot fi găsite la http://www.w3schools.com/css.
Lighthouse HTML „Hooks” pentru CSS
Lighthouse Studio generează HTML pentru sondajul dumneavoastră pe baza diferitelor tipuri de întrebări și a setărilor pe care le configurați în software. HTML-ul conține atributele „class” și „id” în multe dintre etichetele sale. De exemplu, HTML-ul pentru antetul 1 arată astfel:
<div class=”header1″> Header 1 Text </div>
Atributul „class” din tag-ul <div> de mai sus identifică antetul 1. Următorul CSS poate fi apoi utilizat pentru a schimba culoarea textului Header 1 în întregul sondaj:
.header1
{
culoare: verde;
}
Diagrama de mai jos prezintă câteva dintre clasele principale prezente în HTML-ul Lighthouse.
Classele și id-urile suplimentare pot fi examinate prin vizualizarea HTML-ului Lighthouse. Acest lucru se poate face utilizând „View Source” (Vizualizare sursă) în browserul web.
Câteva elemente HTML din Lighthouse Studio conțin mai multe clase și un id. Au fost prevăzute diverse modalități de a permite CSS-ului să manipuleze prezentarea sau stilul studiului. HTML-ul pentru o întrebare selectivă numită „Q1” arată astfel:
<div class=”question select”>
…
</div>
Observați că două clase „question” și „select” au fost atribuite acestui tag <div>.
Cu următorul CSS se modifică stilul Header 1 pentru Q1. Nu sunt afectate alte întrebări.
#Q1_div .header1
{
color: blue;
}
Semnul # de mai sus identifică tagul HTML cu id-ul „Q1_div”. După „#Q1_div” urmează un spațiu și apoi „.header1”. Această regulă CSS schimbă textul pentru Header 1 în albastru în interiorul întrebării Q1. Ceea ce urmează desenează o margine neagră în jurul tuturor întrebărilor:
.