CSS – podstawy – zacznij naukę od tego

Loading Likes...

Jak pewnie wiemy zależność między HTML, CSS i JavaScript nie jest przypadkowa. O ile html odpowiedzialny jest za treść na naszej stronie, o tyle CSS odpowiadać będzie za sposób, w jaki ta treść jest wyświetlana. Zatem nasze kaskadowane arkusze stylów(CSS – cascading stylesheet) będą odpowiedzialne między innymi za: tło, czcionkę, obrazki, układ na stronie, kolory. Zatem coś, co uatrakcyjni nasz domyślnie wyglądający HTML. Tradycyjnie mały spisik treści:

Zasady definiowania stylów

Klasa

ID

Komentarze w stylach

3 sposoby dołączania CSS’a do pliku HTML

Hierarchia w stylach

No to do dzieła! 😉

Zasady definiowania stylów są bardzo proste i wyglądają następująco:
selektor{ właściwość: wartość;}
np.
p { color: red;}
Wszystkie elementy p (paragrafy) będą miały czcionkę w kolorze czerwonym.

Klasy to nic innego jak atrybut class tagów w html. Atrybut ten przyjmuje jakąś ustaloną przez nas nazwę. Dzięki niej będziemy mogli odwoływać się do danego elementu html. Jeśli ustalimy, że selektorem w stylach będzie p, wtedy wszystkie paragrafy będą przyjmować takie style. Klasa służy nam do odwoływania się do konkretnego elementu np. mamy kilka divów na stronie, ale chcemy ustawić tylko jednemu dane style. Wtedy w html dodajemy atrybut class=”” i w apostrofach wpisujemy swoją nazwę np. class=”div1″. Od tego momentu możemy przejść do styli i używać selektora .div1{}. Do klas odwołujemy się poprzedzając nazwę kropką.
np. <div class=”div1″></div>
w stylach wpisujemy
.div1 { background-color: blue;}

W efekcie otrzymamy naszego diva1 z tłem w kolorze niebieskim.
Zapamiętaj: do klas w stylach odwołujemy się po kropce, klasę definiujemy w html w atrybucie class, dany element może przyjmować wiele klas.

Komentarze – dobry kod nie wymaga komentarzy, ale czasami jest to nieuniknione. W CSS komentujemy w następujący sposób:
/* treść komentarza
dalsza część komentarza*/
To co znajduje się w komentarzu pomijane jest przez przeglądarkę. Teoretycznie możemy umieścić w komentarzu nawet własne style, ale one nie będą brane po uwagę. Często komentujemy niektóre style, aby zobaczyć jaki wpływ mają na nasz html (lub raczej jak brak danego stylu wpływa na nasz html).

Hierarchia – ze względu na 3 możliwe sposoby deklarowania stylów (mogą być zadeklarowane na 3 sposoby              naraz) musi być ustalona pewna hierarchia, inaczej przeglądarka nie widziałaby, jakich stylów użyć. Hierarchia            przedstawia się następująco – od najważniejszych do mniej ważnych:

  • style jako atrybut w html
  • style w sekcji head
  • osobny plik podlinkowany

Podstawy jak to podstawy – warto dobrze zrozumieć, aby kolejne niepewności nie sprawiały nam kumulujących się problemów, co w rezultacie może prowadzić do zniechęcenia. To wszystko wygląda na skomplikowane, ale z czasem powinno wszystko być dla was jasne. Najlepszym sposobem na utrwalanie jest używanie (ćwiczenie) swoich umiejętności. Spróbuj sam stworzyć prostego htmla i dołączyć różne style w tych 3 sposobach deklarowania stylów.
NP.
Stwórz html – 3 divy i nadaj dwóm klasy i jednemu id. Stwórz osobny plik css, podlinkuj do htmla, a następnie zadeklaruj kolor czcionki na niebieski dla pierwszego diva – odwołując się do elementu przez klasę. Przejdź do html i nadaj zielony kolor czcionki drugiemu divowi przez atrybut style. Przejdź do sekcji head w html i stwórz tagi style (otwierający i zamykający), a następnie odwołując się po id do ostatniego diva, nadaj mu kolo czcionki na różowy (pink).

W razie pytań zapraszam do komentowania lub zadawania pytań na naszym fanpejdżu na facebooku.

Traktuj to jako fundamenty swojej wiedzy o CSS. Pierwszy krok za tobą w nowej technologii. Gratuluję i do zobaczenia w kolejnych tematach! 😉

You May Also Like

About the Author: Sebastian Mieszczańczyk

Studia: Wyższa Szkoła Ekonomii i Informatyki w Krakowie Profil: "Informatyka i Ekonometria" Specjalizacja: "Programowanie urządzeń mobilnych i aplikacji sieciowych" Hobby:
  • Programowanie: Typowy front: HTML/JS/CSS Do tego: Vue/Vuex/Nuxt/Angular/
  • Rozwój osobisty
  • siatkówka (GeoVolley Team) na pozycji środkowego
  • Filmy - od dawna pasjonuję się nie tylko oglądaniem filmów, ale także analizowaniem ich pod kątem stworzenia ( Mój link do filmweba) - w liceum dzięki profilowi z modułem filmowym mogłem bardziej wejść w szczegóły kadrów, ujęć itd.
  • Psychologia - niestety wciąż mam zbyt mało czasu na zagłębianie się w tą wiedzę :(

Dodaj komentarz

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

Facebook
Inline
Inline