Jak modyfikować wygląd strony w "locie" przy użyciu CSS z użyciem Firefoksa?
Poniższy opis pokazuje, jak w prosty sposób modyfikować wygląd strony. Poradnik zakłada, że czytelnik posiada przynajmniej podstawową znajomość języka CSS lub chce się nauczyć.
Kroki
1
Zakładam, że masz zainstalowaną przeglądarkę Firefox. Jeżeli tak, zainstaluj teraz dodatek o nazwe Firebug -
Po instalacji w dolnym prawym rogu pojawi się logo w kształcie robaka (z ang. bug;-)).
Po instalacji w dolnym prawym rogu pojawi się logo w kształcie robaka (z ang. bug;-)).
2
Sprawdźmy, czy dodatek działa. Klikamy na dodatek Firebug (dolny prawy róg). Przechodzimy do zakładki CSS. Powinno pojawić się coś takiego jak na zdjęciu. Kod, który się tam wyświetla, nas nie interesuje. O tym później.
3
Wchodzimy na stronę, którą chcemy lekko zmodyfikować;-). W przykładzie użyję strony Wikipedii.
Więc tak. Strona ma nudne białe tło. Czcionka też jest do kitu;)
Klikamy na robaka w prawym dolnym ekranie (czyt. Firebug).
Klikamy na zakładkę CSS. Poniżej widzimy kod CSS. Za tło strony odpowiada wpis background-color (zaznaczone czerwoną linią), natomiast za czcionkę - font-family (zielona linia).
Modyfikujemy te wpisy.
W pozycji background-color wpisujemy co chcemy - może być nazwa koloru po angielsku lub kolor zapisany szesnastkowo. Kolor czarny to #000000, czerwony - #FF0000. Blok dzieli się na trzy części w układzie RGB (Red Green Blue). UWAGA! W sekcji body { } usuwamy wpis background-image.
W linii font-family wpisujemy inną czcionkę. Np. courier new.
Więc tak. Strona ma nudne białe tło. Czcionka też jest do kitu;)
Klikamy na robaka w prawym dolnym ekranie (czyt. Firebug).
Klikamy na zakładkę CSS. Poniżej widzimy kod CSS. Za tło strony odpowiada wpis background-color (zaznaczone czerwoną linią), natomiast za czcionkę - font-family (zielona linia).
Modyfikujemy te wpisy.
W pozycji background-color wpisujemy co chcemy - może być nazwa koloru po angielsku lub kolor zapisany szesnastkowo. Kolor czarny to #000000, czerwony - #FF0000. Blok dzieli się na trzy części w układzie RGB (Red Green Blue). UWAGA! W sekcji body { } usuwamy wpis background-image.
W linii font-family wpisujemy inną czcionkę. Np. courier new.
4
Zmiany na stronie widać w czasie rzeczywistym, dlatego narzędzie jest bardzo ciekawe do nauki języka CSS. Poza tym Firebuga można używać do wielu innych rzeczy, ale o tym innym razem.
Oceń tę poradę
3.0
(4 glosow)
Twoja ocena: