search

21. Poznajemy do czego służy deklaracja "!important"

W poprzednich częściach tego kursu CSS poznaliśmy kilka zasad, według których przeglądarka internetowa wybiera właściwości CSS dla danego elementu HTML. Działanie tych zasad miało miejsce w sytuacji gdy właściwości CSS, które miał otrzymać ten sam element HTML bądź grupa elementów HTML, były zapisane w różnych miejscach dokumentu HTML bądź osobnych plikach CSS dołączonych do danego dokumentu HTML.

W realnym świecie na co dzień musimy przestrzegać różnych zasad oraz reguł, jednak czasami w wyjątkowych sytuacjach zdarza nam się je łamać. W tej części kursu CSS poznamy deklarację !important, która służy do "łamania" niektórych, dotychczasowo poznanych zasad. Pod spodem został zaprezentowany kod dokumentu HTML, w którym znajduje się przykładowy element p, do którego są dodawane, na różny sposób, właściwość color oraz właściwość background-color.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      p {
        color:white;
        background-color:blue;
      }
      .drugi_styl {
        color:blue;
        background-color:black;
      }
    </style>
  </head>

  <body>

    <p style="background-color:gold;" class="drugi_styl">
      to jest przykładowy element - p
    </p>

  </body>
</html>

Po wyświetleniu w oknie przeglądarki internetowej dokumentu HTML, który został przedstawiony powyżej, nasz przykładowy element p będzie posiadał złoty kolor tła (gold) oraz niebieski kolor tekstu (blue).

Element p otrzymał złoty kolor tła (gold), ponieważ właściwości CSS umieszczone w atrybucie style mają pierwszeństwo przed właściwościami znajdującymi się w innych miejscach dokumentu HTML. Element p otrzymał niebieski kolor tekstu (blue), ponieważ druga reguła CSS (.drugi_styl) nadpisała pierwszą regułę CSS (p). Wyżej wymienione zasady możemy "łamać" za pomocą deklaracji !important, co zostało zaprezentowane w kodzie HTML, który znajduje się poniżej:

Po wyświetleniu w oknie przeglądarki internetowej dokumentu HTML, który został przedstawiony powyżej, nasz przykładowy element p będzie posiadał czarny kolor tła (black) oraz biały kolor tekstu (white), ponieważ skorzystaliśmy z deklaracji !important, która wymusza na przeglądarce internetowej, aby dany element otrzymał tą, a nie inną wartość danej właściwości CSS, niezależnie od innych zasad.

Ogólnie deklaracja !important nie jest za często wykorzystywana, jednak należy wiedzieć o jej istnieniu, ponieważ czasami może nam się przydać.

W kolejnej części kursu CSS poznamy sposoby tworzenia osobnych reguł CSS dla różnych wersji przeglądarki Internet Explorer, która czasami sprawia problemy przy poprawnej interpretacji niektórych właściwości CSS.

Previous20. Stopień ważności selektorów CSSNext22. Osobne reguły CSS dla przeglądarki Internet Explorer

Last updated