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 znaleźć 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!