Składnia CSS

Jakiś czas temu pojawił się na blogu wpis wprowadzający do CSS. Możecie się z nim zapoznać o tutaj. W tym artykule skupimy się na kolejnej kwestii związanej z CSS, a mianowicie na jego składni. Gotowi?

Składania CSS

Ogólnie rzecz ujmując CSS składa się z reguł, które mają określać to jak mają wyglądać poszczególne elementy HTML. Na regułę CSS składa się natomiast:

  • selektor – to on oznacza elementy HTML, którym będziemy dodawać stylu np. p, div lub id (#jakiesid) czy klasa (.jakasklasa) (o selektorach będzie kolejny wpis)
  • nawias klamrowy – to w niego wrzucamy właściwości, które ma otrzymać wybrany selektor -> { }
  • właściwości CSS – poprzez właściwość określamy, co chcemy zmienić w danym elemencie HTML np. background-color (kolor tła)
  • wartości właściwości CSS – wartości te są wpisywane po dwukropku oraz na na końcu każdej wartości jest średnik. Jako wartość podajemy w jaki sposób chcemy zmienić daną właściwość np. jak zmieniamy kolor tła na zielony to wpisujemy : green;

Podsumowując reguła CSS wygląda o tak:

selektor { właściwość: wartość; }

Przenieśmy to na bardziej obrazowy grunt. Wyobraźcie sobie mieszkanie. W nim białe ściany. Wy nie chcecie białych ścian tylko żółte. Co zrobicie? Zapiszmy to.

Mieszkanie przed malowaniem

ściany { kolor tła: biały; } -> W css .sciany { background-color: white; }

Mieszkanie po malowaniu

ściany { kolor tła: żółty; } -> W css .sciany { background-color: yellow; }

Jak znać element HTML, któremu chce się dodać stylu?

Jeśli używacie przeglądarki Chrome to wystarczy wcisnąć prawy przycisk myszki i dać zbadaj (w innych przeglądarkach też będziecie mieć coś takiego tylko może być nieco inaczej nazwane). Pokaże Wam się okienko, gdzie po lewej stronie będzie kod HTML Wasze strony www, a po prawej stronie style CSS.

Teraz szukacie ikonki, która na screen jest oznaczona niebieską kropką. Klikacie w nią.

Jak ją klikniecie to od tego momentu poruszając się myszką po elementach na stronie i klikając wybrane z nim, po prawej stronie, w sekcji dla CSS będą Wam się pojawiać style przypisanych do poszczególnych z tych elementów. Obrazuje to poniższy wideo.

Kiedy znajdziecie już „ten” element to kopiujecie selektor oraz następnie w WordPress wchodzicie w Wygląd – Dostosuj – Własny CSS i wklejacie ten selektor, a następnie dopisujecie do niego właściwość i wartość dla niej.

Prawda, że to nie takie straszne? Wciągnął Was CSS? Wypatrujcie kolejnych wpisów. A jeśli chcecie już lecieć dalej z tym koksem to na grupie Zostań Specką, czekają na Was nagrania z CSSowych lajwów!

Data dodania artykułu: 10 sierpnia 2019

  • Share:

Dodaj komentarz

avatar
  Subscribe  
Powiadom o