002. Selektory

W poprzedniej notatce wspomniałem o selektorach. Nie możecie bez nich tworzyć CSS, mam nadzieję że dzisiejsza notka pomoże wam w tworzeniu szablonów na waszym blogu.

Co to jest selektor?
Selektor to jakaś część na blogu. Mogą być to posty, a może kolumny, nagłówek, napis, karty i wiele innych. Każdy widget można oddzielić inaczej, zawsze każda część ma inną nazwę, czyli selektor.

Co w dzisiejszej notatce?
~ Najważniejsze selektory oraz ich wytłumaczenie
~ Selektory mniej ważne
~ Selektory w poście (trochę ich tam jest)
~ Inne selektory czyli co to h1, h2, h3, h4
~ Selektory widgetów

Jeśli chcesz przeczytać całość naciśnij na "Czytaj więcej"

SELEKTORY GŁÓWNE

body - cały blog

.header - nagłówek bloga

.main-inner - wszystkie kolumny

#Blog1 - obszar postu (wraz z jego datą) i pagera bloga

.date-outer - obszar postu (wraz z jego datą) bez pagera bloga

.post-outer - obszar postu, bez jego daty i pagera bloga

.footer-outer - stopka (na szerokości całego ekranu)

.footer-inner - stopka (jedynie na szerokości bloga)

.Attribution - napis na stopce

.navbar - pasek nawigacyjny

a:hover - linki po najechaniu myszką

SELEKTORY KOLUMN

.column-right-inner - prawa kolumna (cała)
#sidebar-right-1 - pojedyncza prawa kolumna
#sidebar-right-2-1 - lewa pod kolumna w prawej kolumnie
#sidebar-right-2-2 - prawa pod kolumna w prawej kolumnie

Jeśli chcecie wydać rozkaz na kolumnę lewą, wystarczy że zmienicie 'right' na 'left'

SELEKTORY POSTA

h2.date-header - obszar nagłówka z datą
h3.post-title - cały obszar tytułu posta
h3.post-title a:hover - tytuł posta po najechaniu na niego myszką
.post-body - obszar samej notki
.post-footer - stopka posta
.post-author - autor zawarty w stopce posta

.post-timestamp - godzina zawarta w stopce posta

.comment-link - ilość komentarzy zawarta w stopce posta

.post-footer-line-2 - etykiety zawarte w stopce posta

.blog-pager - obszar z przyciskami: starsze posty, nowsze posły, strona główna

.blog-pager a:hover - przyciski pagera bloga po najechaniu na nie myszką

.feed-links - napis "Subskrybuj Posty: (Atom)" pod pagerem bloga

.comments h4 - duży nagłówek z ilością wszystkich komentarzy pod postem

.comment p - wszystkie komentarze, ten selektor może nam posłużyć np. do ustawienia tła, które będzie się pojawiać w każdym komentarzu

.avatar-image-container - wszystkie awatary obok komentarzy

.post-body img - wszystkie obrazki, które umieścimy w notkach, ten selektor może posłużyć nam np. do ustawienia tła pod obrazkami

.jump-link - "Czytaj więcej"

SELEKTORY SPECJALNE

h1 - tytuł bloga

h2 - tytuł gadżetów oraz daty

h3 - tytuł posta

h4 - napis "Brak Komentarzy" (po kliknięciu myszą i ukazaniu komentarzy)

SELEKTORY WIDGETÓW / GADŻETÓW

.tabs-outer - karty w jednym pasku

.tabs-inner - karty w osobnych paskach

.tabs-inner .widget li a:hover - karty po najechaniu myszą

#BlogArchive1 - archiwum bloga

#BlogArchive a:hover - linki w archiwum po najechaniu myszą

#Stats1 - statystyka bloga

.counter-wrapper - licznik odwiedzin (bez tytułu)

#PageList1 - strony na blogu

#PageList1 a - linki w stronach na blogu

#PageList1 a:hover - linki w kartach po najechaniu myszą

#Label1 - etykiety

#LinkList1 - lista linków

#Text1 - tekst na blogu

Liczbę '1' np. w tekście można zmienić na '2', wtedy kod dotyczył będzie drugiego gadżetu tekstowego, jeśli nie jest on wstawiony to nie ma sensu zmieniać cyfr.

Kody (częściowo) zaczerpnięte z tego bloga.

Do zobaczenia w kolejnej notatce / Daddiexteet