Poznajemy do czego służy deklaracja "!important"
- Data publikacji
- Ostatnio edytowano
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.