Wstawianie stylów - CSS
Kaskadowość stylów
Co to jest kaskadowość stylów CSS? W jaki sposób złamać zasadę kaskadowości?
Kaskadowość stylów
Kaskadowość stylów określa pierwszeństwo w oddziaływaniu na te same elementy strony stylów z różnych źródeł. Na przykład: na naszej stronie używamy zewnętrznego arkusza stylów, deklaracji stylów w nagłówku strony, a także stylów typu inline, przy czym dotyczą one formatowania dokładnie tego samego elementu (np. kroju czcionki). Co się stanie w takim przypadku? Czy nie powstaną konflikty? A może komputer się "zawiesi"? Nic z tych rzeczy! A to właśnie ze względu na kaskadowość. To od niej wzięły swoją nazwę style: CSS - (ang. Cascading Style Sheets) Kaskadowe Arkusze Stylów.
Jeśli w dokumencie znajduje się kilka źródeł stylów, pierwszeństwo mają te, które znajdują się "bliżej" formatowanego elementu. Oddziaływanie stylów z arkuszy zewnętrznych może być modyfikowane przez style zdefiniowane w nagłówku dokumentu, to z kolei może być zmieniane przez style zdefiniowane bezpośrednio w ciele dokumentu (inline). Zatem priorytet ważności stylów (pierwszeństwo) wyglądałby tak:
- Styl lokalny (inline)
- Rozciąganie stylu (SPAN)
- Wydzielone bloki (DIV)
- Wewnętrzny arkusz stylów
- Import stylów do wewnętrznego arkusza
- Zewnętrzny arkusz stylów
- Import stylów do zewnętrznego arkusza
- (Atrybuty prezentacyjne HTML - np.
align="...",bgcolor="...",color="...",height="...",width="..."i inne)
Style o wyższym priorytecie ważności (na początku listy) mają pierwszeństwo w modyfikowaniu elementów dokumentu. Style niżej w hierarchii mogą zmienić formatowanie jakiegoś elementu, tylko jeśli style o wyższym priorytecie nie dotyczą tego konkretnego elementu. Na szczególną uwagę zasługuje również fakt, że style CSS z dowolnego źródła zawsze są ważniejsze niż atrybuty prezentacyjne przypisane elementom bezpośrednio w kodzie HTML, mimo iż wydawać by się mogło, że powinna tutaj zachodzić zasada taka jak w przypadku stylu lokalnego.
Kaskadowość stylów pozwala zatem pracować z kilkoma źródłami stylów, bez obawy o wystąpienie konfliktów. Takie rozwiązanie jest bardzo wygodne, ponieważ możemy np. zdefiniować ogólny wygląd naszego serwisu w zewnętrznym arkuszu i dodatkowo zmienić nieco wybrane strony poprzez wewnętrzny arkusz, a jeśli zajdzie konieczność zmodyfikować pojedyncze elementy za pomocą stylu lokalnego.
UWAGA! Polecenie dołączenia zewnętrznego arkusza powinno znajdować się w dokumencie wcześniej niż wewnętrzny arkusz. Odwrotna kolejność złamie zasady kaskadowości!
Jeżeli natomiast chodzi o zasady kaskadowości wewnątrz tego samego arkusza CSS, tzn. w przypadku, kiedy znajduje się w nim kilka osobnych reguł CSS o jednakowej szczegółowości (ważności), odnoszących się do tej samej cechy tego samego elementu, to ostateczny wpływ na formatowanie będą miały reguły umieszczone na końcu.
Łamanie kaskadowości !important
Można świadomie zmienić zasady kaskadowości. Służy do tego polecenie !important. Jeżeli pojawi się ono w deklaracji stylu po wartości cechy, spowoduje to, że taka cecha będzie miała pierwszeństwo przed innymi, nawet jeśli ma niższy priorytet. Natomiast inne cechy takiej deklaracji będą interpretowane normalnie, chyba że również przy nich postawimy !important. Nie należy jednak przesadzać ze stosowaniem tej metody, ponieważ jawnie łamie ona zasadę kaskadowości i po jakimś czasie może Ci znacznie utrudnić analizę sposobu formatowania elementów.
Przykład !important
Gdyby w arkuszu stylów tej strony została umieszczona następująca reguła:h6 { color: blue !important; background-color: green }to pomimo wpisania następującego stylu inline (który ma pierwszeństwo przed arkuszami stylów)<h6 style="color: red; background-color: yellow"> Ten tytuł nie jest napisany czcionką koloru czerwonego, lecz niebieskiego, mimo wstawienia stylu inline. Natomiast tło pozostaje żółte. </h6>otrzymalibyśmy tytuł koloru niebieskiego (blue) jednak nadal na żółtym (yellow) tle.
Pytania i odpowiedzi
Na czym polega kaskadowość w CSS?
Kaskadowość w CSS oznacza, że wiele reguł stylów może dotyczyć tego samego elementu HTML. Styl określony bliżej elementu (np. wewnętrzny arkusz stylów lub styl osadzony) ma wyższy priorytet niż styl zdefiniowany dalej (np. zewnętrzny arkusz stylów). Konflikty w stylach rozstrzyga tzw. mechanizm dziedziczenia oraz specyficzność selektorów CSS.
Który styl CSS ma najwyższy priorytet?
Najwyższy priorytet ma styl zdefiniowany w sposób inline, czyli bezpośrednio w elemencie HTML za pomocą atrybutu style. Na przykład: <p style="color: red">Tekst czerwony</p>. Styl zdefiniowany w ten sposób ma pierwszeństwo nad stylami wewnętrznymi (osadzonymi) i zewnętrznymi.