Kodowanie CSS

Zanim przejdę do omówienia stylowania CSS strony, którą stworzyliśmy w poprzednim kursie, warto wspomnieć kilka słów o samym CSS’ie.

Style CSS (cascade style sheet (kaskadowe arkuszy stylów)) – zostały stworzone przez W3C w celu opisania znaczników html wartością stylistyczną oddzielającą je od reszty ciała dokumentu. Dla przykładu, patrząc na budowę dokumentu html, można w nim wyróżnić takie elementy jak np. nagłówki h1, h2, h3, h4, h5, h6. Dzięki stylom CSS, przeglądarki są w stanie urozmaicić ich wygląd – w przeciwnym razie wszystkie nagłówki wyglądałyby tak samo bez względu na ich priorytet. Jeśli już jesteśmy przy przeglądarkach to warto wspomnieć, że posiadają również wbudowane style CSS, które będziemy musieli zresetować, dla pełnej kontroli nad stylistyką dokumentu.

Tworzenie stron www cd.

Poprzedni wpis, mówiący o kodowaniu strony html zakończyliśmy z takim oto efektem:

Jeżeli strona jest dla was „zbyt jałowa” lub posiada za mało tekstu, warto zamiast tekstu „Sekcja #” dodać tekst lorem ipsum (tekst napisany w taki sposób, aby każdy akapit wykorzystywał pełną pulę liter alfabetu), można go pobrać ze strony: lipsum. Jeżeli nie macie żadnych wytycznych odnośnie tego, jaki układ ma mieć tworzona strona internetowa, warto poświecić dłuższą chwilę nad zastanowieniem się nad tym.

Tworzenie stron www – stylowanie css

Dla zapominalskich, proces stylowania rozpoczynamy od stworzenia arkusza styli .css. W tym celu w edytorze tekstowym tworzymy nowy plik i zapisujemy go pod nazwą style.css (oczywiście nazwa może się różnić). Gdy już mamy odpowiedni plik, musimy wrócić do naszego dokumentu html i odpowiednio plik zainicjować tak, aby był on widoczny dla przeglądarki internetowej. Aby tego dokonać wprowadzamy następującą regułę do sekcji head dokumentu:

<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"style.css\"/>

Ta linijka kodu jest równoznaczna z zawarciem pliku .css w dokumencie html, dzięki czemu przeglądarka internetowa natrafiając na odpowiednie węzły (elementy, znaczniki) dokumentu html będzie poszukiwała informacji w pliku CSS o ich stylowaniu. W przypadku odnalezienia i poprawnej deklaracji informacji odpowiednie elementy zostaną zaktualizowane o dodatkowe stylowanie. Pisząc o dodatkowym stylowaniu należy pamiętać, że przeglądarki mają wbudowane style CSS, które również zostają nałożone na węzły. Nowe style nadpiszą jedynie elementy, które wcześniej zostały zadeklarowane w stylach przeglądarki np. wielkość czcionki. Aby sprawdzić czy arkusz styli został poprawnie zadeklarowany w dokumencie html, warto w pliku style.css wpisać odpowiednią regułę:

html { background-color: red; }

Dzięki tej deklaracji (tak będziemy nazywać każdą operację dodania styli w pliku css) tło dokumentu html zostanie zmienione z domyślnie białego na kolor czerwony. Zapisz plik style.css, a następnie odśwież plik index.html w przeglądarce. Jeżeli wykonałeś wszystko poprawnie to powinieneś zastać taki oto widok:

Jeżeli Twoje tło nadal jest białe, sprawdźcie czy poprawnie nazwałeś plik CSS, umieściłeś go w tej samej lokalizacji, co dokument html oraz czy zapisałeś pliki html i css (to chyba najczęstsze przyczyny błędów typu, „czemu nie działa”). Kontynuując tworzenie strony www zajmijmy się ułożeniem dokumentu w taki sposób jak tego oczekujemy (strona nie będzie dostosowana pod urządzenia mobilne, tym zajmiemy się w innym artykule, na który już teraz serdecznie zapraszam). Dwa najważniejsze czynniki, dzięki którym będziemy w stanie umieścić nasze elementy według określonego schematu będą szerokość – width oraz opływanie elementów – float. Na pewno nieraz korzystałeś z programu Microsoft Word i narzędzia do opływania tekstu. W analogiczny sposób będziemy musieli sprawić, aby nasze elementy opływały inne elementy, lecz jedynie te, na których nam zależy. W tym celu będziemy korzystać z dwóch deklaracji width określającej szerokość danego elementu oraz float określającej opływanie elementu.

Znacznik width

Znacznik ten służy do określania szerokości wybranego elementu. Szerokość może zostać określona w kilku metrykach: „px”, „em”, „vw”, „%”. Width jest jednym z kilku podstawowych znaczników, dzięki którym koncepcje graficzne tworzonej strony www mogą się w ogóle ziścić. W tym kursie nauczymy się korzystać z metryki px, oznaczającej piksele. Co prawda aktualnie odchodzi się od koncepcji „sztywnych” pikseli i zastępuje się je bardziej responsywnymi typu em lub rem. Jednak, jeśli mamy do czynienia z layoutem, który ma zostać zakodowany w koncepcji pixel perfect to jednostki px okażą się idealne.

