Gyorstalpaló - Stíluslapok

Egy dokumentum tartalmának leírására HTML használható, a megjelenítést pedig stíluslapokkal lehet definiálni.
Stílus megadására háromféle lehetőség van:

Külső stíluslapon. Ez egy szövegfájl, aminek „css” kiterjesztést szokás adni. Erre a fájlra egy hivatkozás mutat a HTML dokumentum fejlécében, például:
```
<link rel="stylesheet" type="text/css"
 href="stiluslap1.css">
```
A href attribútum értékeként szereplő elérési útvonal megadására ugyan azok a szabályok vonatkoznak, mint a linkek URL-jére.
Dokumentum szintű stíluslapon. Ebben az esetben a stílusdefiníciók a HTML dokumentum fejlécében vannak és az egész dokumentum törzsre vonatkoznak.
Belső stíluslapon, ami csak egyetlen HTML tagra vonatkozik.

Bővebben a stíluslapok HTML dokumentumba illesztéséről »

Külső illetve dokumentum szintű stíluslapon több módon is megadhatod egy HTML tag megjelenítését. Az első lehetőség szerint a tag neve után kapcsos zárójelben kell felsorolni a tulajdonságértékeket:

p {font-size: 10pt; color: #888888; text-align: center}

Ez azt írja elő, hogy a bekezdések betűnagysága 10pt legyen, szürke színnel, középre igazítva. Ez a HTML dokumentum összes bekezdésére vonatkozik (hacsak egy belső stíluslappal nem írod fölül). A dokumentum törzsben például ezt írhatod:

Ez egy szürke mondat.

ami így jelenik meg:

Ez egy szürke mondat.

Egy másik lehetőség szerint stílusosztályt definiálhatsz, amire a megfelelő helyen hivatkozol. A fenti példával egyenértékű stílusmegadás:

.szürke {font-size: 10pt; color: #888888;
   text-align: center}

(Az osztálynév előtt pont van.) A dokumentum törzsben pedig az alábbit írhatod:

<p class=”szürke”>Ez egy szürke mondat.</p>

Belső stílusdefiníció esetén a HTML tag style attribútumának értékeként kell felsorolni a tulajdonságokat és azok értékeit:

<p style="font-size: 10pt; color: #888888;
   text-align: center”> Ez egy szürke mondat.</p>

Bővebben a HTML elemek stílus megadásáról »

Öröklődés

A stílusdefiníciók két ágon is öröklődnek. Az egyik ág a stíluslapoké. Például ha egy külső stíluslapon megadod:

p {font-size: 10pt; color: #0000ff}

a dokumentum szintű stíluslapon:

p {text-align: center}

a belső stíluslapon pedig:

akkor a bekezdés szövege 10pt betűnagysággal, középre igazítva, zöld háttérre szürkén lesz írva. Ebben az esetben minden tulajdonság öröklődött, kivéve a betűszínt, mivel a belső stíluslap felülírta a külső stíluslapon definiált értéket.

Az öröklődés másik ága a HTML tagok szülő-gyermek viszonya. Például az alábbi esetben:

<body style="color: #ff0000”>
   <p>Ez egy piros mondat.</p>
</body>

a böngésző a bekezdés szövegét piros színnel fogja megjeleníteni. Feltéve, hogy a  tag szövegszínére semmi sincs definiálva külső vagy dokumentum szintű stíluslapon. A  tag szövegszín stílusa öröklődik az őt tartalmazó <body> tagtól.

Bővebben a stílustulajdonságok öröklődéséről »

Még egy fontos dolgot kell tudnod az öröklődéssel kapcsolatban: Ha a weblapodon egy tulajdonságot sehol sem definiáltál, akkor az az olvasóid böngészőjének alapbeállítása szerint fog megjelenni.