[CSS] Pierwsze kroki

Dziś opowiem co nieco o CSS'owaniu. Gdy uczułam się wpisywać w menadżer szablonu komendy, byłam całkowitym laikiem, co powodowało u mnie ogromne problemy ze zrozumieniem instrukcji CSS ze stronek i blogów. Pamiętając problemy, jakie miałam, wpadłam na pomysł, by napisać prosty poradnik dla osoby, która nigdy nie miała z tym styczności. W kolejnych notkach będę coraz bardziej zagłębiała się w tajniki pisania kodu. A zatem, głęboki oddech i do dzieła!

Selektory

Selektor to to, co określa nam dany element konstrukcji bloga. Może on mieć różne dopiski, jednak zawsze jest to konkretna nazwa, którą trzeba zapisać dokładnie tak, jak jest wskazana. 

Przykład:
#PageList1 – odnosi się do listy stron na blogu. Jedynka informuje tu o pierwszym dodanym gadżecie, zatem kolejny dodany gadżet stron będzie mieć selektor #PageList2. Czasem zapomnimy o tym, który gadżet „Strony” dodaliśmy pierwszy, więc podpowiem moją całkowicie nieinformatyczną metodę na zweryfikowanie tego: trzeba drastycznie w nim coś zmienić, np. kolor tła. 

Atrybuty

Gdy wybraliśmy już element, który planujemy zmienić na blogu za pomocą kodu, musimy dodać do niego atrybuty. Używamy do tego nawiasów klamrowych, które ja nazywam sobie wąsami. Kolejne atrybuty oddzielamy od siebie średnikiem. 

Przykład:
Chcemy zrobić czerwone tło dla listy stron oraz, by dookoła była czarna ramka.
Wpisujemy selektor, następnie otwieramy wąsy, wpisujemy dwa atrybuty z określeniem po dwukropku, oddzielone średnikiem, zamykamy wąsy.
Atrybut dla tła: background, dla koloru obramowania: border-color.
#PageList1{background: red; border-color: black}

Na tym etapie wiemy już jak działają selektory, atrybuty i ich określenia. Wykaz selektorów i atrybutów znajduje się w menu katalogu, przy czym ten pierwszy jest odnośnikiem do bloga, z którego korzystałam przy nauce.

Jeśli chcemy stworzyć bloga, w którym nie tylko pobawimy się zmienianiem kolorów, ale zapragniemy zrobić ciekawe ramki czy animacje, zapraszam do zerknięcia na dalsze części instruktażu, w których skupię się już na dopieszczaniu estetyki.

W tej notce wspomnę o dopiskach do selektorów, wspomnianych na początku. Są to:

a – linki. Ten dopisek przy selektorze sprawia, że edytujemy wygląd linku (napisu)
li – również linki, stosowane do kodowania #PageList1 oraz #LinkList1; dzięki temu dopiskowi możemy utworzyć np. dwukolorowe menu, poprzestawiać poszczególne pozycje, zastosować różne animacje dla kolejnych linków (odnosi się do przycisku).
span – do edycji etykiet po zaznaczeniu lub samej daty w poście.
img – odnosi się do zdjęć (np. w poście).
Wszystkie dopiski na bieżąco będą uzupełniane oraz dostępne w spisie. Jak je zastosować?
Nic w tym trudnego! Zapisujemy je po spacji za selektorem, a przed wąsami.
#PageList1 a {background: red}

To jak na razie tyle podstaw. W następnych częściach znajdziecie inne instrukcje.