Znacznik float

Znacznik ten, służy do definiowania opływania danego elementu. Jeżeli określimy opływanie lewostronne na danym elemencie:

float: left;

Wówczas, wszystkie elementy znajdujące się w strukturze bezpośrednio pod tym elementem zostaną ułożone z jego prawej części i tutaj ważne O ILE ICH SZEROKOŚĆ NIE JEST WIĘKSZA OD SZEROKOŚCI OTACZAJĄCEGO ICH KONTENERA!.

Co to oznacza? Czysta matematyka, jeśli określimy, że kontener, np. body będzie miał:

width: 920px;

to deklarując na danym elemencie np.:

.div1 {

width: 700px;

float: left;

}

a następnie na kolejnym elemencie:

.div2 {

width: 500px;

}

div znajdujący się poniżej w hierarchii, nie znajdzie się obok pierwszego diva, lecz pod spodem. Mam nadzieję, że jest to zrozumiałe, chociaż mogę Cię zapewnić, że i tak w wielu przypadkach będziesz mieć z tym problem, nawet, gdy „matematyka” będzie wydawała się słuszna (w dalszej części opowiem i o tym).

Wracając do tworzenia strony www, skończyliśmy na ustaleniu czy nasz arkusz styli poprawnie działa. Jeżeli tak jest, usuń poprzednią deklarację odwołującą się do koloru tła. Następnym krokiem będzie ustalenie tego, o czym wcześniej napisałem, czyli szerokości dokumentu. W pliku style CSS ustalamy szerokość 920px na elemencie body oraz wyśrodkowujemy ten element względem okna przeglądarki za pomocą odpowiednio dobranych marginesów. W pliku CSS deklarujemy:

body {

width: 920px;

margin: 0px auto;

}

Zanim wrzucę screen, wyjaśnię dokładnie, co owa deklaracja oznacza:

• body{} – oznacza bezpośrednie odwołanie się do znacznika body, natomiast nawiasy klamrowe oddzielają jedną deklarację zmiennej od drugiej i zawierają w sobie atrybuty
• width:920px; – określa szerokość danego elementu. Szerokość ta została wyrażona w pikselach
• margin:0px auto; – znacznik margin można określać na dwa sposoby, albo wpiszemy margin i będziemy mieli możliwość edycji marginesów zgodnie z ruchem wskazówek zegara. Możemy wpisać osobno margin-top, margin-right, margin-bottom, margin-left. Specjalnie użyłem tej kolejności (zgodnie z ruchem wskazówek zegara), by pokazać Ci, jak działa atrybut margin. Załóżmy, że chcesz zadeklarować, iż dany element będzie posiadał takie oto marginesy:

margines górny – 10px, margines dolny – 20px, margines lewy oraz prawy po 50px;

Aby uzyskać ten efekt możecie zastosować, aż 3 warianty:

margin-top: 10px;

margin-bottom: 20px;

margin-left: 50px;

margin-right: 50px;

lub

margin: 10px 50px 20px 50px;

lub

margin: 10px 50px 20px;

Jak widzisz – drugi oraz trzeci wariant jest zdecydowani krótszy. Polecam nauczenie się któregoś z nich i stosowanie.

Określanie marginesów idzie zgodnie z ruchem wskazówek zegara, rozpoczynając od „godziny 12” (margin-top), następnie „godzina 15” (margin-right), „godzina 18” (margin-bottom) i na końcu „godzina 21” (margin-left).

Wariant zastosowany w tworzonej przez nas stronie www to tzw. wariant bliźniaczy – określając najpierw margines górny/dolny oraz lewy/prawy. Dzięki niemu nasz górny oraz dolny margines będzie ustawiony na 0 pikseli, natomiast lewy i prawy będzie o jednakowej szerokości zależnej od stosunku wielkości okna przeglądarki oraz szerokości znacznika body.

Co przez to rozumieć? Jeżeli posiadamy monitor o rozdzielczości 1600x900px, oraz zmaksymalizowane okno przeglądarki, to szerokość marginesów będzie obliczana ze wzoru (1600px-920px)/2. Otrzymując 2 takie same marginesy, nasz element zostanie umieszczony równo na środku przeglądarki. Jest to standardowa deklaracja, dzięki której wyśrodkowujesz dany element blokowy o stałej szerokości. Zapisz go sobie gdzieś lub zapamiętaj – użyjesz go jeszcze przynajmniej setki razy.

Okno naszej przeglądarki powinno się prezentować następująco:

