Być może nasuwa Ci się pytanie:

  • No tak, style CSS wydają się być bardzo użytecznym rozwiązaniem, ale jak mam z nich korzystać, skoro nie znam struktury stylów CSS w moim szablonie? Nie wiem, który selektor czego dotyczy, i w ogóle nie wiem od czego zacząć!

W takiej sytuacji bardzo pomocna okazuje się opcja Zbadaj Element, dostępna w większości przeglądarek (np. Chrome, Mozilla czy Internet Explorer).

Aby jej użyć, wejdź na dowolną stronę internetową (najlepiej własną – tą którą właśnie tworzysz), najedź kursorem na interesujący Cię element strony (np. nagłówek, akapit lub zdjęcie) i naciśnij prawy przycisk myszy. Rozwinie się menu z na pewno dobrze znanymi Ci opcjami (zapisz stronę, drukuj, wyświetl źródło itp.) – ostatnią z nich jest właśnie „Zbadaj element”. Opcję można także uaktywnić naciskając kombinację klawiszy Ctrl + Shift + I.

Zbadaj elementPo uruchomieniu opcji „Zbadaj element”, w dolnej części przeglądarki pojawi się dodatkowe okno dialogowe, w którym znajdziemy kod źródłowy dotyczący badanego elementu oraz style CSS (zazwyczaj po prawej stronie okna).

Style CSS elementu można zmieniać bezpośrednio w tym oknie, a zmiany podglądać w czasie rzeczywistym w przeglądarce. Oczywiście, gdy odświeżymy stronę, wszystkie wprowadzone wcześniej zmiany zostaną usunięte. Niemniej jednak dzięki temu dowiesz się jaki styl należy zmienić, aby wprowadzić przewidziane zmiany na stałe.

Przykład:

Jeżeli chcesz wprowadzić zmiany w stylu CSS dotyczącym nagłówka wpisu, musisz kliknąć na nim prawym klawiszem myszy i wybrać opcję „Zbadaj element”.

Zbadaj elementZ okna Reguły dowiesz się, że za jego wygląd odpowiada selektor .entry-title. Pomiędzy klamrami dopisz odpowiednią deklarację (np. jeżeli chcesz zmienić kolor czcionki na czerwony – font-color: #dc0000;) i naciśnij Enter. Jeżeli na ekranie tytuł zmieni kolor na czerwony, oznacza to, że właśnie taką regułę musisz wpisać w odpowiednim polu Custom CSS (w szablonie lub wtyczce).

PS: O budowie stylu CSS przeczytasz w poprzednim wpisie – http://wpwizard.pl/wordpress-css/

One Thought to “Zbadaj element”

  1. Bardzo prosty i zrozumiały wpis dla początkujących użytkowników

Leave a Comment