Kurs CSS – Od podstaw cz.2

Kurs CSS – Od podstaw cz.2

Kurs CSS – Od podstaw cz.2

Witam w dzisiejszym artykule zaprezentuje drugą część ķursu CSS – Od podstaw. Poprzednio wyjaśniliśmy sobie czym w ogóle jest CSS i do czego służy? Dlaczego należy pisać kod CSS w osobnym pliku? Omówiliśmy rodzaje i hierarchię stylów. Oraz wytłumaczyłam jak podłączyć arkusz ze stylami CSS do pliku HTML. Teraz pójdziemy o krok dalej.

Na początek będę Cię prosiła, żebyś rozważył zaopatrzenie się w komplet przeglądarek internetowych, jeśli jeszcze nie masz wszystkich. Jest to ważne dlatego, że różne przeglądarki. Mogą inaczej interpretować dany kod. I nadawać mu inny wygląd.
Przeglądarki, w które się dziś zaopatrzymy to Firefox, Chrome, Opera i Safari w najnowszych wersjach. Oczywiście przeglądarek jest więcej, ale te na potrzeby kursu nam w zupełności wystarczą.

Ja w tej części kursu, inaczej niż w poprzednich artykułach będę korzystać z edytora kodu Brackets . A nie jak poprzednio Notepad ++. Ale jeśli Ty chcesz korzystać z Notepada lub innego dowolnego edytora kodu nie widzę problemu. Ważne tylko, by miał kolorowanie składni. Mile widziane również ciemne tło, by oszczędzać wzrok.

Reguła CSS – Kurs CSS – Od podstaw cz.2

Blok deklaracji - Kurs CSS – Od podstaw cz.2

Na obrazku przedstawiam czym jest Reguła css. Ta wiedza jest niezbędna, żeby w ogóle zacząć kodować w css.
W skład każdej reguły css wchodzą dwie podstawowe części. Selektor i Blok deklaracji. (na rysunku zaznaczone czerwonym kolorem).
Po lewej stronie reguły znajduje się selektor wskazujący, do których części dokumentu zostanie zastosowana reguła. (W naszym przypadku P – akapit).
Po prawej stronie umieszczony jest blok deklaracji złożony z jednej lub z kilku deklaracji. (W naszym przypadku z 3 deklaracji).
Blok deklaracji zapisujemy zawsze w nawiasach klamrowych. Każda z deklaracji musi kończyć się średnikiem (;). Wyjątkiem jest ostatnia deklaracja w bloku, dla której średnik nie jest obowiązkowy. Jednak uważam, że warto jest wyrabiać w sobie dobre nawyki i zawsze na końcu każdej deklaracji go używać. Taki nawyk jest przydatny zwłaszcza w innych językach programowania. I pozwala również uniknąć błędów w kodzie, które może powodować brak średnika.
Każda właściwość reprezentująca pojedynczy parametr stylistyczny jest oddzielona znakiem dwukropka (:). Od przypisanej do niej wartości. W naszym przykładzie właściwość to kolor tekstu, jego wielkość i krój pisma. A Wartość to biały, 16px i Tahoma.

Selektory – Kurs CSS – Od podstaw cz.2

Jakie selektory mamy w CSS?:

  • Selektor uniwersalny
    Wzór
    
    *

    Opis: Ten selektor odpowiada nazwie dowolnego elementu w języku HTML. Jeśli reguła nie ma wyznaczonego selektora, używa się selektora uniwersalnego.

    Przykład:
    
    * {color: white;}
  • Selektor typu
    Wzór
    
    p

    Opis: Ten selektor odpowiada nazwie określonego elementu w języku HTML. Będzie stosowany w każdym przypadku występowania danego elementu.

    Przykład:
    
    p {font-size: 16px;}
  • Selektor klasy
    Wzór
    
    p.nazwaklasy
    
    .nazwaklasy

    Opis: Selektor klasy używa notacji kropki, żeby wskazać element posiadający klasę. Nazwa klasy musi następować bezpośrednio po kropce. Bez żadnych spacji. Jeśli przed tym znakiem nie zostanie podana nazwa elementu, selektor wskaże wszystkie elementy zawierające daną wartość klasy.

    Przykład:
    
    p.tekst {color: white;}
    
    a.link {font-size: 1em;}
  • Selektor identyfikatora ID
    Wzór
    
    div#nazwa
    
    #nazwa

    Opis: Selektor identyfikatora ID używa notacji kratkowanej (hasha). Nazwa wartości ID musi następować bezpośrednio po znaku kratki (#). Bez żadnych spacji. Jeśli przed tym znakiem nie zostanie podana nazwa elementu, selektor wskaże wszystkie elementy zawierające daną wartość ID.

    Przykład:
    
    div#kontener {width: 600px; height:900px;}
    
    #nawigacja {list-style: none; float:left; display: block;}

Selektor ID o konkretnej nazwie np. #nawigacja może pojawiać się na stronie tylko jeden raz. Selektor klasy o konkretnej nazwie np .tekst może występować wielokrotnie na stronie.

To nie są wszystkie selektory, które występują w CSS, bo jest ich bardzo dużo, ale te najważniejsze na początek pracy z CSS. Warto najpierw przećwiczyć te trzy czyli: Typu, Klasy i Identyfikatora ID, zanim przejdzie się dalej.

W następnie części kursu omówimy specyficzność selektorów, właściwości i wartości. Czekam również na Twoje pytania i propozycje co byś chciał w tym kursie. Napisz w komentarzu.

Mam nadzieję, że ta wiedza się przyda, i że nie jest jej za dużo na jeden raz.

Pozdrawiam.

Dodaj komentarz

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