środa, 20 lutego 2013

Tutorial # 3 - CSS (selektory)

Gdy tworzyłem obecny szablon, najwięcej problemów przysporzył mi CSS. Dokładniej angielskie nazwy selektorów i cechy. Tworzę tu spis selektorów, zarówno tych podstawowych, jak i tych bardziej wyszukanych, których dotąd użyłem i które zapewne będę używał w przyszłości, a nazwy nie będę pamiętam :P Zapewne przydadzą się nie tylko mi. Dziś część I. W tym poście zajmę się selektorami, w przyszłym cechami i różnymi podstawowymi trickami. Starałem się spisać także te, które nie były jeszcze wymienione na żadnym blogu. Pomogą wam (i mi) przy tworzeniu własnego wyglądu bloga i kodu HTML.

  1. body - cały blog
  2. .header lub .header-inner - nagłówek z szerokością bloga - PATRZ
  3. .header-outer lub .header-fauxborder-left - też nagłówek, ale na całej szerokości - PATRZ
  4. .main-inner - obszar postów, kolumn i pagera(ad. 19) - PATRZ
  5. .main-outer - obszar postów kolumn i pagera(ad. 19), ale na całej szerokości - PATRZ
  6. .post-outer - post oprócz daty - PATRZ
  7. .date-outer - post z datą - PATRZ
  8. .hentry - coś podobnego do "post-outer" - PATRZ
  9. .post-body - tylko obszar pisania posta - PATRZ
  10. h2 - tytuły wszystkich gadżetów + data posta
  11. h2.date-outer lub .date-outer - tylko data posta
  12. h3 lub h3.post-title lub .post-title lub .entry-title - tylko tytuł posta
  13. .comment-link -  napis "... komentarzy" pod postem - PATRZ
  14. h4 lub .comments h4 - napis "... komentarzy" po kliknięciu w komentarze - PATRZ
  15. .post-footer - stopka posta - PATRZ
  16. .post-author lub .vcard - autor postu wyświetlany w notce
  17. .post-timestamp - okno godziny dodania postu (wraz z literą "o" przed godziną)
  18. .published - okno godziny dodania postu (bez litery "o" przed godziną)
  19. .blog-pager - obszar z napisami: "starsze posty", "nowe posty"
  20. .feed-links lub .blog-feeds - obszar z napisem "Subskrybuj: Posty (Atom)"
  21. .footer-inner - stopka bloga z szerokością bloga - PATRZ
  22. .footer-outer - stopka bloga, ale na całej szerokości
  23. .column-center-inner - środkowa kolumna - PATRZ
  24. .column-left-inner - lewa kolumna (nie to samo co 27)
  25. .column-right-inner - prawa kolumna
  26. .sidebar lub .sidebar.section - wszystkie gadżety we wszystkich kolumnach
  27. #sidebar-left-1 - wszystkie gadżety w lewej kolumnie (nie to samo co 24) - PATRZ
  28. #sidebar-right-1 - wszystkie gadżety w prawej kolumnie
  29. a:link - nieodwiedzony link
  30. a:hover - link po najechaniu myszką
  31. a:selected - odwiedzony link
  32. selektory i cechy do kart dodała już Yassmine -> TU
  33. nazwę selektora danego gadżetu można poznać najeżdżając na IKONĘ EDYCJI danego gadżetu i po znaku "#" wpisać to, co widnieje po "widgetId=". PRZYKŁAD

 
  W związku z moim wyjazdem na narty (środa-niedziela), nie mam pojęcia jak często będzie pojawiać się tu cokolwiek. Będę miał laptopa i pendrive, na którym mam wszystko, ale wiecie... to nie to samo. Może będzie pojawiać się tu coś codziennie, może rzadziej, a może w ogóle nic. Nie wiem, zobaczymy... Życzcie powodzenia ;) No i wreeeeeszcie odpocznę.
  Right in - Skrillex