Áttekintés
CSS alapjai
Lighthouse HTML “horgok” a CSS-hez
Áttekintés
A Lighthouse Studio egészében használható az egyéni CSS (Cascading Style Sheets) a felmérés megjelenésének módosítására.
A Lighthouse Studio alapértelmezés szerint a stílusbeállítások üresek. Ha például új kérdést hoz létre, és az 1. fejlécnél a Paintbrush ikonra kattint, nincs megadva a betűméret. Ha a kérdés szintjén nincs megadva betűméret, akkor a magasabb szinten megadott betűméretet használja a rendszer. A CSS kaszkádszintű prioritási szintekkel rendelkezik. A betűméret megadható a felmérés összes szövegére vagy egy adott kérdésre. Az egy adott kérdéshez meghatározott betűméret felülírja a vizsgálat szintjén meghatározott betűméretet.
A Lighthouse Studio beépített CSS-sel rendelkezik, amely szabályozza a felmérés stílusát. Az alábbi ábra segít szemléltetni a CSS használatát a Lighthouse Studio-ban, bemutatva a stílusprioritás különböző szintjeit. A kérdés szintjén meghatározott stílusok felülírják a felmérés stílusában meghatározott stílusokat. A felmérési stílusban meghatározott stílusok felülírják az ssi_style.css alapstíluslapban meghatározott stílusokat.
CSS alapjai
A CSS a Cascading Style Sheets rövidítése. A CSS lehetővé teszi a weboldalak HTML-jének stílusának (háttérszín, betűstílus, szóközök stb.) módosítását. A CSS lehetővé teszi a stílus elválasztását a weblap szerkezetétől.
A CSS a HTML elemeken belül definiálható. Például:
<p style=”color: green;”>
Kérlek, válaszolj az alábbi kérdésekre.
</p>
A CSS “color: green;” a <p> címkén belül a szöveg színét zöldre változtatja. Ez a stílus elválasztható a <p> tagtől. A következő utasítások:
<style type=”text/css”>
p
{
color: zöld;
}
</style>
<p>
Kérlek, válaszolj az alábbi kérdésekre.
</p>
az oldalon lévő összes <p> címkén belüli szöveget zöldre kell változtatni.
Tegyük fel, hogy több weboldala van, és azt szeretné, hogy az összes <p> címkén belüli szöveg minden oldalon zöld legyen. Létrehozhat egy külön szövegfájlt, melynek neve “mystyle.css”-t, amely a következő CSS-t tartalmazza:
p
{
szín: zöld;
}
Az egyes weboldalak tetején, a <head> címkén belül ezután a következőket foglalná bele:
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
Ez egy fájlból vezérli az összes weboldal stílusát. Ha zöldről kékre szeretné változtatni a színt, egyszerűen szerkeszti a mystyle.css-t. A CSS ilyen módon történő használata sokkal egyszerűbbé teszi a stílus megváltoztatását a weboldalakon, mint a stílus meghatározása minden egyes oldalon. A külső fájlban definiált stílusok alacsonyabb prioritásúak, mint a weblapon a <style> tagben definiált stílusok. A HTML-ben a “style” attribútumon belül definiált stílusok magasabb prioritással rendelkeznek, mint a <style> tagben definiált stílusok.
A CSS különböző stílus “szabályokból” áll, amelyek meghatározzák, hogyan kell módosítani a HTML megjelenését. Az alábbi CSS-szabályban a “p” a szelektor, a “color: green” pedig a deklaráció.
p
{
color: green;
}
A szelektor azonosítja, hogy a HTML melyik részére lesz hatással a deklaráció. A deklaráció egy tulajdonságból és egy értékből áll, kettősponttal elválasztva. A többszörös deklarációkat pontosvessző választja el egymástól. Például:
p
{
szín: zöld;
font-size: 18px;
padding: 10px;
}
A szelektor lehet bármely HTML elem neve. Például: p, div, span, table, tr, td stb. A szabályhoz több elem is hozzáadható vesszővel elválasztva. Például:
div, p, td
{
szín: zöld;
}
A fenti CSS a <div>, <p> és <td> címkéken belüli szöveget zöldre változtatja. Azt is megadhatja, hogy csak a <p> címkéken belüli <div> címkék legyenek kijelölve:
div p
{
color: zöld; /*A szöveg zöldre váltása*/
}
Megfigyelhető, hogy a “div” és a “p” között szóköz van. Ez azt jelzi, hogy csak a <p> címkéket érinti a <div> címkéken belül. Figyeljük meg a “A szöveg zöldre váltása” megjegyzést is. A CSS-kommentárokat a /* és a */ között kell elhelyezni. A /* és */ közötti szöveg nem befolyásolja a CSS-t.
A Class Selector egy olyan módszer, amellyel meghatározott HTML-elemeket azonosíthat. Tegyük fel, hogy a következő HTML:
<div class=”header1″>
Hány éves vagy?
</div>
A fenti <div> rendelkezik egy “class” nevű attribútummal, amelynek értéke “header1”. A CSS-ben egy osztályt úgy azonosítunk, hogy a neve elé egy “.” betűt teszünk. Például
.header1
{
color: green;
}
A fenti CSS a “header1” osztályú címkéken belüli szöveget zöld színűvé teszi. A Lighthouse Studio nagymértékben használja az osztályszelektorokat. Az osztályok egy vagy több elem azonosítására szolgálnak a weboldalon. Ha van egy “id”-vel azonosított egyedi elem, akkor a “.” helyett egy “#” jelet használunk. Például:
<div>
Hány éves vagy?
</div>
Az alábbi CSS-t használhatnánk a <div> kijelölésére:
#Q1_div
{
szín: green;
}
A Lighthouse Studio számos osztályt és azonosítót tartalmaz az általa létrehozott HTML-ben, amelyek segítenek az oldal egyes területeinek azonosításában. Ezeket az “class” és “id” neveket aztán felhasználhatja a CSS-ben.
A CSS-sel kapcsolatos további információk a http://www.w3schools.com/css oldalon találhatók.
Lighthouse HTML “horgok” a CSS-hez
A Lighthouse Studio a felmérés HTML-jét a szoftverben konfigurált különböző kérdéstípusok és beállítások alapján generálja. A HTML számos tagben “class” és “id” attribútumot tartalmaz. Például az 1. fejléc HTML-je így néz ki:
<div class=”header1″> Header 1 Text </div>
A fenti <div> tagben lévő “class” attribútum azonosítja az 1. fejlécet. Ezután a következő CSS-t használhatjuk a Header 1 szöveg színének megváltoztatására az egész felmérésben:
.header1
{
szín: zöld;
}
Az alábbi ábra a Lighthouse HTML-ben jelen lévő néhány fő osztályt mutatja.
A további osztályok és azonosítók a Lighthouse HTML megtekintésével vizsgálhatók. Ezt a webböngésző “Forrás megtekintése” funkciójával teheti meg.
A Lighthouse Studio egyes HTML elemei több osztályt és egy id-t tartalmaznak. Különböző módokat biztosítottak arra, hogy a CSS segítségével manipulálni lehessen a felmérés megjelenítését vagy stílusát. A “Q1” nevű kiválasztott kérdés HTML-je így néz ki:
<div class=”question select”>
…
</div>
Figyeljük meg, hogy ehhez a <div> taghez két “question” és “select” osztály van rendelve.
A következő CSS megváltoztatja a Header 1 stílusát a Q1 számára. Más kérdéseket nem érint.
#Q1_div .header1
{
color: blue;
}
A fenti # jel azonosítja a “Q1_div” azonosítóval rendelkező HTML tag-et. A “#Q1_div” után egy szóköz, majd “.header1” következik. Ez a CSS-szabály a Q1 kérdésen belül a Header 1 szövegét kékre változtatja. A következő az összes kérdés köré fekete keretet rajzol: