Witryny aplikacji internetowych - Kaskadowość arkuszy stylów i dziedziczenie
1. Kiedy w dokumencie są umieszczone odwołania do kilku zewnętrznych arkuszy stylów lub na stronie jest użyty zewnętrzny arkusz stylów, deklaracja stylów w nagłówku strony lub pojawia się styl lokalny może pojawić się konflikt dotyczący sposobu formatowania tego samego elementu w różnych arkuszach stylów. W związku z tym ustalono priorytety w określaniu stylów.
I. Styl lokalny (najważniejszy)
II. Rozciąganie stylu
III. Wydzielone bloki
IV. Wewnętrzny arkusz stylów
V. Zewnętrzny arkusz stylów
VI. Import stylów do zewnętrznego arkusza
VII. Atrybuty definiowane w dokumencie HTML
2. Rozciąganie stylu - znacznik <span>
Służy on do grupowania kilku elementów strony w celu nadania im określonego stylu. Styl dla znacznika <span> ustala się przy użyciu stylu CSS:
np.
<span style=color: red>CSS</span>
3. Wydzielone bloki - znacznik <div>
Używając go można pogrupować elementy strony w bloki i formatować za pomocą stylów. Zdefiniowane bloki mogą zawierać m.in. akapity, listy i inne bloki.
np.
<div style=width: 500px; height: 100px; background-color: yellow; font-style: italic;>
</div>
4. W języku HTML często występuje zagnieżdżanie jednego elementu wewnątrz drugiego. Jeśli dla elementu nadrzędnego w arkuszach stylów zostały zdefiniowane właściwości, to w większości przypadków elementowi podrzędnemu zostaną przypisane te same właściwości, nawet jeśli nie zostały dla niego zdefiniowane. Mechanizm ten nazwany jest dziedziczeniem.
5. Zasady kaskadowości można zmieniać poprzez polecenie !important, umieszczone w deklaracji stylu po wartości, której dotyczy. Takie umiejscowienie tego polecenia spowoduje, że właściwość zdefiniowana dla elementu będzie miała pierwszeństwo, nawet gdy ma niższy priorytet.
np.
<style>
p {font-size: 20pt, color: green !important;}
</style>
I. Styl lokalny (najważniejszy)
II. Rozciąganie stylu
III. Wydzielone bloki
IV. Wewnętrzny arkusz stylów
V. Zewnętrzny arkusz stylów
VI. Import stylów do zewnętrznego arkusza
VII. Atrybuty definiowane w dokumencie HTML
2. Rozciąganie stylu - znacznik <span>
Służy on do grupowania kilku elementów strony w celu nadania im określonego stylu. Styl dla znacznika <span> ustala się przy użyciu stylu CSS:
np.
<span style=color: red>CSS</span>
3. Wydzielone bloki - znacznik <div>
Używając go można pogrupować elementy strony w bloki i formatować za pomocą stylów. Zdefiniowane bloki mogą zawierać m.in. akapity, listy i inne bloki.
np.
<div style=width: 500px; height: 100px; background-color: yellow; font-style: italic;>
</div>
4. W języku HTML często występuje zagnieżdżanie jednego elementu wewnątrz drugiego. Jeśli dla elementu nadrzędnego w arkuszach stylów zostały zdefiniowane właściwości, to w większości przypadków elementowi podrzędnemu zostaną przypisane te same właściwości, nawet jeśli nie zostały dla niego zdefiniowane. Mechanizm ten nazwany jest dziedziczeniem.
5. Zasady kaskadowości można zmieniać poprzez polecenie !important, umieszczone w deklaracji stylu po wartości, której dotyczy. Takie umiejscowienie tego polecenia spowoduje, że właściwość zdefiniowana dla elementu będzie miała pierwszeństwo, nawet gdy ma niższy priorytet.
np.
<style>
p {font-size: 20pt, color: green !important;}
</style>