Przejdź do treści

Wstawianie stylów

Wewnętrzny arkusz stylów

<head>
	(...)
<style type="text/css">
/* <![CDATA[ */
selektor { cecha: wartość; cecha2: wartość2... }
selektor2 { cecha: wartość; cecha2: wartość2... }
(...)
/* ]]> */
</style>
	(...)
</head>
gdzie w sposób wyróżniony zaznaczono elementy składowe wewnętrznego arkusza stylów. Natomiast w miejsce kropek (...) można wpisać dalsze polecenia.

Selektorem może być praktycznie dowolny znacznik, np. p (akapit), h1 (tytuł), td (komórka tabeli) i inne. To właśnie elementom, które znajdują się w kodzie źródłowym, pomiędzy tymi znacznikami, nadajemy atrybuty formatowania opisane w arkuszu.

Jako "cecha" (w deklaracji stylu - powyżej) należy wpisać o jakie konkretnie atrybuty formatowania nam chodzi (opisane w kolejnych rozdziałach).

Natomiast jako wyraz "wartość" wpisujemy dokładną wartość atrybutu.

Zwróć uwagę, że jednemu selektorowi możemy nadać kilka atrybutów (cech). Są one wtedy rozdzielone średnikami.

Wewnętrzny arkusz stylów wstawia się zawsze w części nagłówkowej dokumentu (pomiędzy znacznikami <head> a </head>). Można go zastosować, gdy elementy które pragniemy poddać formatowaniu, występują wielokrotnie na stronie i wszystkim chcemy nadać takie same atrybuty (inne niż domyślne). Na przykład chcemy, aby wszystkie wykazy miały automatycznie kolor niebieski. Wystarczy wpisać odpowiednią deklarację stylów w arkuszu (w treści nagłówkowej) i nie trzeba już nic dopisywać przy samym elemencie.

Komentarze w arkuszu stylów pisze się używając znaków: /* (otworzenie komentarza) oraz */ (zamknięcie komentarza), np.: /*12345*/. Wszystko pomiędzy tymi znakami jest ignorowane przez przeglądarkę. Komentarzy takich nie można zagnieżdżać, tzn. niedozwolony jest zapis: /*123/*000*/456*/. Komentarz może składać się z wielu linii, np.:

/* Ten tekst zostanie zignorowany przez przeglądarkę,
ale może zawierać informacje cenne dla projektanta arkusza CSS */

Ponadto w języku HTML całą zawartość arkusza stylów, tzn. wnętrze znacznika <style type="text/css">...</style> można ująć w komentarz HTML:

<style type="text/css">
<!--
/* To jest arkusz stylów kompatybilny wstecz */
-->
</style>

Dzięki nim treść arkusza nie będzie widoczna na ekranie starszych przeglądarek, które nie obsługują stylów. Aktualnie jednak trudno znaleźć przeglądarkę, która nie potrafiłaby zinterpretować znacznika STYLE. Oczywiście znaki <!-- oraz --> znajdujące się na początku i na końcu arkusza, nie są znakami komentarza stylów lecz HTML i nie można ich używać wewnątrz arkusza w innych miejscach niż podane!

W języku XHTML ukrywanie arkusza CSS w komentarzach <!-- ... --> jest niezalecane. XHTML jest zgodny z XML, gdzie panuje zasada, że przed etapem właściwego parsowania dokumentu, można z niego usunąć wszystkie komentarze. Oznaczałoby to, że tego typu skrypty i arkusze w ogóle nie byłyby brane pod uwagę przy renderowaniu strony!

Znacznik STYLE może znajdować się tylko i wyłącznie w nagłówku dokumentu.

Przykład:

Jeśli w treści nagłówkowej strony zostałby umieszczony następujący wewnętrzny arkusz stylów: 
<style type="text/css">
/* <![CDATA[ */
h6 { color: red }
/* ]]> */
</style>
to po wpisaniu w dowolnym miejscu strony po prostu: 
<h6>To jest tytuł rzędu 6</h6>
otrzymalibyśmy tytuł rzędu szóstego koloru czerwonego (color: red) i to niezależnie od tego, ile będzie na stronie takich tytułów. Wygodne, prawda? :-)

Zobacz także

Więcej tematów

Dotacje

Pomogła Ci ta strona? Chcesz, aby dalej się rozwijała?
Dotpay - Bezpieczne transakcje internetowePayPalWpłać dobrowolną dotację...