Wewnętrzny arkusz stylów <style>

Jak osadzić arkusz stylów CSS bezpośrednio w dokumencie?

<head>
	(...)
<style>
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>...</style> można ująć w komentarz HTML:

<style>
<!--
/* 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  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 <style>

Jeśli w treści nagłówkowej strony zostałby umieszczony następujący wewnętrzny arkusz stylów:

<style>
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? 🙂

Pytania i odpowiedzi <style>

W jakim elemencie powinien być umieszczony wewnętrzny arkusz stylów?

Wewnętrzny arkusz stylów CSS powinien być umieszczony wewnątrz znacznika <style> w sekcji <head> dokumentu HTML.

Jak zrobić arkusz stylów CSS?

Aby stworzyć arkusz stylów CSS, należy użyć znacznika <style> w sekcji <head> dokumentu HTML lub umieścić styl w zewnętrznym pliku CSS i dołączyć go za pomocą znacznika LINK.

Do czego służą arkusze stylów CSS?

Arkusze stylów CSS służą do definiowania wyglądu i formatowania elementów HTML, umożliwiając kontrolę nad kolorami tekstu oraz tła, rozmiarami czcionek, marginesami i innymi aspektami prezentacji strony.

Który znacznik pozwala na wewnętrzne dodawanie stylów CSS w kodzie HTML?

Znacznik <style> pozwala na wewnętrzne dodawanie stylów CSS w kodzie HTML.

Jakie są zastosowania osadzonego arkusza stylów?

Osadzony arkusz stylów (wewnętrzny) jest przydatny, gdy chcemy dostosować styl konkretnego dokumentu lub strony internetowej, unikając zmian globalnych. Jest szczególnie użyteczny przy tworzeniu pojedynczych stron lub dokumentów o specyficznym wyglądzie.