Ubarwiamy HTML-a, czyli do czego służy CSS

13 Mar

Naukę pisania CSS-ów zaczęłam po raz kolejny od kursu Kodilli. No, co ja poradzę, że ich lubię. Wyszukiwarka wrzuciła mi też Webkod.pl, gdzie pewne rzeczy były wyjaśnione w bardzo systematyczny, a zarazem przystępny sposób. Korzystałam też z W3Schools i polecanej w komentarzach MDN.

CSS, czyli kaskadowy arkusz stylów

Dawniej pisanie w HTML-u wymagało niezłej gimnastyki, bo wszystko trzeba było w nim zaprogramować: każdą ramkę, odstęp od niej, kolor i wielkość czcionki, no wszystko… I kiedy pojawiał się pomysł “zmienię sobie tło z niebieskiego na różowy”, to trzeba było znaleźć miejsce, gdzie to zostało ustalone i zmienić. Łatwe? Łatwe! A zmiana wielkości obrazka? No, tu już nie było lekko, bo się wszystko na stronie “rozwalało” i wymagało zmiany kilku, jak nie kilkunastu, elementów. Dlatego powstał pomysł, żeby wszystkie kolorki, czcionki i wymiary trzymać w osobnym pudełku. To pudełko to CSS. Chcemy stronę w kolorystyce zielonej, bo wiosna? Wymieniamy CSS i już. Ponieważ HTML jest HyperText, to trzeba w nim umieścić link do CSS. CSS nie funkcjonuje samodzielnie, musi być być połączony z HTML-em. Mówiąc najprościej: treść i struktura to HTML, wygląd – CSS.

Style i reguły CSS

Z tymi stylami to trochę zmyłka, bo styl to atrybut HTML-a (taki jakby CSS sam w sobie) i do niego dajemy odnośnik w pliku index.html, np.: <link rel=”stylesheet” type=”text/css” href=”style.css”> Oczywiście tu trzeba utworzyć plik .css, do którego ten link prowadzi. CSS rządzą reguły, które potocznie też nazywa się stylami, no i tu jest właśnie ta zmyłka. Każda reguła ma podobną konstrukcję. CSS musi:

  • wyszukać element, który ma zmienić (selektor),
  • podać właściwości, czyli co mamy zmienić w tym elemencie (deklaracje, właściwość)
  • wskazać wartości, czyli jakie cechy właściwości mamy nadać (wartość),
  • wszystko, co jest po selektorze spina nawias klamrowy {}.

Wygląda to tak: selektor {właściwość:wartość;}

Selektorów może być kilka. Można stylować po klasie, po tagu, po identyfikatorze. To, co jest wyżej (czy może raczej “na wierzchu”) rządzi, bo CSS jest kaskadowy, czyli styl obejmuje kaskadowo to co poniżej. Czasem ciężko dojść do tego, co jest rodzicem, a co dzieckiem i “czemu to się nie zmienia?!”.

Pierwsza strona z CSS

Wszystko to jest bardzo łatwe, tylko… im dalej w las, tym więcej drzew, a ja wiem, że to, co poznałam, stanowi wierzchołek góry lodowej. I to wyjątkowo dużej. Od czegoś trzeba zacząć, postanowiłam więc, że najpierw przerobię poprzednią stronę “o mnie” i wykorzystam te kilkanaście elementów, które próbowałam dziś przyswoić.

Fragment stronyZapraszam do zobaczenia mojego kodu na GitHuba, aczkolwiek muszę przyznać, że nie lubię się z nim, a umieszczanie tam całego katalogu mnie przerosło. W końcu to zrobiłam (to znaczy utworzyłam katalog, w nim kolejny i dopiero plik), ale idiotyczną i czasochłonną metodą. Nie wierzę, że to ma tak działać. W jednym z poradników znalazłam informację: “Zaczynając pracę nad nowym projektem tworzymy nowy folder oraz umieszczamy w nim pliki nad którymi będziemy pracować.”. No i tworzenie tego folderu… Mam obawy, że następna lekcja, to niestety będzie rozgryzanie GitHuba, bo nie mogę tracić tyle czasu na czymś, co teoretycznie powinno pomagać ten czas zaoszczędzić.

Fragment strony

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *