ITI #5 – ZAKAZANE sztuczki CSS – amatorscy styliści ich nienawidzą! (NOT CLICKBAIT)

Artykuł, który właśnie Cię zachęcił chwytliwym tytułem ma Ci pomóc zapoznać się z podstawami stylowania stron, co wcale nie jest tak skomplikowaną sztuką.

Uwaga! Tytuł kłamał i zawierał clickbait!

Kod i efekt znajdziesz tu: CLICK

Początkujący projektanci stron nie powinni obawiać się stosowania kaskadowych arkuszy stylów CSS. Używanie komputera również wydaje się bardzo skomplikowane dla nowicjuszy, ale sprowadza się jedynie do ciągłej praktyki i ćwiczeń. Podążanie do celu małymi kroczkami zawsze przybliży nas do osiągnięcia zamierzeń. W ostatecznym rozrachunku stajemy się prawdziwymi profesjonalistami.

Ale po co, w ogóle używać kaskadowych arkuszy stylów? Czy nie można użyć samego HTML? Zapamiętajcie:

HTML jest używany do strukturyzacji treści. CSS jest używany do formatowania tej treści.

Dobrze, brzmi trochę technicznie i mieszanie, ale proszę kontynuuj czytanie. wszystko niedługo stanie się sensowne.

Czyli jakie korzyści płyną z używania tej rewolucji w świecie projektowania stron internetowych:

  • kontrola układu graficznego wielu dokumentów z poziomu jednego arkusza stylów;
  • bardziej precyzyjna kontrola układu graficznego;
  • stosowanie różnych układów graficznych zależnie od typu medium (ekran, wydruk);
  • niezliczone zaawansowane i wyszukane techniki.

Myślę, że tyle teorii wystarczy, zacznijmy!:

  • stwórz w jednym folderze plik index.html oraz style.css
  • w pliku index.html stwórz podstawowy kod HTML, oraz dodaj jakiś tekst, możesz skopiować poniższy

Ok, mamy dwa pliki, ale jak je połączyć? W selektorze <head> wklej ten kod:

No! W końcu po 30 minutach pracy połączyliśmy pliki 🙂 Teraz pora poznać zasady tworzenia takich plików:

Dałem Ci pędzel, teraz to w twoich rękach leży, jaki pejzaż zobaczysz. Spis wielu właściwości znajdziesz na tej stronie. Zwykle, aby zmienić styl danego atrybutu wpisujemy w Google “how to change X in css”, możecie sami spróbować! (gdzie X to właściwość, którą chcemy zmienić)

OK! Zróbmy coś ciekawego, do pliku style.css wpisz ten kod:

Efekt powinien wyglądać tak:

Spróbuj najechać na napis 🙂

Możesz poeksperymentować i rozszerzyć swój kod:

Może sprawdźmy czego się nauczyliśmy, stwórzmy div’a, z którego zrobimy koło:

  • wpisujemy w Google: “how to make circle in css” i klikamy w pierwszy link. Znajdujemy kod CSS obrazka:
  • Chcemy, żeby nasze koło po prostu pojawiło się na środku naszej strony. Pewnie już domyślasz się, że należy dodać jeden element HTML do pliku index.html oraz skopiować kod CSS do naszego pliku z arkuszami styli.

Nasze pliki powinny wyglądać tak:

A efekt wygląda tak:

Widzicie jakie to proste?

OK, to jest wszystko, tak jak pisałem, reszta w twoich rękach, eksperymentuj, baw się i daj znać jak wyszło w komentarzu 😛

Aby dostać diamenty stwórzcie coś takiego i wyślijcie w formularzu w skompresowanym folderze (np. ZIP):

Po ukończeniu poradnika, wypełnij poniższy formularz, aby otrzymać Diamenty.

Form could not be loaded. Contact the site administrator.

 

Ten artykuł jest piątym wpisem z serii Irysy Tworzą Internet.

Łukasz P

Łukasz Polok

Od paru lat interesuje się programowaniem. Zacząłem niedawno naukę programowania JS i coraz bardziej się tym interesuję. Na razie zbieram na komputer.

Like
Like Love Haha Wow Sad Angry
611

3 Replies to “ITI #5 – ZAKAZANE sztuczki CSS – amatorscy styliści ich nienawidzą! (NOT CLICKBAIT)”

  1. Świetny poradnik i bardzo ciekawy tytuł czekam na więcej

  2. Żal znowu trafiłem na clickbait… nic wartościowego…

    JK fajny poradnik, napewno zrobię.

  3. Bardzo fajny poradnik! Czekam na więcej 🙂

Dodaj komentarz