Przegląd
Podstawy CSS
Haki HTML Latarni Morskiej dla CSS
Przegląd
Niestandardowe arkusze stylów CSS (Cascading Style Sheets) mogą być używane w całym programie Lighthouse Studio w celu modyfikacji wyglądu ankiety.
Domyślnie ustawienia stylów w całym programie Lighthouse Studio są puste. Na przykład, jeśli utworzysz nowe pytanie i klikniesz ikonę pędzla dla Nagłówka 1, nie zostanie określony rozmiar czcionki. Jeśli rozmiar czcionki nie został określony na poziomie pytania, używany jest rozmiar czcionki określony na wyższym poziomie. CSS posiada kaskadowe poziomy priorytetu. Rozmiar czcionki może być określony dla całego tekstu w ankiecie lub dla konkretnego pytania. Rozmiar czcionki zdefiniowany dla konkretnego pytania jest nadrzędny w stosunku do rozmiaru czcionki zdefiniowanego na poziomie badania.
Lighthouse Studio posiada wbudowany CSS, który kontroluje style ankiety. Poniższy diagram ilustruje, w jaki sposób CSS jest wykorzystywany w Lighthouse Studio, pokazując różne poziomy priorytetu stylów. Style zdefiniowane na poziomie pytania nadpisują style zdefiniowane w stylu ankiety. Style zdefiniowane w stylu ankiety zastępują style zdefiniowane w podstawowym arkuszu stylów ssi_style.css.
Podstawy CSS
CSS to skrót od Cascading Style Sheets. CSS pozwala na modyfikację stylu (kolor tła, styl czcionki, odstępy, itp.) HTML dla stron internetowych. CSS pozwala na oddzielenie stylu od struktury strony internetowej.
CSS może być zdefiniowany wewnątrz elementów HTML. Na przykład:
<p style=”color: green;”>
Odpowiedz na poniższe pytania.
</p>
Styl CSS „color: green;” zmienia kolor tekstu wewnątrz znacznika <p>na zielony. Ten styl może być oddzielony od znacznika <p>. Następujące instrukcje:
<style type=”text/css”>
p
{
color: green;
}
</style>
<p>
Proszę o udzielenie odpowiedzi na poniższe pytania.
</p>
zmień cały tekst wewnątrz znaczników <p> na stronie na zielony.
Załóżmy, że masz wiele stron internetowych i chcesz, aby tekst wewnątrz wszystkich znaczników <p> dla wszystkich stron był zielony. Możesz utworzyć osobny plik tekstowy o nazwie „mystyle.css”, który zawiera następujący CSS:
p
{
color: green;
}
Na górze każdej strony internetowej wewnątrz tagu <head> umieścisz:
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
To kontroluje styl dla wszystkich stron internetowych z jednego pliku. Aby zmienić kolor z zielonego na niebieski wystarczy edytować mystyle.css. Używanie CSS w ten sposób sprawia, że zmiana stylu na wszystkich stronach internetowych jest o wiele łatwiejsza niż definiowanie stylu na każdej stronie z osobna. Style zdefiniowane w zewnętrznym pliku mają niższy priorytet niż style zdefiniowane w tagu <style> na stronie internetowej. Style zdefiniowane w HTML wewnątrz atrybutu „style” mają wyższy priorytet niż style zdefiniowane wewnątrz znacznika <style>.
CSS składa się z różnych „reguł” stylu, które określają jak modyfikować wygląd HTML. W poniższej regule CSS „p” jest selektorem, a „color: green” jest deklaracją.
p
{
color: green;
}
Elektor określa, na którą część HTML będzie miała wpływ deklaracja. Deklaracja składa się z właściwości i wartości oddzielonych dwukropkiem. Wielokrotne deklaracje są oddzielone średnikami. Na przykład:
p
{
color: green;
font-size: 18px;
padding: 10px;
}
Selektor może być nazwą dowolnego elementu HTML. Na przykład: p, div, span, table, tr, td, itd. Do reguły można dodać wiele elementów oddzielonych przecinkami. Na przykład:
div, p, td
{
color: green;
}
Powyższy CSS zmienia tekst wewnątrz znaczników <div>, <p>, i <td> na zielony. Możesz również określić, że tylko znaczniki <p> wewnątrz znaczników <div> powinny być zaznaczone:
div p
{
color: green; /*Zmień tekst na zielony*/
}
Zauważ, że jest spacja oddzielająca „div” od „p”. To wskazuje, że dotyczy to tylko znaczników <p> wewnątrz znaczników <div>. Zwróć też uwagę na komentarz „Zmień kolor tekstu na zielony”. Komentarze CSS są zawarte pomiędzy znakami /* i */. Jakikolwiek tekst pomiędzy /* i */ nie będzie miał wpływu na CSS.
Klasa Selektor jest sposobem, w jaki możesz zidentyfikować konkretne elementy HTML. Załóżmy, że masz następujący HTML:
<div class=”header1″>
Ile masz lat?
</div>
Powyższy <div> ma atrybut o nazwie „class” z wartością „header1”. Klasę w CSS identyfikuje się poprzez umieszczenie znaku „.” przed jej nazwą. Na przykład
.header1
{
color: green;
}
Powyższy CSS sprawia, że tekst wewnątrz znaczników z klasą „header1” jest zielony. Lighthouse Studio używa w dużym stopniu selektorów klas. Klasy są przeznaczone do identyfikacji jednego lub więcej elementów na stronie internetowej. Jeśli istnieje unikalny element identyfikowany za pomocą „id”, wówczas znak „#” jest używany zamiast „.”. Na przykład:
<div>
Ile masz lat?
</div>
Do zaznaczenia tego <div> można by użyć następującego CSS:
#Q1_div
{
color: green;
}
Lighthouse Studio zawiera wiele klas i identyfikatorów wewnątrz tworzonego przez siebie kodu HTML, aby pomóc w identyfikacji określonych obszarów strony. Możesz następnie użyć tych nazw „class” i „id” w swoim CSS.
Więcej informacji na temat CSS można znaleźć na stronie http://www.w3schools.com/css.
Lighthouse HTML „Haki” dla CSS
Lighthouse Studio generuje HTML dla ankiety na podstawie różnych typów pytań i ustawień skonfigurowanych w programie. HTML zawiera atrybuty „class” oraz „id” w wielu swoich znacznikach. Na przykład HTML dla nagłówka 1 wygląda tak:
<div class=”header1″>Tekst nagłówka 1 </div>
Atrybut „class” w tagu <div> powyżej identyfikuje nagłówek 1. Następujący CSS może być użyty do zmiany koloru tekstu Nagłówka 1 w całej ankiecie:
.header1
{
color: green;
}
Poniższy diagram pokazuje niektóre z głównych klas obecnych w HTML Latarni Morskiej.
Dodatkowe klasy i identyfikatory mogą być zbadane przez przeglądanie HTML Latarni Morskiej. Można to zrobić za pomocą polecenia „Wyświetl źródło” w przeglądarce internetowej.
Niektóre elementy HTML w programie Lighthouse Studio zawierają wiele klas i identyfikatorów. Zapewniono różne sposoby, aby umożliwić CSS manipulowanie prezentacją lub stylem ankiety. HTML dla pytania select o nazwie „Q1” wygląda następująco:
<div class=”question select”>
…
</div>
Zauważ, że dwie klasy „question” i „select” zostały przypisane do tego znacznika <div>.
Poniższy CSS zmienia styl Nagłówka 1 dla pytania Q1. Nie ma to wpływu na inne pytania.
#Q1_div .header1
{
color: blue;
}
Znak # powyżej identyfikuje tag HTML z id „Q1_div”. Po „#Q1_div” jest spacja, a następnie „.header1”. Ta reguła CSS zmienia tekst dla nagłówka 1 na niebieski wewnątrz pytania Q1. Poniższe rysuje czarną ramkę wokół wszystkich pytań:
.