Jak pewnie zauważyłeś, specjalnie rozciągnąłem okno przeglądarki, żeby pokazać efekt wyśrodkowania znacznika body za pomocą marginesów. Aby lepiej zaobserwować efekt, ustawmy kolor tła znacznikowi body. Przejdźmy jednak dalej, gdyż elementów do ostylowania będzie jeszcze wiele. W szkicu założyliśmy, że nawigacja strony znajdzie się obok logo. Aby tego dokonać musimy dla logo ustawić atrybut:

float:left;

oraz odpowiednią szerokość i wysokość, np.:

width:200px;

height:50px;

więc w pliku CSS zadeklarujemy:

header > a > img {

float: left;

width: 200px;

height: 50px;

}

Zapewne zastanawiasz się, czemu taka budowa deklaracji:

header > a > img {}

Postaram się wyjaśnić to w jak najprostszy sposób:

1. Przeglądarko, poszukaj proszę w pliku HTML znacznika header
2. Poszukaj czy w tym znaczniku, znajduje się znacznik a
3. Jeśli już go znalazłaś poszukaj jeszcze obrazka img
4. Tylko pamiętaj! Znaczniki muszą stać w szeregu, jeden za drugim.

Możemy jeszcze zadeklarować stylowanie atrybutu w taki sposób:

header a img {}

W tym wypadku przeglądarka podejdzie do wyszukiwania elementów bardziej uniwersalnie i będzie pomijać niektóre znaczniki, chcąc za wszelką cenę znaleźć zadeklarowane. Jeżeli nasz element liniowy a będzie znajdował się w elemencie blokowym h1, a następnie wewnątrz a odnajdzie się element liniowy img, przeglądarka również wychwyci ten element do stylowania. Wracając jednak do naszej strony:

Jak widzisz nawigacja ustawiła się z prawej strony logo, niestety nie ona jedyna. Jest to spowodowane tym, że opływanie – float, działa nie tylko dla pierwszego elementu, ale na wszystkie znajdujące się pod nim w strukturze dokumentu html. Gdy zdjęcie posiadałoby większą wysokość np. 500px, opływałaby go większa ilość elementów, znajdujących się w kodzie HTML „pod nim”. Sytuacja ta jest niedopuszczalna, gdyż psułaby niemal każdą koncepcję graficzną, ale nie martw się – zaraz pokażę jak to naprawić. Logo oraz nawigacja znajdują się w elemencie nadrzędnym header, sprawmy, więc, aby elementy znajdujące się w kodzie poniżej tego znacznika nie opływały już logo. Odpowiednie stylowanie do tzw. clearfix:

header:after {

content:\"\";

display:table;

clear:both;

}

Jak widzisz, wszystko już wyświetla się poprawnie. Obrazek opływany jest jedynie przez nawigację, natomiast elementy znajdujące się w kodzie poza znacznikiem header nie opływają elementów, znajdujących się w header. Podobny zabieg chcemy wykonać pomiędzy elementami main oraz aside. Spróbuj zrobić to sam, ustawiając szerokości elementów odpowiednio na 720 oraz 200 pikseli.

Zaraz, zaraz! Coś jest nie tak! Przecież ustawiliśmy float:left oraz zadeklarowaliśmy szerokości elementów, dlaczego więc znacznik aside nie pojawił się z prawej strony ekranu? W przypadku wcześniejszego przykładu, mieliśmy do czynienia z elementami liniowymi, natomiast teraz mamy do czynienia z elementami blokowymi, które pomimo ustawionych „na sztywno” szerokości nie będą automatycznie opływać elementów. Aby to zmienić należy ustawić atrybut float również elementowi, który ma opływać, czy będzie to float:left, czy float:right obecnie jest bez znaczenia.

Pozostawiam Ci ustawienie clearfixa aby wypchnąć stopkę (dla ułatwienia dodam tylko że zamiast selektora :after, należy użyć :before). Kolejną modyfikacją projektu, będzie umieszczenie tekstu w stopce na środku ekranu. Do wyśrodkowania elementów tekstowych (liniowych) służy deklaracja text-align:center.

footer > p {

text-align: center;

}

Założony układ tworzonej strony www został spełniony, aby zmiany były lepiej widoczne, warto ustawić sobie marginesy, paddingi oraz kolory tła na dane elementy strony. Poniżej przedstawiam gotowy projekt strony, którą tworzyliśmy na potrzeby tego artykułu:

Ostatnie dwa wpisy miały za zadanie uzmysłowić, w jaki sposób rozpocząć proces tworzenie stron www. Z poznanymi informacjami, możesz śmiało zacząć budować proste strony, które za pomocą poprawnie stworzonej grafiki będą wyglądały naprawdę dobrze. Przyszłe artykuły będą poświęcone zabiegom upiększania strony, którą stworzyliśmy o elementy graficzne oraz utworzenie wersji mobilnej strony.

Grafika będzie tworzona głównie za pomocą styli CSS, ale również skorzystamy z programu Adobe Photoshop. Dodatkowo postaram się przygotować i udostępnić kompendium wiedzy na temat CSS, dzięki czemu wszelki informację potrzebne do tworzenia stron www będą dostępne w jednym miejscu.