Přehled
Základy CSS
Lighthouse HTML „háčky“ pro CSS
Přehled
Vlastní CSS (kaskádové styly) lze použít v celém Lighthouse Studiu k úpravě vzhledu dotazníku.
Ve výchozím nastavení jsou nastavení stylů v celém Lighthouse Studiu prázdná. Pokud například vytvoříte novou otázku a kliknete na ikonu Malířský štětec pro záhlaví 1, není zadána žádná velikost písma. Pokud není zadána velikost písma na úrovni otázky, použije se velikost písma zadaná na vyšší úrovni. CSS obsahuje kaskádové úrovně priority. Velikost písma lze zadat pro celý text v dotazníku nebo pro konkrétní otázku. Velikost písma definovaná pro konkrétní otázku má přednost před velikostí písma definovanou na úrovni studie.
Lighthouse Studio má zabudované CSS, které řídí styly průzkumu. Níže uvedený diagram pomáhá ilustrovat, jak se CSS používá v aplikaci Lighthouse Studio, a ukazuje různé úrovně priority stylů. Styly definované na úrovni otázky přepisují styly definované ve stylu průzkumu. Styly definované ve stylu ankety přepisují styly definované v základním listu stylů ssi_style.css.
Základy CSS
CSS znamená kaskádové styly. CSS umožňuje upravovat styl (barvu pozadí, styl písma, řádkování atd.) HTML pro webové stránky. CSS umožňuje oddělit styl od struktury webové stránky.
CSS lze definovat v rámci prvků HTML. Například:
<p style=“color: green;“>
Odpovězte prosím na níže uvedené otázky.
</p>
CSS „color: green;“ změní barvu textu uvnitř značky <p> na zelenou. Tento styl lze od tagu <p> oddělit. Následující pokyny:
<style type=“text/css“>
p
{
color:
}
</style>
<p>
Prosím, odpovězte na níže uvedené otázky.
</p>
změňte veškerý text uvnitř značek <p> na stránce na zelený.
Předpokládejte, že máte více webových stránek a chcete, aby byl text uvnitř všech značek <p> pro všechny stránky zelený. Můžete vytvořit samostatný textový soubor s názvem „mystyle.css“, který bude obsahovat následující CSS:
p
{
color: green;
}
Na začátku každé webové stránky uvnitř značky <head> pak uvedete:
<link rel=“stylesheet“ type=“text/css“ href=“mystyle.css“>
To řídí styl pro všechny webové stránky z jednoho souboru. Chcete-li změnit barvu ze zelené na modrou, jednoduše upravíte soubor mystyle.css. Při použití CSS tímto způsobem je změna stylu na všech webových stránkách mnohem jednodušší než definování stylu na každé jednotlivé stránce. Styly definované v externím souboru mají nižší prioritu než styly definované v rámci značky <style> na webové stránce. Styly definované v HTML uvnitř atributu „style“ mají vyšší prioritu než styly definované v rámci značky <style>.
CSS se skládá z různých „pravidel“ stylů, která definují, jak upravit vzhled HTML. V níže uvedeném pravidle CSS je „p“ selektor a „color: green“ je deklarace.
p
{
color: green;
}
Selektor určuje, která část HTML bude ovlivněna danou deklarací. Deklarace se skládá z vlastnosti a hodnoty oddělených dvojtečkou. Více deklarací se odděluje středníkem. Například:
p
{
color: green;
font-size: 18px;
padding:
}
Selektor může být název libovolného prvku HTML. Například: p, div, span, table, tr, td atd. Do pravidla lze přidat více prvků oddělených čárkami. Například:
div, p, td
{
barva: zelená;
}
Výše uvedený CSS změní text uvnitř značek <div>, <p> a <td> na zelený. Můžete také určit, že se mají vybrat pouze značky <p> uvnitř značek <div>:
div p
{
color: green; /*Změnit text na zelený*/
}
Všimněte si, že mezi „div“ a „p“ je mezera. To znamená, že se to týká pouze značek <p> uvnitř značek <div>. Všimněte si také komentáře „Změňte text na zelený“. Komentáře CSS jsou obsaženy mezi znaky /* a */. Jakýkoli text mezi /* a */ neovlivní CSS.
Selektor třídy je způsob, kterým můžete identifikovat konkrétní prvky HTML. Předpokládejme, že máte následující HTML:
<div class=“header1″>
Kolik je vám let?“
</div>
Výše uvedený <div> má atribut „class“ s hodnotou „header1“. Třídu v CSS identifikujete tak, že před její název umístíte znak „.“. Například
.header1
{
color: green;
}
Výše uvedený CSS způsobí, že text uvnitř značek s třídou „header1“ bude zelený. Lighthouse Studio hojně využívá selektory tříd. Třídy jsou určeny k identifikaci jednoho nebo více prvků na webové stránce. Pokud existuje jedinečný prvek identifikovaný pomocí „id“, pak se místo „.“ použije znak „#“. Například:
<div>
Kolik je vám let?
</div>
Pro výběr tohoto <divu> lze použít následující CSS:
#Q1_div
{
barva:
}
Lighthouse Studio obsahuje mnoho tříd a ID v HTML, které vytváří, aby vám pomohlo identifikovat konkrétní oblasti stránky. Tyto názvy „class“ a „id“ pak můžete použít v rámci CSS.
Další informace o CSS najdete na adrese http://www.w3schools.com/css.
Lighthouse HTML „háčky“ pro CSS
Lighthouse Studio generuje HTML pro váš dotazník na základě různých typů otázek a nastavení, které v programu nakonfigurujete. HTML obsahuje atributy „class“ a „id“ v mnoha svých značkách. Například HTML pro hlavičku 1 vypadá takto:
<div class=“header1″> Text hlavičky 1 </div>
Atribut „class“ ve výše uvedené značce <div> identifikuje hlavičku 1. Následující CSS pak lze použít ke změně barvy textu Header 1 v celém dotazníku:
.header1
{
color: green;
}
Níže uvedený diagram ukazuje některé hlavní třídy přítomné v HTML Lighthouse.
Další třídy a id lze prozkoumat při prohlížení HTML Lighthouse. To lze provést pomocí funkce „Zobrazit zdroj“ ve webovém prohlížeči.
Některé prvky HTML v Lighthouse Studio obsahují více tříd a id. Byly poskytnuty různé způsoby, jak umožnit CSS manipulovat s prezentací nebo stylem dotazníku. HTML pro výběrovou otázku s názvem „Q1“ vypadá takto:
<div class=“question select“>
…
</div>
Všimněte si, že této značce <div> byly přiřazeny dvě třídy „question“ a „select“.
Následující CSS mění styl Header 1 pro Q1. Žádných jiných otázek se to netýká.
#Q1_div .header1
{
color: blue;
}
Výše uvedený znak # identifikuje značku HTML s id „Q1_div“. Za „#Q1_div“ je mezera a pak „.header1“. Toto pravidlo CSS změní text záhlaví 1 na modrý uvnitř otázky Q1. Následující pravidlo vykreslí černý rámeček kolem všech otázek: