CSS

Wygląd naszego bloga jest bardzo ważną istotą. To on tak naprawdę ma wielki wpływ na naszych odbiorców. Wielu z Was chce aby strona internetowa, którą prowadzicie przyciągała uwagę. Była prosta i estetyczna, a jednocześnie pokazywała główną tematykę o jakiej piszemy. Niestety, sprawa utrudnia się kiedy do stworzenia czegoś zwykłego musimy użyć różnych kodów. Jedne są bardzo proste, inne zaś złożone. Ale istota trudności nie leży w kodzie, a w naszym rozumowaniu. Dlatego ten post powstał aby chociaż trochę naprowadzić Was na tzw. trudność w prostocie zwyczajnego zbioru słów i liczb. 

Może zacznijmy od samego początku. Każdy kod składa się z selektoru, właściwości i wartości. 

Powiedzmy, że chcemy zmienić pozycję naszego nagłówka, ponieważ nie pasuje nam jego umieszczenie na blogu. Jest przesunięty na prawą  stronę naszego bloga, a my chcemy mieć go na środku. Do tego używamy kodu:

Przez co nasz nagłówek przesuwa się w stronę prawą. Wartość czyli ,,-20px'' możemy zwiększać, bądź zmniejszać, im większa liczba na minusie, tym bardziej w lewo będzie przemieszczał się nagłówek. Im większa liczba na plusie - w prawo. Jeżeli uważamy, że nasz nagłówek jest za nisko i chcemy go podnieść - używamy do tego właściwości:

margin-top: -20px;

Co sprawi, że nasz nagłówek przesunie się w górę strony, im większa wartość na minusie, tym wyżej znajduje się nasz nagłówek. Im większa wartość na plusie jest on umieszczony niżej. Powyższe właściwości możemy używać również do innych selektorów.

Skoro wiemy już jak zmieniać pozycje nagłówka i innych części naszego bloga, możemy zabrać się za kolejne kody.  

Jak się domyślamy - post jest centralną częścią naszego bloga, tak więc jego selektor jest bardzo prosty:

.column-center-inner

Pole naszego posta, jak i wiele innych elementów naszego bloga możemy modyfikować na wiele różnych sposobów. Musimy jedynie znać kilka podstawowych właściwości, a wygląd poszczególnych selektorów będziemy mięli opanowany. 

Oprócz zmiany tła możemy zmienić też inne właściwości, np:

border-bottom: 00px ____ #____;  - bok dolny

border-top: 00px ____ #___; - bok górny

border-right: 00px ____ #___; - bok prawy

border-left: 00px ____ #___; - bok lewy

np. border-bottom: 2px solid #5d5de5;
są różne typy ramek:
solid - pojedyńcza
double - podwójna
dotted - kropkowana
dashed - kreskowana

jeżeli chcemy ustawić taką samą ramkę dla wszystkich boków wystarczy nam jedna właściwość:
border: 00px ____ #___;

border-radius: 00px 00px 00px 00px;
zaokrąglone rogi, każda wartość przynależy do innego rogu; chcąc zmienić wszystkie rogi jednocześnie podajemy jedną wartość, tj:
border-radius: 00px;

text-align: ____;
jest to ustawienie tekstu:
center - wyśrodkowany
left - od lewej krawędzi
right - od prawej krawędzi

family-font: Barbara;
zmiana czcionki

font-size: 00px;
wielkość czcionki

color: #___;
kolor tekstu

Oczywiście oprócz selektorów takich jak nagłówek oraz post są również inne. Dane kody podam i odpowiednio pogrupuję, aby były łatwiejsze w odszukaniu.

body - dosłownie cały blog

.content - cały blog, bez paska nawigacyjnego

.description - opis bloga

#Header1 - nagłówek bloga

.column-center-inner - środkowa kolumna, czyli post

.column-right-inner - prawa kolumna

.column-left-inner - lewa kolumna

#sidebar-right-2-1 - lewa kolumna w prawej kolumnie

#sidebar-right-2-2 - prawa kolumna w prawej kolumnie

#sidebar-left-inner-2-1 - lewa kolumna w lewej kolumnie

#sidebar-left-inner-2-2 - prawa kolumna w lewej kolumnie

.date-header -data

.date header span - całe pole daty

.post-title - tytuł posta
.post-outer - post bez daty
.post - post z nagłówkiem i stopką, bez daty

.post-body - sam post, bez nagłówka, daty i stopki posta

.post-body img - obrazki/zdjęcia w poście

.post-footer - stopka posta

. post-author - autor bloga

.post-timestamp - godzina publikacji posta

.comment-link - link do komentarzy 

.post-comment-link - ramka wokół linku do komentarzy

.post-icons - ikony pod postem

.post-labels - etykiety posta

.blog-pager a - linki ,,Starszy Post, Strona Główna, Nowszy Post''

#blog-pager - ramka z linkami ,,Starszy Post, Strona Główna, Nowszy Post''

.feed-links - napis ,,Subskrybuj posty: (Atom)''

.comments - ramka ze wszystkimi komentarzami, liczbą komentarzy

#comments-block - ramka komentarzy bez awatarów 

.comment-author - pole z nazwą autora komentarza

.comment-body - tekst komentarza

.comment-footer - stopka komentarza (czyli data dodania + linki)

.avatar-image-container - awatary obok komentarzy

.footer-outer - stopka na całą szerokość okna

.footer-inner - stopka na szerokość zawartości bloga

#footer-1 - pierwsza linijka na całą szerokość zawartości bloga

#footer-2-1 - pierwszy z lewej widget w stopce

#footer-2-2 - drugi z lewej widget w stopce

#footer-2-3 - trzeci z lewej widget w stopce

#footer-2 - widget w trzeciej linijce w stopce (po prawej)

.Attribution - nazwa szablonu + napis Technologia Blogger

KARTY POZIOME:

.tabs-outer - cały pasek

.tabs-inner ul li - osobne przyciski

.tabs-inner .widget li a - linki kart

KARTY PIONOWE:
#PageList1 li a:link, #PageList1 li a:visited - wszystkie karty
#PageList1 li a:hover - karty po najechaniu na nie myszką
#PageList1 li:nth-child(1) - pierwsza karta
#PageList1 li:nth-child(2) - druga karta

#PageList1 li:nth-child(3) - trzecia karta

#Navbar1 - pasek nawigacyjny

#Profile1 - o mnie

#BlogArchive1 - archiwum bloga

#Stats1 - statystyki

#Followers1 - obserwatorzy

#Label1 - etykiety

#BlogList1 - lista blogów

#LinkList1 - lista linków

#Image1 - obrazek

#Text1 - tekst

#HTML - HTML/JavaScript

#PopularPosts1 - popularne posty

#BloggerButton1 - button Bloggera

Mam nadzieję, że chociaż trochę ułatwiłam Wam pracę w CSS'ach i macie na nie bardziej pozytywne myślenie. Wiem, że naprawdę się rozpisałam, ale starałam się zawrzeć w tym poście jak najwięcej informacji, których możecie szukać. Mam nadzieję, że znajdziecie je właśnie tutaj. Może kiedyś napiszę również osobny post o Kodach HTML, Ale to będzie zależało już od Was kochani :)

Jeżeli nadal czegoś nie wiesz - napisz w komentarzu - postaram się pomóc, jak tylko będę w stanie oczywiście.