CSS

CSS #1 – początki

Dotarłeś aż tutaj, oznacza to że HTML masz w małym paluszku 😉 Przejdźmy do nadania wizualnej szaty stronie internetowej.

Czym jest CSS (Kaskadowe arkusze stylów) przeczytasz dokładnie tutaj, a o innych możliwościach CSS (których nie poruszyłem) dowiesz się tu.

 

Obecnie strona, którą tworzyłeś wyglądała bardzo minimalistycznie, znajdował się tam tekst, pola do wpisywania i zdjęcia – wszystko bez ładniejszego układu i składu, zmieńmy to na lepsze! Postaram się wytłumaczyć Tobie zasadę działania i tworzenia kodu CSS.

 

  1. Stwórz plik dla styli „style.css” w katalogu strony – pamiętaj, aby załadować go odpowiednio, pisałem o tym w HTML #1

Struktura pliku różni się od HTML, tutaj zaczynamy od razu deklarować elementy i przypisujemy do nich parametry z wartościami.

Przykład – chcemy zmienić kolor czcionki dla całej strony:

Jak można zauważyć zapis ten charakteryzuje się nazwą elementu któremu przypisywać będziemy następnie parametry, otwierany jest za pomocą znaku „{„, a zamykany za pomocą „}„. Parametry znajdować się powinny w oddzielnych liniach, a deklarację ich zaczynamy od parametru, następnie dodajemy „:” (dwukropek) i podajemy wartość, w przypadku kolorów użyć możemy prostych t.j. „black”, „red”, „white” – czego odradzam i polecam używać kolorów zapisanych w formacie HEX przykładem białego będzie „#fff„, a czarnego „#000„. Kolory które posiadają jednolitą barwę jak właśnie szary (który użyłem w przykładzie „#333„, czarny, czy biały możemy zapisać 3 znakami, natomiast kolory wymyślne zapisywane są w 6 znakach, przykład: „#AAEF66” – całą paletę kolorów znajdziesz tutaj.

 

Pokażę Ci teraz jak odwołać do różnego rodzaju elementu na stronie (w przykładzie użyliśmy element „body”, odpowiadający za całą stronę), a jak wybrać np. sekcję książki, jakiś adres URL, wyróżnić kolorem pewną część tekstu, czy zmienić szerokość zdjęcia? Już śpieszę z wyjaśnieniem..

Odwołując się do:

  • elementu HTML po jego nazwie wystarczy, że wpiszemy jak w przykładzie „body„, „div„, „a„, „span„, „img” itd.
  • identyfikatora ID HTML tutaj przed nazwą podaną w HTML musimy dodać znak „#
  • klasy elementu HTML, wystarczy dodać kropkę przed nazwą klasy

     

Możemy również łączyć odwołania do różnych elementów w jedną całość:

Połączyliśmy teraz każdy typ odwołania w jedno i możemy nadać tym elementom takie same parametry CSS.

 

Zadać możesz pytanie, a w jaki sposób odwołać się do zdjęcia, które jest w sekcji książka? Należy jedynie podać nazwę elementu następnie po spacji wpisać nazwę kolejnego, na pewno jest to mało zrozumiałe, więc załączam przykład:

 

Połączmy teraz odwołanie do zdjęcia w sekcji książka, a odwołanie do wielu elementów:

 

Jak zauważyłeś przeglądając strony internetowe, po najechaniu na niektóre elementy np. przycisk zmienia się tło i kolor tekstu dla tego przycisku, jak to wykonać – prosto! Podajemy element, który chcemy uchwycić (najechać na niego) i dodajemy „:hover„, przykład:

Takim zapisem po najechaniu na przycisk zmienimy mu kolor czcionki na biały i tło na czarny.

 

Komentarze w CSS dodaje się za pomocą znacznika „/*” i kończy komentarz „*/

 

 

Znając sposób odwołania się do elementów w HTML, a także zasady które obowiązują przy ich deklarowaniu czas poznać parametry i ich dozwolone wartości. Oczywiście wymienię tutaj te, które uważam za dobrą podstawę – pozwolą one tworzyć już przejrzyste i ładne strony, a gdy oswoisz się z nimi, samodzielnie dostosujesz trudniejsze (nie wszystko od razu) 😀

 

 

Opisał sobie – powiecie – to może czas na przykład, załóżmy że chcemy zrobić stronę internetową składającą się z 2 kolumn, pierwsza będzie posiadać wpisy „nowości”, a druga to zwykły blok informacyjny jak obok na zdjęciu.

 

Dodam, że podział kolumn w kodzie zrobiony jest procentowo – co w późniejszym etapie zmieniane jest na bibliotekę np. Bootstrap, PureCSS, które dzielą wszystkie elementy za nas i dla nas 😉

 

 

 

Zacznijmy od struktury HTML:

Następnie CSS:

 

!! Dodatek !!

Zauważyłeś pewnie pojawienie się w CSS elementu, którego jeszcze nie omawiałem, czyli „:first-child„, jest to odwołanie się do pierwszego elementu z dostępnych, czyli w tym przypadku odwołałem się do pierwszego wpisu, oczywiście można odwołać się też do ostatniego „:last-child„. Jeżeli interesuje Cię odwoływanie się do poszczególnych elementów np. piątego, czy ósmego, to zapraszam tutaj.

 

Zadanie do wykonania

Bazując na stronie z zadania w części drugiej HTML #2 stwórz oprawę wizualną, postaraj się dbać o lekkość, dbałość o detale … lub po prostu baw się dobrze kolorami 😀