css

CSS czyli kaskadowe arkusze stylów

W poprzednim wpisie pisaliśmy o html-u, jeśli go nie widziałeś polecam zajrzeć tutaj. Teraz przyszedł czas na CSS czyli kaskadowe arkusze stylów.

Najprościej mówiąc jest to język dzięki któremu możemy formatować wygląd elementów HTML, które po otworzeniu naszej strony w oknie przeglądarki utworzą wygląd strony.

Co to dokładnie są te Kaskadowy Arkusz Stylów ? I jak utworzyć plik css? W bardzo prosty sposób otwieramy nasz notatnik bądź dowolny edytor kodu, klikamy plik > nowy i zapisujemy go z rozszerzeniem .css 

Podpinanie .css do naszego dokumentu html

Aby podpiąć naszego css wystarczy w naszym kodzie dopisać pomiędzy tagi <head>….</head> tą oto linijkę kodu <link rel=”stylesheet” href=”style.css” type=”text/css”/>
Należy oczywiście pamiętać, aby nasz plik css znajdował się w tym samym miejscu co nasz html. Natomiast jeśli nasz plik CSS znajduje się w innym miejscu, np podkatalogu utworzonym w naszym głównym katalogu html, trzeba podać odpowiednia ścieżkę do tego pliku. Tak jak przykładzie poniżej.

I jak widzisz nasz plik utworzony został w podkatalogu o nazwie css.

CSS czyli kaskadowe arkusze stylów – co to jest ta cała ‚kaskada’

Kaskada inaczej ‚stopniowość’, ‚kolejność’. Jak się do tego odnieść? Na wygląd naszej strony składa się co najmniej kilka arkuszy styli. Jak to jest możliwe? Każda z przeglądarek posiada dodatkowo własne, wbudowane arkusze stylów, a użytkownik może dopisać własne. Pokażę to wam na przykładzie. Mamy juz nasz dokument HTML

I teraz tak nasz nagłówek <h1> jak i akapit <p> mają na samym początku ustalony margines przez nasza przeglądarkę internetową, której style czytane są jako pierwsze w kolejności

Mają one odstępy zarówno od siebie jak i od krawędzi naszej przeglądarki. Po dodaniu naszego arkusza styli do naszego pliku HTML i wyzerowania marginesów, przeglądarka najpierw przeczyta style z przeglądarki internetowej a następnie z naszego dodanego arkusza, które w naszej ‚kaskadowości’ nadpiszą style z przeglądarki i naszym oczom pokaże się oto tak sformatowany tekst.

Należy wiec pamiętać o kolejności czytania styli przez przeglądarkę.

kaskadowosc

Dokładniej o CSS

CSS to z ang. Cascading Style Sheets czyli Kaskadowe Arkusze Stylów.

CSS są to pliku które określają reguły stylu, czyli wyglądu poszczególnych tagów na naszej stronie. Język html służy do umieszczenia na stronie treści (czyli tekstu, grafik, hiperłączy, dźwięku, video itp.), tak CSS używany jest do kontrolowania wyglądu tych elementów (czyli decydujemy np. o kolorze czy wyrównaniu tekstu, położeniu obrazków, wyglądzie tła strony itp.) Bez CSS strona wyglądała by dokładnie tak jak pokazywałem to w poprzednim wpisie. HTML to tylko treści strony owinięte tagami które są później wykorzystywane przez CSS. Wykorzystywanie te polega na tym, że dobieramy (selekcjonujemy) tagi z pomocą tzw. selektorów.

Dla przykładu, aby zmienić kolor wszystkich akapitów (tag ‘p’ od paragraph) na Twojej stronie wystarczy napisać tylko:

I w ten oto prosty sposób nasze p – paragraph posiadają od teraz kolor czerwony.

Konstrukcja reguły CSS

Konstrukcja jest prosta.

 

 

Reguła CSS może być złożona i zawierać więcej niż jedną zmianę wyglądu:

Ta kolejność się nie zmienia najpierw jest selektor, który odpowiada za wyszukanie elementu, których wygląd chcemy zmienić. Następne zaraz po selektorze są nawiasy klamrowe {}, które są zamknięte na końcu reguły. Zawierają one wszystkie reguły jakie ma otrzymać wskazany element HTML. Dalej są właściwości czyli konkretne zmiany wyglądu jakie chcemy nadać elementowi html. Na sam koniec wartość wystepuje po każdej właściwości po czym stawiamy średnik ; w tym przypadku wartością jest kolor czerwony red;

selektor

 

Dlaczego po poznaniu HTML powinieneś poznać CSS?

Nie oszukujmy się sama treść strony bez css jest po prostu nie atrakcyjna 🙂

html bez css

Sam osobiście zaczynając naukę od HTML i CSS zacząłem od książki, którą z czystym sumieniem mogę polecić

HTML i CSS. Zaprojektuj i zbuduj witrynę www. Podręcznik Front-End Developera

Poznacie tam masę właściwości html i css oraz reguł. Książka wspaniale nauczyła oraz wprowadziła mnie od całkowitych podstaw do świata tworzenia stron www z wykorzystaniem html5 i css3. Plusem tej książki jest mnóstwo kolorowych obrazków oraz schematów które sprawiają, że z pozoru trudne zagadnienia bardzo łatwo zrozumieć i zapamiętać.

Post created 8

Dodaj komentarz

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

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top