A więc chcesz nauczyć się CSS?

Spokojnie to nic trudnego (przynajmniej dla każdego kto skończył ten kurs)

Bez skończenia naszego kursu HTML niezbyt coś zrobicie z wiedzą którą wam tu przekażę (´•︵•`).

Ale jeżeli już go zrobiłeś, lub znasz podstawy HTML będziesz, mógł, do swojej strony dodać fajny wygląd (っ◕‿◕)っ.

Najpierw początek w HEAD zapisujemy znacznik STYLE i w tym znaczniku zapisujemy nasz CSS.

Teraz powinniśmy się zastanowić - jak się zapisuje to wszystko? Przecież nie możemy od razu pisać, ponieważ musimy powiedzieć HTML, do czego chcemy dodać taki styl.

Ta lista pokazuje jak zapisujemy i co zapisujemy. Jeżeli coś należy do kilku kategorii, to spokojnie jest ułożone od najbardziej ważnego do najmniej ważnego (jeżeli ma taką samą ważność to CSS bierze pod uwagę to co jest niżej w kodzie CSS):

1. najpierw id
   żadne id nie może się powtarzać
   zapis: #(tutaj wpisujesz nazwę tego id){zawartość css}
   musisz również pamiętać o zapisaniu id w HTML. Przykład: id = "(tutaj piszemy nazwę id)".


2. teraz klasa
   wiele elementów może zawierać tą samą klasę
   zapis: .(tutaj wpisujesz nazwę tej klasy){zawartość css}
   musisz również pamiętać o zapisaniu klasy w HTML. Przykład: class = "(tutaj piszemy nazwę klasy)".


3. i sama w sobie nazwa funkcji
   !UWAGA! jeżeli napiszesz body w miejscu wpisania nazwy funkcji wszystko w body się zmieni !UWAGA!
   zapis: (tutaj wpisujesz nazwę tej funkcji){kod css}
   Nie musisz nic dopisywać w HTML

I nareszcie CSS Cieszysz się?

Dobra, a cieszysz się, że najpierw są kolory?

Okej spoko, tak czy siak nieważne co wybrałeś, ja dalej zamierzam dawać Ci wiedzę - chyba że już to wyłączyłeś ze złości :). W takim razie oto parę nowych funkcji CSS:

• kolor liter
  color: (kolor);
• kolor tła
  background-color: (kolor);
• jak można zapisywać kolory?
  • normalnie po angielsku (w VSC masz podpowiedzi jakich kolorów możesz użyć)
  • sposobem RGB rgb(ile czerwonego, ile zielonego, ile niebieskiego) - w VSC masz wybieracz kolorów
  • sposobem RGBA rgba(ile czerwonego, ile zielonego, ile niebieskiego, w ułamku po przecinku procent przezroczystości) - w wybieraczu kolorów VSC możesz także dostosować przezroczystość
  • i osobistym kodem HTML dla każdego koloru (możecie je wyszukać w internecie)

Ale nie wszyscy korzystają tylko z kolorów, liter i tła - dlatego tutaj nie mogę skończyć tego poradnika!

Potrzebne są też na przykład pola z paskami przewijania.

Więc ze w związku z powyższym wam to pokaże i przy okazji ramki i marginesy, a może nawet odstęp pomiędzy ramką a obiektem.

Do roboty oto kolejna lista z tym wszystkim:

• pasek przewijania
  jest, w divie możecie go wybrać przez div klasę lub id pasek przewijania (patrz Jak zapisać?)
  zapisuje się tak: overflow-y: auto;
  overflow-x: hidden;


• margines lewy
  musi być przypisany do id klasy, lub znacznika (patrz Jak zapisać?)
  margin-left: (jaki ma być margines i jednostka)


• margines prawy
  musi być przypisany do id klasy, lub znacznika (patrz Jak zapisać?)
  margin-right: (jaki ma być margines i jednostka)


• margines górny
  musi być przypisany do id klasy, lub znacznika (patrz Jak zapisać?)
  margin-top: (jaki ma być margines i jednostka)


• margines dolny
  musi być przypisany do id klasy, lub znacznika (patrz Jak zapisać?)
  margin-bottom: (jaki ma być margines i jednostka)


• ramka
  musi być przypisana do id klasy lub znacznika (patrz Jak zapisać?)
  border: (grubość)px (rodzaj) (kolor)


• rodzaje ramek
  • solid zwykła
  
  
  
  • ridge prawdziwa ramka do obrazów
  
  
  
  • dashed linia kreskowana (przerywana)
  
  
  
  • dotted linia kropkowana
  
  
  
  • double podwójna zwykła
  
  
  
  • groove ramka wyglądająca jak wyryty wstręt / rowek w stronie
  
  
  • przestrzeń pomiędzy obiektem, a ramką (w obrazach to jest nie potrzebne ponieważ dobrze wyglądają wciśnięte w ramkę)
    padding: (ilość w px)

Trochę to było długie nie?

Dobra rozumiem, że was to wkurza, więc zostawiam sobie do zrobienia jeszcze jedno Tak/Nie

Hmm... Co jeszcze mi zostało?

To nie było Tak/Nie!!!

Ale już wiem!

Zostało mi, a dokładniej zostały mi dynamiczne „pseudo klasy”.

Zapisuje się je w mniej więcej taki sposób: nazwa znacznika:nazwa pseudo klasy {co robi}

Pierwsza to taka, której sam urzywam a:link !UWAGA! w niej nazwa znacznika jest zawsze taka sama! Ponieważ służy tylko do znacznika a i zmienia jego kolor przed klikniąciem!UWAGA!

Druga jej siostra bliźniaczka a:visited ma taką samą ważną zasadę co a:link i zmienia kolor linku po kliknięciu i zanim ją dodacie, radzę się zastanowić czy to konieczne, ponieważ użytkownicy są przyzwyczajeni do automatycznych kolorów.

Kolejna to hover i active robią, to samo tylko jedna jest, na sterowanie klawiaturą a druga myszką zmieniają coś po najechaniu kursorem.

I hover można, także używać do zrobienia powiększenia na przykład tak jak jest na tej stronie, że div się powiększa to, tak: div { transition: trans form 0.3s ease-out; } div:hover { transform: scale(1.03); } to jest efekt płynny, ale można zrobić, aby od razu się powiększał.