Druga część krótkiego wprowadzenia do kodowania w HTML i CSS. W tej części przybliże o co chodzi z CSS i jak szybko odczytać właściwości danego obiektu na stronie. Poprzednią część można znaleźć tutaj.

CSS

Jak już pisałem w ostatnim wpisie, HTML “mówi” przeglądarce z jakich elementów strona jest zbudowana, natomiast CSS ostylowuje je tzn. ustala ich rozmiary, położenie i takie właściwości graficzne, jak kolor czy obrys. Podobnie jak HTML, CSS może mieć swój własny plik z rozszerzeniem .css tylko w tym przypadku nie wykorzystujemy żadnego szablonu, po prostu zaczynamy pisać konkretny kod w pustym dokumencie. Osobny plik to nie jedyny sposób dodania stylu CSS do strony, można też ten kod umieścić bezpośrednio w pliku .html, ale nie jest to zbyt wydajna metoda pracy z kodem. Kod CSS umieszczamy w pliku .html za pomocą tagu <style>.

 

<style>

kod css

</style>

 

Wracając do dobrych praktyk umieszczamy kod CSS w osobnym pliku. Musimy podać link do jego lokalizacji, najlepiej zawrzeć go w górnej sekcji strony <head>:

 

<link href="css/style.css" rel="stylesheet">

 

CSS (Cascading Style Sheets) działa na zasadzie odnośników do danego elementu html. Tutaj mamy dwie drogi, albo dodać do jakiegoś elementu pewien znacznik z nazwą, albo określać właściwości dla konkretnej grupy tagów np <p>. W CSS takie oznaczenie nazywamy selektorem, składnia prezentuje się jak poniżej:

 

p {

kod css który odnosi się do wszystkich akapitów

}

 

Jeśli chcemy wykorzystać odnośnik do danego elementu, należy skorzystać z klasy (class) albo id. Pierwsza z nich może odnosić się do wielu elementów, druga musi mieć unikalną nazwę i działa tylko z jednym elementem jednocześnie. Klasa posiada selektor .nazwaklasy, a id #nazwaid

 

<p class="akapit1">kod html, akapit</p>

<p id="akapit2">kod html, akapit</p>

.nazwaklasy{

kod css

}

#nazwaid{

kod css

}

 

Zbiór rożnych właściwości jakie możemy nadać danemu obiektowi za pomocą CSS jest ogromny, a wszystkie właściwości znajdziesz bez problemu w internecie. Ja przytoczę tylko dwa przykłady, gdzie warto zwrócić uwagę na składnie. Wszystkie właściwości są nazwane w dość logiczny sposób po angielsku więc czytanie gotowego kodu nie stanowi problemu.

 

div {

width: 120px;

height; 240px;

background: #000;

}

 

Nadaliśmy wszystkim elementom na stronie wymiary 120 px na 240 px i kolor wypełnienia czarny, na końcu każdego właściwości trzeba dodawać “;”

 

.nazwaklasy div {

font-size: 18px;

margin-left: 20px;

display: none;

}

 

Tutaj został użyty trochę bardziej skomplikowany selektor, który odnosi się do wszystkich div-ów z wymienioną nazwą klasy. Ustaliśmy wielkość fontu, margines od lewej strony oraz całkowite ukrycie elementu.

 

Sprawdzanie elementów na gotowej stronie internetowej

Nie raz musimy zaprojektować konkretny moduł na stronie i w tym celu warto sprawdzić wymiary starego bezpośrednio w przeglądarce. Istnieją do tego darmowe narzędzia wbudowane w większość popularnych przeglądarek. Na przykładzie Google Chrome wciskamy F12 albo bardziej dokładnie najeżdżamy kursorem na interesujący nas obiekt i z menu kontekstowego wybieramy “zbadaj”. Teraz możemy odczytać właściwości przycisku z tego, co widać posiada on wymiary 400 px x 47 px. Po prawej stronie panelu mamy wszystkie właściwości danego obiektu. Można je zmieniać na żywo, żeby zobaczy czy zmiana koloru przycisku będzie współgrać z resztą strony. Mam nadzieje, że chociaż trochę rozjaśniłem na czym polega HTML i CSS i będziesz mógł/mogła to wykorzystać w swojej pracy grafika.

 

inspektor-na-stronie