docdziedziczenie kaskadowanie w css - TSI-PAI
download 
Reklamacja Transkrypt
dziedziczenie kaskadowanie w css - TSI-PAI
DZIEDZICZENIE I KASKADOWANIE W JĘZYKU CSS
1. Dziedziczenie.
Elementy podrzędne dziedziczą właściwości przodków:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head>
<title>Przykład dziedziczenia</title>
Definicja właściwości background-color
<style type="text/css">
tabeli obowiązuje we wszystkich elementach
table { background-color: red; }
tabeli (table), wszystkich elementach wiersza
</style></head>
tabeli (tr) i wszystkich elementach komórek
<body>
tabeli (th i td) utworzonego dokumentu.
<table border="1">
<tr>
Wiersze i komórki mają kolor czerwony,
<th> Pierwsza kolumna </th>
ponieważ są elementami potomnymi tabeli i
<th> Druga kolumna </th>
dziedziczą po niej właściwości background</tr>
color. Ciało dokumentu (element nadrzędny
<tr>
<td> Pierwsza komórkaa </td>
tabeli) nie dziedziczy koloru tła, ponieważ jest
<td> Druga komórka</td>
przodkiem tabeli, a nie jej potomkiem.
</tr>
</table>
</body></html>
2. Kaskadowanie.
Kaskadowanie to mechanizm łączenia stylów przy stosowaniu ich do dokumentu.
Style w każdym dokumencie mogą pochodzić z kilku źródeł:
*style autora – to style, które dołączył autor dokumentu. Można umieścić je w nagłówku
dokumentu, dołączyć z odrębnego arkusza stylów (za pomocą znacznika <link> lub
reguł @import języka CSS) lub dodać wewnątrzwierszowo do pojedynczych
elementów.
*style użytkownika – to wskazane przez użytkownika style, które należy zastosować w
dokumencie. Są oparte na lokalnych arkuszach stylów i pozwalają zmodyfikować
domyślny wygląd strony.
*style przeglądarki – to ustawienia domyślne, których przeglądarka używa, jeśli dla danego
elementu lub dokumentu nie określono innych stylów. Style przeglądarki są
zwykle bardzo proste – czarny tekst na białym tle, nieco większa czcionka dla
nagłówków itd.
Reguła !important pozwala na odstępstwa od tego modelu. Autor lub użytkownik może dodać tą
regułę do stylu, aby podwyższyć jego priorytet. Aby oznaczyć styl jako ważny, należy określić
PO DEKLARACJI słowo kluczowe !important :
p {font-weight: bold !important; }
3. Specyficzność selektorów.
div p
p
{color: red;}
{color:blue;}
Można się spodziewać, że czcionka we wszystkich akapitach
będzie miała kolor niebieski. Jest jednak inaczej.
Tekst w akapitach zagnieżdżonych w blokach div będzie
czerwony. Pierwsza definicja jest bardziej specyficzna, ponieważ dotyczy akapitów, które są
potomkami elementów div. Reguła ta, ma wyższy priorytet niż bardziej ogólna definicja.
