Mój Blog - Mój Kod: Linki ogólne oraz budowa postu

Zrobiłam sobie naprawdę długą przerwę od bloga myśląc, że zajmę się robieniem portfolio, projektów, uczelnią. Okazało się jednak, że sporo ludzi czytających bloga, zwraca się do mnie w różnych sprawach. I wtedy poczułam, że jednak pisanie ma jednak sens. Mam możliwość poznania wielu świetnych osób, oraz pomocy im. Dlatego też wracam do pisania, wracam do tutoriali i wracam do czytelników. Wiem, że się cieszycie.
Mój powrót przeciągnął się również o budowę nowego szablonu, ale w końcu jest taki, jaki chciałam. A przynajmniej chwilowo nie razi mnie po oczach. A jak Wam się on podoba?

Dzisiaj zajmę się przede wszystkim linkami ogólnymi na blogu oraz selektorami dotyczącymi postu i jego ogólną budową.

Linki ogólne na blogu

Link jest elementem, który jeśli na niego klikniemy, odsyła nas do nowej strony. Pisząc post na blogu, wystarczy zaznaczyć odpowiedni tekst i kliknąć Link, a następnie dodać adres strony www, do której ma nas odsyłać ta część tekstu. Jest to więc proces automatyczny.
Z poziomu HTMLa link wygląda tak:

<a href="adres_strony_www">Tekst odsyłający</a>.

Selektor a jest naszym linkiem i koniecznie musi zostać zamknięty poprzez wpisanie komendy </a>. Warto sobie zapamiętać, że wszelkie reguły w kodzie HTML muszą być zamknięte i zawsze korzysta się z ukośnika. Będzie nam się to jeszcze przewijało w trakcie pracy nad blogiem.
Wracając do linków, wiemy już, jak wyglądają w kodzie HTML. Teraz ustalimy jak mają wyglądać na stronie i tutaj ponownie zaglądamy do arkusza stylów (patrz: Mój Blog - Mój Kod: Podstawy).

Domyślnie, linki na ogół są niebieskie, podkreślone, a odwiedzone - fioletowe. Aby to zmienić użyjemy selektora a.

a:link {
color:#ed1a45;
text-decoration:none;
}

Z poprzedniego wpisu wiemy, że deklaracja color oznacza kolor tekstu. W moim przypadku, ustawiłam sobie odcień czerwieni, który będzie kolorem wiodącym. Text-decoration oznacza nic innego jak dodatek do tekstu. Domyślnie w przypadku linków, jest to underline, czyli podkreślenie. Ja użyłam znacznika none, czyli po prostu niczego. Innymi cechami są:
overline - kreska nad wyrazem;
line-through - przekreślenie.
Teraz natomiast wytłumaczę, czemu selektor nazywa się a:link, a nie zwykłe a.
A:link oznacza aktywny link, w który można kliknąć. Oprócz tego, ustalimy wygląd dla a:hover, czyli linku, na który najeżdżamy oraz a:visited, czyli linku, który był już odwiedzony.

a:hover {
  text-decoration:none;
  color:#363636;
}

a:visited {
  text-decoration:none;
  color:#363636;
}

Po najechaniu na link, powinien on zmienić swój kolor na odcień czerni. Natomiast link już odwiedzony będzie cały czas czarny.

Ogólna budowa posta

Aby lepiej pokazać rozmieszczenie poszczególnych elementów, każdy selektor dostał ode mnie osobny kolor:
.main-inner - jest to zawartość naszego bloga bez nagłówka oraz stopki. U mnie obejmuje tylko jedną kolumnę, jednak w przypadku ustawienia dwukolumnowego, będzie obejmował również kolumne lewą / prawą. Aby nadać atrybuty konkretnej kolumnie używamy:
.main-inner .column-center-inner - kolumna środkowa;
.main-inner .column-right-inner - kolumna prawa;
.main-inner .column-left-inner - kolumna lewa.
Selektor dotyczący całego posta, razem z datą, tytułem i stopką to .date-outer (kolor szary). Jak łatwo zauważyć, data posta znajduję się właśnie bezpośrednio tutaj, jednak jeśli ktoś potrzebuje umieścić datę pod tytułem bądź w stopce - w następnym wpisie będzie na to sposób! Selektor .post-title (granatowy) dotyczy samej nazwy postu. Natomiast pod tytułem znajdują się dwie linie, w których możemy umieścić przykładowo etykiety, datę. Na obrazku, jako że w liniach niczego nie ma, to niestety ich nie widać. Ale w dalszych instrukcjach, skorzystamy z nich! Bliźniaczym selektorem do tytułu jest .post-footer (zielony), czyli stopka. W niej również znajdują się trzy linie, w których możemy ustawić odnośnik do komentarzy, etykiety czy autora postu. Pomiędzy nagłówkiem i stopką znajduje się .post-outer (niebieski), w którym znajdziemy odnośnik typu "czytaj więcej". Dopiero wewnątrz mamy .post-body (różowy), który obejmuje tylko nasz wpis.
Jak widać, selektorów jest całkiem sporo, ale dzięki temu mamy większe możliwości!

