CSS, co to takiego?
- Data publikacji
- Ostatnio edytowano
No właśnie, co to takiego ten cały CSS?
Najkrócej mówiąc jest to język służący do formatowania wyglądu elementów HTML, które po wyświetleniu w oknie przeglądarki internetowej tworzą wygląd strony internetowej.
Ponadto sam skrót CSS oznacza "Kaskadowy Arkusz Stylów" jest to plik z rozszerzeniem .css, w którym znajdują się pewne reguły CSS, czy jak kto woli pewne style CSS, które określają wygląd różnych elementów HTML znajdujących się na danej stronie internetowej.
W realnym świecie, gdy malarz chce namalować obraz, to do tego celu potrzebuje:
- płótna, na którym ten obraz będzie tworzył
- farb, pędzla, którymi namaluje obraz na płótnie
- umiejętności, talentu, dzięki którym wie co będzie malował i wie w jaki sposób tego dokona
My, aby stworzyć nasz obraz będziemy potrzebowali wiedzy z zakresu języka HTML oraz języka CSS. Dzięki wiedzy z zakresu języka CSS będziemy mogli modyfikować wygląd dowolnego elementu HTML, który zostanie wyświetlony w naszej przeglądarce internetowej.
Pod spodem został zaprezentowany przykładowy element HTML, który nie zawiera w sobie żadnych dodatkowych właściwości wyglądu, dlatego o takim elemencie możemy powiedzieć, że posiada domyślny wygląd.
Element HTML, który został przedstawiony powyżej, nie zawiera w sobie żadnych dodatkowych właściwości wyglądu, po prostu reprezentuje on sobą tekst koloru czarnego.
Po uważnym przeczytaniu tego kursu CSS będziemy mogli modyfikować wygląd każdego elementu HTML, będziemy mogli dodawać do niego rozmaite właściwości wyglądu, czyli właściwości CSS, dzięki czemu będziemy mogli zmieniać domyślny wygląd elementów HTML.
Poniżej został zaprezentowany ten sam element HTML, co poprzednio, lecz tym razem zostały do niego dodane różne właściwości CSS, dlatego wygląd naszego przykładowego elementu HTML został urozmaicony.
Z elementami HTML i właściwościami CSS możemy robić różne ciekawe rzeczy, np. możemy sprawić, aby kilka elementów HTML utworzyło pionowe menu CSS.
Spójrzmy na elementy HTML, które zostały umieszczone poniżej:
Nasze przykładowe elementy HTML, które znajdują się powyżej, posiadają domyślne właściwości wyglądu, takie jak:
- kolor tekstu
- podkreślenie tekstu
- wyświetlają się obok siebie
- po najechaniu na dany element, kursor myszki zmienia wygląd
Kiedy wykorzystamy "siłę" języka CSS, to nasze elementy HTML wyglądem będą mogły przypominać elementy pionowego menu CSS, tak jak te elementy HTML, które zostały zaprezentowane poniżej.
Od tej pory nasze elementy HTML posiadają nowe cechy wyglądu, czyli nowe właściwości CSS, między innymi takie jak:
- nowe obramowanie elementu
- cień za elementem
- cień za tekstem
- marginesy wewnętrzne
- nowy kolor tła
- tło obrazkowe
- nowy kolor tekstu
- wyśrodkowany tekst
- tekst bez podkreślenia
- elementy są wyświetlane jeden pod drugim
- elementy są wyśrodkowane
- elementy zmieniają swój kolor tła, gdy najedziemy, na któryś z nich kursorem myszki
Jeżeli, któraś z wyżej wymienionych właściwości nie jest dla Ciebie widoczna, to oznacza to, że Twoja przeglądarka internetowa nie interpretuje (nie rozumie) danej właściwości CSS.
W jaki sposób zmienić wygląd elementu HTML bądź grupy podobnych do siebie elementów HTML?
Na to pytanie postaramy sobie odpowiedzieć w kolejnych częściach tego kursu CSS, w których zapoznamy się z różnymi zagadnieniami dotyczącymi języka CSS.
Po pokonaniu wszystkich "przeszkód" jakie czekają na nas w pierwszym dziale tego kursu CSS, utworzymy pionowe menu CSS, które zostało zaprezentowane w tej części kursu CSS, jednak to wyzwanie czeka na nas dopiero w dziale drugim.
Natomiast w dziale czwartym zajmiemy się tworzeniem najróżniejszych układów elementów HTML, dzięki czemu poznamy wiele właściwości CSS oraz różnych zależności, które pomogą nam w swobodnym posługiwaniu się językiem CSS.
Jednym z układów elementów HTML, jakie utworzymy w dziale czwartym, będzie nieco bardziej rozbudowane pionowe menu CSS, które będzie zawierało w sobie Animowany Tooltip.
Wspomniane menu zostało umieszczone poniżej (najedź na nie kursorem myszki, aby zobaczyć efekt).
W następnej części kursu CSS zajmiemy się czynnościami, które będziemy musieli wykonać, aby odpowiednio przygotować się do tego kursu CSS.