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).

to jest przykładowy element - p

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, o czym była mowa w jednej z poprzednich części tego kursu CSS.

Element p otrzymał niebieski kolor tekstu (blue), ponieważ druga reguła CSS (.drugi_styl) nadpisała pierwszą regułę CSS (p), o czym była mowa w poprzedniej części tego kursu CSS.

Wyżej wymienione zasady możemy "łamać" za pomocą deklaracji !important, co zostało zaprezentowane w kodzie HTML, który znajduje się poniżej:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>
	
    <style>
      p {
        color:white !important;
        background-color:blue;
      }
      .drugi_styl {
        color:blue;
        background-color:black !important;
      }
    </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ł 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.

to jest przykładowy element - p

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.