Używamy cookies, żeby zwiększyć Twoje doświadczenia na stronie
CodeWorlds

Struktura CSS i formatowanie

Dobrego developera można poznać nie tylko po umiejętnościach, ale również po czytelności jego kodu.

Co to znaczy, że kod jest czytelny? Na chwilę obecną wystarczy, że pilnujesz wcięć w HTML i CSS. Każda reguła CSS powinna być zbudowana w ten sam sposób:

1h1 {
2  color: red;
3}
4p {
5  color: blue;
6}

Sposób tworzenia reguły CSS:

  1. Selektor zawsze na początku linii, spacja i otwarcie nawiasu klamrowego.
  2. Wcięcie, które jest równe w każdej deklaracji. Ważne, żeby linia deklaracji wyglądała w następujący sposób -
    właściwość: wartość;
    . Pamiętamy o spacji po dwukropku i średniku na końcu.
  3. Domknięcie nawiasu klamrowego.

Styl dla kilku elementów

W przykładzie wyżej nadaliśmy kolor czerwony dla nagłówka i paragrafu. A co jeśli kolor czerwony miałby być zastosowany dla wielu elementów?

Odpowiedź jest prosta - możesz podać selektory jeden po drugim i oddzielić je przecinkami:

1h1, p {
2  color: blue;
3}

Kolor niebieski zostanie zastosowany do elementów h1 i p.

Dobrego skryby poznaje się po równych liniach, więc buduj każdą regułę zawsze tak samo - selektor, wcięte deklaracje w formacie

właściwość: wartość
zakończone średnikiem, klamra domykająca - a gdy kilka elementów ma dzielić ten sam wygląd, wypisz ich selektory po przecinku zamiast powielać kod.

Przejdź do CodeWorlds