Skoro już się uczyłam, to niech inni też skorzystają. CSS pisze się łatwo. Najpierw selektor tj. nazwa tego, co chcemy zmienić. Potem otwieramy nawias klamrą, wpisujemy cechy i wartości, jeśli jest dużo par cecha-wartość oddzielamy średnikiem i zamykamy klamrą. Cała filozofia w znajomości selektorów i cech.
selektor {cecha: wartość;}
Zbiór będę uzupełniać, jak się czegoś nauczę.
Selektory:
- * - wszystko
- a - linki w całym blogu lub przy połączeniu z innym selektorem linki w części bloga, można też określić czy chodzi o linki zwykłe, przy najechaniu myszką czy odwiedzone pisząc: a:link, a:hover lub a:visited, czy nawet :selected, na moment kliknięcia
- a.blog-pager-newer-link - przycisk nowsze posty, też ma te trzy ustawienia
- a.blog-pager-older-link - przycisk starsze posty
- a.home-link - przycisk strony głównej, te trzy bez a z przodu działają na obszar, a nie tylko na sam link
- .Attribution - napis w stopce, to o technologii Blogger
- #Attribution1 - napis w stopce
- .avatar-image-container - wszystkie awatary obok komentarzy
- b - pogrubienie
- blockquote - cytat, możecie nim ustawiać tło cytatów w poście i inne takie
- #Blog1 - obszar postu z datą i pagerem
- #Blog1_comments-block-wrapper - komentarze bez liczby komentarzy nad nimi
- #BlogArchive1 - archiwum bloga, w moim przypadku to z tytułem ,,Posty"
- #BlogArchive1 ul.posts a - linki do postów w archiwum
- #BlogArchive1 a.post-count-link - linki poziomów hierarchii w tego rodzaju archiwum
- #BloggerButton - button Bloggera
- .blog-pager - obszar z przyciskami starsze posty, gdy sprawdzałam selektory chyba coś źle wpisałam, bo nie zadziałał
- #blog-pager - ale ten działa i właśnie to źle wpisałam
- .blog-posts - #Blog1 bez pagera
- body - wszystko, przyda się np. do tła
- #cookieChoiceInfo a - napis Dowiedz się więcej
- #cookieChoiceInfo > a:nth-child(2),a#cookieChoiceDismiss - selektory przycisk Rozumiem, nie wiem, czy to są synonimy, czy można napisać tylko jeden, czy konieczne są dwa, przy dodawaniu :hover zróbcie to przy obu selektorów #cookieChoiceInfo > a:nth-child(2):hover,a#cookieChoiceDismiss:hover
- .column-left - lewa kolumna
- .column-left-outer - lewa kolumna, do ustawień tła
- .column-left-inner - lewa kolumna, do ramki (nie wiem, o co chodzi, w miarę możliwość piszę samą kolumnę)
- .column-left-inner .widget - gadżety w lewej kolumnie
- .column-right-outer - prawa kolumna
- .column-right-inner .widget - gadżety w prawej kolumnie
- .comment-author - mniej więcej to samo co drugi selektor niżej
- .comment-delete - przycisk usunięcia komentarza
- .comment-form - tym selektorem udało mi się zrobić dziwną ramkę pod komentarzami, bez zawartości
- .comment-header - nagłówek komentarza z autorem, datą i godziną
- .comment-link - ilość komentarzy w stopce posta
- .comment p - wszystkie komentarze, można tym np. ustawić tło komentarzy
- .comment-timestamp - data dodania komentarza
- .comments-body - obszar komentarza, każdego osobno
- #comments-block - obszar komentarzy, ale bez awatarów
- .comments h4 - liczba komentarzy nad nimi
- .comments-footer - stopka komentarza
- .content - cały blog bez paska nawigacyjnego
- .content-inner - zawartość tego contentu
- .counter-wrapper - licznik odwiedzin w gadżecie ze statystyką
- .date-posts - post z treścią, nagłówkiem i stopką, ale bez daty u góry i bez ramki z tej strony
- .date-header - data
- .date-header span - pole z datą
- .date-outer - post z datą, taki #Blog1 bez pagera
- .description - opis
- .descriptionwrapper - szerszy opis
- div#cookieChoiceInfo - cały pasek z informacją o cookies (nie lubię tłumaczyć tego słowa odkąd w jakimś powiadomieniu zobaczyłam ciasteczka wymienione w tekście ileś razy, za każdym razem w cudzysłowie, pochylone i niezależnie od kontekstu w tym samym przypadku, przepraszam purystów językowych)
- .entry-title - tytuł posta
- .entry-content - sam tekst posta, nawet bez jump-linku
- .fauxcolumn-center-outer - kolumna środkowa
- .fauxcolumn-left-outer - pozwala zrobić tło kolumny tak długie jak środkowa kolumna, nawet gdy nie ma tyle zawartości w kolumnie, wersja z inner nie działa, zwykłe .column-left-inner i .column-left-outer mają tę wadę, że w pierwszym robisz ramkę, której nie da się zaokrąglić, w drugim tło i dajesz border-radius, który je zaokrągla, ale ramki zaokrąglonej już nie zrobisz
- .fauxcolumn-right-inner - to samo, ale po prawej
- :first-line - pierwsza linijka tekstu
- :first-letter - pierwsza litera każdego akapitu tekstu
- #FeaturedPost1 - polecany post
- #FeaturedPost1 h3 - tytuł polecanego posta
- #FeaturedPost1 img - obrazek z polecanego posta
- .feed-link - napis Posty (Atom)
- .feed-links - część z tym napisem na szerokości bloga
- #Followers1 - gadżet z obserwatorami
- .foot - każdy widżet w stopce cały
- #footer-1 - widżet w pierwszej linijce stopki, na całej szerokości bloga
- #footer-2-1 - pierwszy z lewej widżet w drugiej linijce stopki, mam nadzieję, że z tych dwóch wywnioskujecie, jak oznaczać widżety liczbami
- .footer-inner - stopka na szerokości bloga
- .footer-outer - stopka na całej szerokości
- .gsc-input - miejsce na wpisanie zapytania w gadżecie szukaj
- .gsc-search-button - przycisk szukaj w tym gadżecie
- h1 - w podręczniku o nim piszą, ale jakoś nie działa sam, za to zadziałał po połączeniu z selektorem a
- h1.post-title - obszar tytułu posta, gdy zmienisz sobie h3 na h1
- h1.post-title a - tytuł posta po tej zmianie
- h2 - tytuł gadżetu czy czegoś innego, generalnie łączymy go z określeniem, czego nagłówek
- h3.post-title - obszar tytułu posta
- h3.post-title a - tytuł posta
- h4 - mniejszy nagłówek
- h5 - nagłóweczek niezauważalny
- h6 - nagłówek?
- .header - nagłówek bloga (tekst)
- .header-inner - nagłówek na szerokości bloga
- .header-outer - nagłówek na całej szerokości ekranu
- #Header1 - nagłówek (?)
- .Header h1 - tytuł bloga, tylko tu mi zadziałał selektor h1
- hr - separator
- i - kursywa
- #Image1 - gadżet z obrazkiem
- .jump-link - przycisk czytaj więcej w poście, obszar
- .jump-link a - sam tekst przycisku
- .jump-link img - obrazkowy przycisk
- #Label1 - gadżet z etykietami bloga
- #Links1 - gadżet z linkami
- .main-inner - wszystkie kolumny i pager
- .main-inner .widget - wszystkie widżety we wszystkich kolumnach, to także zmienia kolor tekstu postu, chyba że to tytuł, link, etykieta...
- .navbar - pasek nawigacyjny u góry
- #Navbar1 - pasek nawigacyjny, ja używałam selektora wyżej
- p - tekst
- #PageList1 - gadżet ze stronami (u mnie go nie ma, jest gadżet z tekstem, w którym są linki... nieważne, teraz już jest)
- #Poll1 - ankieta
- #PopularPosts1 - gadżet popularnych postów
- #PopularPosts1 .item-snippet - tekst popularnego postu
- #PopularPosts1 .item-title - tytuł popularnego postu
- #Profile1 - gadżet z profilem
- .post - post bez daty, ale ma nagłówek i stopkę
- .post-author - autor w stopce posta
- .post-author span - o ile tamto to napis Autor: Sławomira, o tyle ten selektor to samo moje imię
- .post-body - obszar samego tekstu, bez nagłówka i stopki
- .post-body img - wszystkie obrazki w notkach
- .post-body .tr-caption-container td - podpis pod obrazkiem w poście
- .post-comment-link - obszar linku do komentarzy
- .post-footer - stopka postu
- .post-footer-line-2 - etykiety (u mnie są na razie tak umieszczone) albo coś co jest w drugiej linijce stopki
- .post-header - obszar między nagłówkiem, a tekstem (tu mogą być etykiety, reakcje)
- .post-header-line-1 - pierwsza linijka tego obszaru
- .post-icons - ikony pod postem
- .post-labels - etykiety pod postem
- .post li - listy w poście, te punktowane, jeśli chcecie zmienić punktor to właśnie to jest potrzebne
- .post-location - obszar z informacja, gdzie post został napisany
- .post-outer - obszar postu, bez daty i pagera
- .post-share-buttons - przyciski do udostępnienia posta w różnych miejscach
- .post-timestamp - godzina w stopce posta
- .post-timestamp a - same cyferki oznaczające godziny
- .post-title - obszar tytułu posta
- .post-title a - tekst tytułu posta
- .region-inner - header-inner, tabs-inner, main-inner, footer-inner na raz, ale oddzielnie (jak zrobisz ramkę, to wszystko się poodziela), nieważne, czy masz te elementy z jakąś zawartością i tak się sformatują
- .reaction-buttons - reakcje do zaznaczenie i napis Reakcje
- .reaction-buttons table - tabela zawierająca selektor wyżej
- .reactions-iframe - reakcje do zaznaczenia
- .reactions-labell-cell - napis Reakcje
- s - skreślenie
- .showpageNum a -linki numerów stron
- .showpageOf - napis, na której stronie jesteśmy
- .showpagePoint - link do strony, którą przeglądamy
- #sidebar-left-1 - pojedyncza lewa kolumna
- #sidebar-left-2-1 - pojedyncza lewa podkolumna w lewej kolumnie
- #sidebar-left-2-2 - pojedyncza lewa podkolumna w prawej kolumnie
- #sidebar-right-1 - pojedyncza prawa kolumna
- #sidebar-right-2-1 - pojedyncza lewa podkolumna w prawej kolumnie
- #sidebar-right-2-2 - pojedyncza prawa podkolumna w prawej kolumnie
- span.post-count - liczba postów z danego okresu w nawiasie, archiwum hierarchia
- #Stats1 - gadżet ze statystyką bloga
- .status-msg-body - informacja o tym, że przeglądacie posty z etykietą lub wyniki wyszukiwania
- .status-msg-border - ramka wokół tej informacj
- #Subscribe1 - subskrybuj
- table - tabela
- table th - nagłówek tabeli
- table td - komórka tabeli
- .tabs-outer - cały pasek poziomych kart
- .tabs-inner - ten sam pasek na szerokości bloga
- .tabs-inner .widget - widżety w tym pasku
- .tabs-inner .widget a - linki kart
- #Text1 - gadżet z tekstem (moje menu)
- .tittlewrapper - nagłówek bloga na szerokości jego zawartości
- .tr-caption-container - obrazek w poście wraz z podpisem, cała ta ramka
- u - podkreślenie
- ::-webkit-scrollbar - suwak do przewijania strony
- ::-webkit-scrollbar-track - ta część suwaka po której przesuwamy część niżej lub wyżej
- ::-webkit-scrollbar-thumb - to, co przesuwamy
- .widget-content - zawartość wszystkich gadżetów
Selektor gadżetu można sprawdzić w układzie. Należy najechać kursorem na słowo edytuj i czekać. W lewym dolnym rogu pojawi się taki długi link i tak będzie widget id. Jeśli gadżet jest umieszczony kilka razy, to przy kolejnych zamiast 1 jest 2, 3 czy ile tam macie. Warto zauważyć, że selektor :hover działa nie tylko na linki, ale raczej tylko do nich się go używa. Generalnie, można ładnie składać selektory. Np. #Profile1 img lub .main-inner .widget a:hover.
Brak komentarzy:
Prześlij komentarz