Lekcja 1.3. - Kaskadowe Arkusze Stylu - Osadzanie stylu

Style osadzone

Na poprzedniej lekcji omówiliśmy style, które wpisujemy bezpośrednio do znaczników HTML. W ten sposób wpisywane modyfikują one działanie konkretnego znacznika tzn. tylko tego, w który zostały wpisane. Teraz zobaczymy jak można modyfikować działanie wszystkich znaczników określonego typu.

Jak już wspomniano style osadzone to te, które umieszczamy w sekcji head. Muszą się one znajdować w osobnym bloku wydzielonym przez parę powołanych do tego celu znaczników STYLE. Znacznik style posiada atrybut type, który określa typ stylu, a mianowicie text/CSS. Ze względu na starsze przeglądarki nie obsługujące styli wewnątrz bloku zastosowano również znak komentarza. Dzięki temu zawartość bloku nie jest przez te przeglądarki wyświetlana na ekranie.

<style type="text/css">
<!--

-->
</style>

Wewnątrz bloku znajdują się informacje dotyczące stylu danej strony. Jak już wspomnieliśmy, "arkusz" stylu może modyfikować działanie znaczników okreslonego typu. Dzieje się to dzieki użyciu tzw selektorów. Selektor to nic innego jak nazwa znacznika.
Przez przyporządkowanie selektorowi określonego stylu, określamy styl dla wszystkich znaczników danego typu.
W odróżnieniu od znacznika, w którym styl zapisany jest pomiędzy cudzysłowami, tutaj zapisujemy go pomiędzy nawiasami klamrowymi nastepującymi zaraz po selektorze. Oto przykład:

<style type="text/css">
<!--
body {font-family:arial; font-size:10pt; color:navy}

p , td, input {font-family:arial; font-size:9pt; color:black}

-->
</style>

Możemy styl przyporzadkować kilku znacznikom na raz wypisując kilka selektorów koło siebie i oddzielając je przecinkami , tak jak to zostało zrobione w przykładzie powyżej.


dalej