18.09.2015

CSS: Jak odnaleźć nazwę elementu?

Niekiedy bywa tak, iż przeglądając naszą zacną stronę chcemy coś w niej zmienić, jednak... no właśnie. Nie znamy nawet nazwy elementu HTML, który mamy zamiar poddać modyfikacji. W jaki sposób ową nazwę elementu odnaleźć? Istnieje bardzo proste rozwiązanie.

Na początku najeżdżamy na wybrany element myszką, a następnie klikamy prawym przyciskiem. Otworzy się karta z dostępnymi funkcjami. Spośród nich wybieramy funkcję "Zbadaj element".

Zbadaj element

Zbadaj element

Zbadaj element

Po naciśnięciu polecenia "Zbadaj element" ukaże nam się na dole strony okno z dokładnym opisem wybranego elementu.

Jak odnaleźć nazwę elementu?

Jak odnaleźć nazwę elementu?

I tak dzięki temu dowiadujemy się, iż zaznaczony na powyższym screenie element nazywa się .Header h1 , zaś link do niego to .Header h1 a , natomiast div nosi nazwę Header1. Dowiadujemy się również, że link nie ma żadnych dekoracji tekstu, a jego kolor to #222, czyli ciemnoszary. Ponadto czcionka nagłówka waży 700, czyli jest pogrubiona (bold), jej wielkość to 93 pixele, zaś rodzaj czcionki to Cherry Cream Soda. Margines dolny wynosi 10px. 

I te wszystkie informacje uzyskaliśmy jedynie dzięki kliknięciu w polecenie "Zbadaj element". Mała rzecz, a cieszy. No i otwiera przed nami wiele możliwości modyfikacji skinu bloga.

A jak w takim razie odnaleźć nazwę gadżetu bloga? To okazuje się jeszcze prostsze. Wystarczy jedynie podążać za instrukcjami, które opisałam szczegółowa w poście dotyczącym tytułów gadżetów na bloggerze.

Należy również pamiętać o jednej ważnej rzeczy: przed nazwami elementu strony należy zawsze stawiać znak, który ukazuje się przed daną nazwą - jest to niezmiernie ważne i nie należy o tym zapominać. Może to być nagłówek, kropka, krzyżyk, div. lub div# - w zależności od wyświetlonej nazwy (np. h3.post-title, .sidebar .widget, .post-body img:hover, div#cookieChoiceInfo,  div#blog-pager, div.jump-link a), natomiast przed nazwami gadżetów w układzie bloga zawsze należy stawiać krzyżyk, czyli #. Całość powinna wyglądać następująco: #HTML1, #LinkList1, #PopularPosts1.

Chcesz wiedzieć więcej? Sprawdź moje porady dotyczące HTML oraz porady CSS. Znajdziesz w nich wszelkie niezbędne kody umożliwiające modyfikację wyglądu bloga.
Share:
Introwertyczka na Bloggerze Introwertyczka na Wordpressie Introwertyczka na Weebly Introwertyczka na Facebooku Introwertyczka na Twitterze Introwertyczka na Tumblerze Introwertyczka na Youtube Introwertyczka na Pinterest Introwertyczka na We♥it Introwertyczka na Bloglovin Introwertyczka na Google+ Introwertyczka na Google+ Introwertyczka na Pingerze Introwertyczka na Filmwebie Forum dla Ciebie Introwertyczka na Disqusie Napisz do mnie Subskrybuj blog
Kopiowanie treści jest zabronione. Wszelkie prawa zastrzeżone.