3. Co to CSS?

Gotowi na lekcję kodów? Kody CSS brzmią jak czarna magia. Mam jednak nadzieję, że po tym artykule wszystko Wam się rozjaśni. Sama przez to przechodziłam i wiem jak strasznie to wyglądała na początku. Gdy jednak zacznie się obcować z pewnymi terminami, przestają być one takie obce. Najważniejsze jest by zrozumieć ten język a nie kopiować i wklejać gotowe kody. W taki sposób nie da się niczego nauczyć. Oczywiście potrzeba czasu. Pomimo trzech lat siedzenie w CSSie, wciąż korzystam ze ściągawki przy niektórych selektorach, jednak większość kodów znam i przede wszystkim rozumiem.

Każdy wie jak wygląda blog. Składa się on z kolumn, miejsca na post i gadżetów. Prócz tego każdy gadżet ma tytuł i swoją treść, post zawiera tytuł, datę, komentarze, autora itp. Selektor to nic innego jak nazwa danego elementu bloga. Za pomocą CSS można zmieniać jego wygląd. 

Załóżmy, że chcemy opisać wygląd naszego bloga używając normalnego, polskiego języka. Np.

tytuł posta {

     tło: czerwone ;

     kolor czcionki: biały ;

     wyrównanie tekstu: wyśrodkowany;

     wielkość czcionki: 25px ;

     odstęp między literami: 1px ;

}

Widząc taki zapis wiemy, że tytuł posta ma być wyśrodkowany, na czerwonym tle, o wielkość 25px itp. Znając kody CSS tworzenie szablonu właśnie tak wygląda. Zerknijcie jak powinien wyglądać taki opis wyglądu za pomocą kodów:

h3.post-title {

     background: red ;

     color: #fff ;

     text-align: center ;

     font-size: 25px ;

     letter-spacing: 1px ;

}

Nie chcę Was obrzucić milionem selektorów. Pragnę tylko byście zrozumieli ich działanie. To bardzo pomaga w dalszej pracy. Dlatego skupię się na wszystkich elementach zawartych w powyższym przykładzie.

Pisząc kod zaczynamy od selektora, czyli wybieramy jaki element bloga chcemy edytować. W tym przypadku jest to tytuł posta czyli h3.post-title. Aby wpisać wartości potrzebujemy otworzyć klamrę. Wszystko co znajduje się pomiędzy klamrami {} to wartości odpowiadające za edycje selektora. 

Jak już mamy h3.post-title { możemy zacząć wpisywać odpowiednie wartości. Każda wartość oddzielona jest średnikiem ;  bo inaczej nie będzie działać. 

W background, po dwukropku : można wpisać każdy kolor za pomocą: nazwy HTML (angielskiej nazwy) np. red, kodu szesnastkowego np. #FF000 lub kodu dziesiętnego RGBa(255, 0, 0, 1). Wykaz kolorów html można znaleźć w internecie lub posłużyć się próbnikiem koloru, który znajduje się w większości programach graficznych. Reasumując:

h3.post-title { background: red ; }

h3.post-title { background: #FF000 ; }

h3.post-title { background: RGBa(255, 0, 0, 1); }

Każda z powyższych wartości określa tło tytułu posta jako czerwony. 

Z color (czyli z kolorem czcionki) jest identycznie jak z tłem. Trzeba wpisać wartość odpowiadającą koloru. 

text-align odpowiada za wyrównanie tekstu. Większość z Was z pewnością korzystała z Worda. Jest tam opcja by wyrównać tekstu do prawej (text-align: right), do lewej (text-align: left), wyśrodkować tekst (text-align: center) lub wyjustować (text-align: justify). Ta opcja znajduje się nawet w bloggerze podczas pisania posta. 

font-size określa rozmiar czcionki. Jednostką wielkości są pixele np. 25px.

letter-spacing definiuje jaka będzie odległość pomiędzy literami. Tu także stosuje się pixele np. 1px.

W ten sposób edytuje się każdy element szablonu, zaczynając od nagłówka a kończąc na stopce. Pozwala nam to zmienić wygląd bloga i wyjść poza granice narzucone przez projektant bloggera. Za pomocą odpowiedniego opisu da się zrobić prawie wszystko: zmienić kształt, wielkość, kolor i wiele innych rzeczy. 

Mając tą wiedzę powinniście rozumieć na czym polega cały CSS. Pisząc ten artykuł starałam się zobrazować wam rolę kodów w najprostszy sposób. Jeśli nadal czegoś nie rozumiecie dajcie znać w komentarzu pod postem bądź zadajcie pytanie w odpowiedniej zakładce. W następnym poście przedstawię wam selektory, a przynajmniej ich część oraz popularne wartości.