Źródła stylów#

Styl lokalny#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<znacznik otwierający style="reguły CSS">...</znacznik zamykający>

Języki znacznikowe zgodne z arkuszami CSS powinny udostępniać mechanizm deklaracji stylu lokalnego (inline style) bezpośrednio w elementach. Odbywa się to za pomocą atrybutu stylu # (style attribute) o dowolnej nazwie, którego wartością będą polecenia CSS.

W przypadku HTML, XML lub SVG atrybutem stylu jest atrybut o nazwie style. Szczegółowe informacje na temat tego atrybut znajdują się w następujących specyfikacjach:

Atrybut style jest atrybutem globalnym, dlatego według HTML5 można go powiązać z każdym elementem (X)HTML - w przypadku poprzedniego standardu były ograniczenia. Na dzień dzisiejszy wartością atrybutu mogą być jedynie deklaracje, a nie wszystkie reguły dostępne w CSS. Dlatego też niemożliwe jest wstawienie do atrybutu style dyrektywy @import, selektorów, całych bloków deklaracji (w nawiasach klamrowych) i innych tego typu poleceń.

Z akademickiego punktu widzenia prawidłowa zawartość atrybut style opisywana jest następująco:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
declaration-list

	: S* declaration? [ ';' S* declaration? ]*

	;

Możliwe jest umieszczenie dowolnej liczby deklaracji CSS, które oddziela się między sobą za pomocą średnika (;). Z racji tego, że w składni atrybutu style nie występuje nawias otwierający ograniczający listę deklaracji, to nawias zamykający (}) w wartości atrybutu nie powoduje zakończenia poleceń stylu; jest to jedynie nieprawidłowy znak.

Zgodnie z konwencją CSS 2.1, komentarze CSS nie zostały zawarte w powyższej składni, chociaż ich umieszczenie w wartości atrybutu style jest prawidłowe i nie powoduje żadnych komplikacji w aktualnych przeglądarkach internetowych.

W aplikacjach klienckich wspierających CSS, wartość atrybutu style musi zostać sparsowana zgodnie z zasadami obowiązującymi w poszczególnych specyfikacjach CSS w chwili, kiedy atrybut jest dodawany, lub kiedy jego wartość ulega zmianie.

Dokumenty używające atrybutu style na jednym ze swoich elementów muszą być nadal zrozumiałe i użyteczne, nawet jeśli atrybuty te zostałyby usunięte. W związku z tym, używanie atrybutu style do ukrycia lub pokazywania zawartości, lub sugerowania w ten czy inny sposób, że zawartość ta nie jest częścią dokumentu, jest niewłaściwe (non-conforming). Do ukrywania i pokazywania zawartości należałoby użyć atrybutu hidden.

Kilka przykładów z prawidłowymi regułami:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<p style="/* Jakiś komentarz */ color: green /* Jakiś komentarz */">Przykładowy akapit.</p>
<div style="background: yellow">Przykładowy blok.</div>
<h1 style="font-size: 12pt; border: 5px solid">Przykładowy nagłówek</h1>

Interpretacja i kaskadowość#

Deklaracje wewnątrz atrybutu stylu mają zastosowanie dla elementu, do którego atrybut należy. W kaskadzie, deklaracje te zaliczane są do pochodzenia autora i mają specyficzność wyższą od jakiegokolwiek selektora. CSS 2.1 definiuje, jak arkusze stylów i atrybuty stylów kaskadują wzajemnie. Relatywne adresy URL wewnątrz danych stylu muszą być rozwiązywane względem elementu zawierającego atrybut stylu (lub względem dokumentu, jeśli taki wymóg dla elementu nie został zdefiniowany), gdy wartość atrybutu jest parsowana.

Oprócz różnic w kaskadowości, deklaracje wewnątrz atrybutu stylu muszą być interpretowane dokładnie tak, jak gdyby były podane w regule stylu CSS, która jest stosowana do elementu.