Najpierw zajmiemy się ustaleniem szerokości całej kolumnie, nadamy jej tło oraz marginesy wewnętrzne, czyli padding.

.main-inner .column-center-inner {
background:#fff;
width:800px;
padding:10px 10px;
}

W tym przypadku cała środkowa kolumna, w której znajdują się wpisy na blogu, otrzyma białe tło. Width oznacza szerokość, którą określamy w pixelach. Natomiast padding, jak już wcześniej wspominałam, to marginesy zewnętrzne. Określają nam, o jaką odległość odsunie nam się np. tekst od krawędzi do środka.

Jeśli wpiszemy:
padding:5px;
to tekst z każdej strony odsunie nam się o 5 px.
Jeśli wpiszemy:
padding:10px 20px;
oznaczać to będzie, że tekst od góry i od dołu odsunie nam się o 10 px, natomiast z prawej i lewej strony - o 20px.
Jeśli wpiszemy:
padding:5px 20px 0px 10px;
oznaczać to będzie, że tekst od góry odsunie nam się o 5 px, z prawej strony o 20px, z dołu o 0px, a z lewej strony o 10px.
Ogólny schemat wpisywania konkretnych wartości:
padding: top right bottom left. 
Jest to podobne do ruchu wskazówek zegara. Zawsze można skorzystać z konkretnych deklaracji np. padding-top:10px czy padding-right:20px. Tutaj decyzja należy już do was.
Wracając do mojego przykładu, wszelkie elementy odsuną się od krawędzi o 10px z każdej strony.

Przejdźmy teraz do kolejnego elementu, czyli .date-outer.

.date-outer {
padding:10px 10px;
background:none;
border:1px solid #00b9ee;
}

Tak jak w poprzednim przypadku, nadałam mu marginesy wewnętrzne. Tło ustawiłam jako żadne, ponieważ już poprzedni element nadał całości kolor. Natomiast, aby pokazać ten element, nadałam mu chwilowo ramkę - border. Pierwsza cecha (1px) oznacza grubość obramowania, kolejna to rodzaj obramowania. Solid oznacza ramkę ciągłą składającą się z jednej linii, ale można również użyć:
dotted - kropkowana;
dashed - kreseczki.

Ostatnia cecha to kolor obramowania.
Obramowanie możemy również nadać tylko z jednej strony. I tak jak w przypadku padding, posługujemy się regułą "według ruchu wskazówek zegara". Przykładowo deklaracja border-bottom nada ramkę, a raczej pojedynczą linię tylko dolnej części elementu. Będziemy z tego korzystali przy okazji nagłówka i stopki postu.

Każdy post jako osobny element

Zamiast nadawać całej kolumnie tło, nadamy je tylko poszczególnym postom.

.main-inner .column-center-inner {
background:none;
width:800px;
padding:10px 10px;
}

.date-outer {
padding:10px 10px;
background:#fff;
margin-bottom:20px;
border-radius:10px;
}

W pierwszej kolejności w selektorze .main-inner background ustawiamy na none, a w .date-outer ustawiamy je na białe. Aby efekt był lepiej widoczny, nadaję postom margin-bottom, który odpowiada za margines dolny. Również kasuję ramkę wokół postów i zamieniam ją na border-radius, który odpowiada za zaokrąglenie krawędzi. W tym momencie nadałam wszystkim rogom zagięcie 10px.
Posty są rozsunięte od siebie.


Kolejny tutorial poświęcę na omówienie nagłówka postu, samego wpisu oraz stopki. Także zachęcam do obserwowania! Chwilowo nie przewiduję dłuższego urlopu od pisania.
I jeszcze podsumowanie dzisiejszego postu.