Warning: file_get_contents(http://graph.facebook.com/http://youthcoders.net/html-css/kurs-css/1121-css-dyrektywa-important.html): failed to open stream: HTTP request failed! HTTP/1.0 403 Forbidden in /var/www/old-yc/plugins/content/addthis.php on line 38
CSS: Dyrektywa !important |
Wpisany przez Kacper Kołodziej | |
niedziela, 18 września 2011 14:10 | |
Dzisiaj powiem o mało znanej wśród początkujących adpetów sztuki tworzenia stron www, za to bardzo dobrze znanej wśród "wyjadaczy", dyrektywie !important obecnej w języku stylów CSS. Zacznijmy od pewnego przykładu. Załóżmy, że dostajemy od kogoś do wstawienia na naszą stronę kod js, który generuje odpowiednie elementy i ostylowuje je inline (tzn. wewnątrz atrybutu style w kodzie html). Zwykłe style w arkuszu CSS się przez to nie przebiją. Za to style oznaczone dyrektywą !important już tak :) I to cały sekret ładnie sformatowanych widgetów AdTaily, Twitter itp. :) Jak korzystać z dyrektywy !important?Załózmy, że chcemy, aby wybrana przez nas czcionka "przebijała się" bez względu na wszystko do tagów <p> w bloku div o id="main". Normalnie stworzylibyśmy taki styl: div#main p { font: bold 13px tahoma, verdana, sans; } Wystarczy, że nasz akapit będzie wyglądał tak: <p style="font: italic 12px serif;">treść</p> a nasz styl za nic nie zmieni czcionki np. na pogrubioną tahomę o rozmiarze 13px. Dostaniemy czcionkę szeryfową domyślną dla przeglądarki w rozmiarze 12px i to jeszcze z kursywą. Możemy jednak przechytrzyć twórcę kodu html i dodać do naszego kodu dyrektywę !important, a w prargrafie tekstu zostanie użyty nasz styl :) Będzie to wyglądało tak: div#main p {
font: bold 13px tahoma, verdana, sans !important;
}
Jak widzimy na powyższym przykładzie, !important, dodajemy na samym końcu linii właściwości danej cechy. Robimy to jednak przed znakiem średnika! Praktyczne zastosowanieW ten sposób możemy stworzyć np. bardzo ładny widget AdTaily. Przykład będzie można zobaczyć w ciągu kilku dni na guitarway.pl :) Ja na swojej stronie w ten sposób oczyściłem ze zbędnych elementów widget mojego profilu w serwisie Twitter. Zachęcam do samodzielnego eksperymentowania i chwalenia się efektami :) Kacper Kołodziej
|