Ta strona demonstruje czym jest kaskadowość styl CSS W skrócie CSS, C to cascading. Elementy podrzedne niżej znajdujące się w strukturze (drzewie) HTML dziedziczą cechy elementów nadrzędnych.
To jest DIV z pismem szeryfowym.
i wszystkie teksty w tym DIVie będą przybierały styl liter z rodziny z szeryfami
Przykładowy tekst, przykladowy tekst i jeszcze troche literek.
To jest DIV z zielonymi literami.
i wszystkie dalej będą dziedziczyć zieloność
Przykładowy tekst, przykladowy tekst i jeszcze troche literek.
To są pogrubione litery
Przykładowy tekst, przykladowy tekst i jeszcze troche literek.
To są pochylone litery
Przykładowy tekst, przykladowy tekst i jeszcze troche literek.
To jest DIV z czeronymi literami.
i wszystkie dalej będą dziedziczyć czerwoność
Przykładowy tekst, przykladowy tekst i jeszcze troche literek.
To są pogrubione litery
Przykładowy tekst, przykladowy tekst i jeszcze troche literek.
To są pochylone litery
Przykładowy tekst, przykladowy tekst i jeszcze troche literek.
To jest DIV z pismem bezszeryfowym.
i wszystkie teksty w tym DIVie będą używały liter z rodziny bez szeryfów
Przykładowy tekst, przykladowy tekst i jeszcze troche literek.
To jest DIV z zielonymi literami.
i wszystkie dalej będą dziedziczyć zieloność
Przykładowy tekst, przykladowy tekst i jeszcze troche literek.
To są pogrubione litery
Przykładowy tekst, przykladowy tekst i jeszcze troche literek.
To są pochylone litery
Przykładowy tekst, przykladowy tekst i jeszcze troche literek.
To jest DIV z czeronymi literami.
i wszystkie dalej będą dziedziczyć czerwoność
Przykładowy tekst, przykladowy tekst i jeszcze troche literek.
To są pogrubione litery
Przykładowy tekst, przykladowy tekst i jeszcze troche literek.
To są pochylone litery
Przykładowy tekst, przykladowy tekst i jeszcze troche literek.
div {background-color: #eee;
border: 2px solid black;
margin: 4px 4px;
padding: 3px;
width: 45%;
float: left;
}
.sherif{font-family: "Times New Roman", Times, serif;}
.sans-sherif {font-family: Arial, Helvetica, sans-serif;}
.zielony {color: #669933;}
.czerwony { color: #FF3300;}
.gruby {font-weight: bold;}
.pochyly {font-style: italic;}W stylach do tego przykladu został zdefinniowany styl dla DIV, iwszystkie DIVy mają dlatego raz in przypisany czarny obrys i szare tło. Dla przykładowych napisów zostały stworzone 6 CLASS, a w każdej znich zostala zdefinnowana jedna cecha liter. Te 6 CLASS starczyło by powstało 14 każdy odmienny styl napisu. Gdyby nie kaskadowość, trzeba by stworzyć 14 opisów stylu i każdy opis musiałby być bardzo rozbudowany, bo musiało by być w nim zawarte wszystkie cechy, które tu wynikają z kaskadowości (dziedziczenia)
Pierwszą cechą jaką okresliliśmy dla napisów to czy jest to font z szeryfami
czy bez. Cecha ta została odziedziczona przez wszystkie napisy w DIVie mimo,
że wprowadzaliśmy następnie inne cechy, jak kolor i pogrubienie/pochylenie..
A jak przerwać to dziedziczenie? Mamy już dość dziedziczenia np. cechy że wszystkie
napisy są czerwone, a chcemy by znów były czarne. - Trzeba zdefinniowac sytyl
w którym wstawimy color:
black; i jeśli w elemencie tym nowym, będziemy umieszczas następne elementy, to te jako podrzędne będą dziedziczyć cechę czarnego koloru, zapominając na zawsze o kolorze czerwonym.