Grupa Robocza CSS (CSS Working Group) zdecydowania odradza wprowadzanie przez języki dokumentów wielu atrybutów stylu w pojedynczym elemencie. Jeżeli język dokumentu zezwala na wiele atrybutów stylu, to każdy musi być parsowany niezależnie i traktowany jako odrębna reguła stylu, w kolejności określonej przez język dokumentu.

Wewnątrz atrybutu stylu można stosować adnotację ważności. Deklaracje atrybutu stylu oznaczone ważnością będą miały wyższy priorytet niż pozostałe deklaracje autora (zwykłe jak i ważne). Zwykłe deklaracje wewnątrz atrybutu stylu przesłonią zwykłe deklaracje autora (ale nie deklaracje oznaczone ważnością).

Podsumowanie#

Wykorzystanie stylu lokalnego jest silnie odradzane. Umieszczanie reguł CSS bezpośrednio w ciele dokumentu HTML jest niezgodne z ideą podziału na warstwy. Atrybut style został oznaczony jako zdeprecjonowany w XTML 1.1, chociaż ze względu na kompatybilność wsteczną jest wciąż opisywany przez najnowsze specyfikacje. W pewnym sensie style lokalne są niewiele lepsze od prehistorycznego znacznika <font>, choć są o wiele bardziej elastyczne.

Są pewne sytuacje w których atrybut style okazuje się przydatny. Kiedy pracujemy z kodem HTML, i chcemy szybko przetestować pewne aspekty wizualne, to style lokalne będą najszybszym sposobem (choć z pewnymi ograniczeniami wymienionymi wcześniej). Oczywiście w kodzie produkcyjnym reguły umieszczone w stylach lokalnych należałoby przenieść do stylów zewnętrznych lub wewnętrznych.

Nie należy zapominać także o dynamicznym modyfikowaniu stylów za pomocą JavaScriptu i DOM. Atrybut style ma swój obiektowy odpowiednik w postaci właściwości Element.style, która zwraca deklaracje CSS (obiekt typu CSSStyleDeclaration). Dzięki tej właściwości zmiana formatowania danego elementu jest o wiele prostsza, niż próba modyfikacji obiektów CSS pochodzących z zewnętrznych lub wewnętrznych arkuszy CSS. Łatwość tej metody wynika z faktu, że reguły w stylach lokalnych mają wyższą specyficzność w kaskadzie niż pozostałe warianty, dlatego dopisanie dodatkowych reguł niemal zawsze przesłoni pozostałe deklaracje.

Prosty przykład:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<!DOCTYPE html>
<html>

<head>

	<style>

		p {color: blue;} /* Domyślne style dla każdego akapitu */

	</style>

	<script>

		function changeStyle(style, id){

			var p = document.getElementById(id); // referencja do akapitu

			p.style.cssText = style; // dynamiczna zmiana stylów

		}

	</script>

</head>

<body>
	<p id="p1">Akapit z atrybutem id="p1".</p>
	<p id="p2">Akapit z atrybutem id="p2".</p>
	<p id="p3">Akapit z atrybutem id="p3".</p>

	<p>Kliknij konkretny przycisk by zmienić formatowanie konkretnego akapitu przy użyciu właściwości style.</p>
	<input type="button" value="Akapit 2" onclick="changeStyle('color: green;', 'p2')">
	<input type="button" value="Akapit 3" onclick="changeStyle('background: yellow;', 'p3')">
</body>

</html>

W powyższym przykładzie modyfikacja wyglądu odbywa się w sposób dynamiczny - dodatkowe reguły wstawiane są dopiero po stronie użytkownika, nie śmiecimy w kodzie znacznikowym poleceniami odpowiedzialnymi tylko za formatowanie - dlatego omawiane rozwiązanie uznawane jest za poprawne. Warto jedynie rozważyć sytuację, w której zamiast modyfikowania stylów lokalnych w elemencie, po prostu przypiszemy lub zmienimy mu klasy (za pomocą właściwości Element.className lub Element.classList), których reguły umieścimy w zewnętrznym lub wewnętrznym arkuszu stylów, przez co całość nabierze większej elastyczności.

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Źródła stylów (H1) Styl lokalny (H2) Interpretacja i kaskadowość (H3) Podsumowanie (H3)