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
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Projekt CSS</title> </head> <body> <p> <a>CLICK</a> </p> </body> </html> |
Ok, mamy dwa pliki, ale jak je połączyć? W selektorze <head> wklej ten kod:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Projekt CSS</title> <link rel="Stylesheet" type="text/css" href="style.css" /> </head> <body> <p> <a>CLICK</a> </p> </body> </html> |
No! W końcu po 30 minutach pracy połączyliśmy pliki 🙂 Teraz pora poznać zasady tworzenia takich plików:
|
1 2 3 4 5 6 7 8 9 10 11 |
/*Tutaj jest komentarz, deklaracje tworzy się nastepujaco: */ selektor { właściwość: wartosc; } /*selektor: np. body; własciwosc: opisane własciwosci CSS np. background-color; wartosc: opis tej własciwosci np. red; */ /*NIE ZAPOMNIJ O {} przy kazdej deklaracji, oraz ; po kazdej wartosci*/ |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
body { background-color: aqua; } p { color: blue; font-size: 150px; text-align: center; } a { text-decoration: none; } a:hover { color: rgb(255, 10, 10); /*hover oznacza co sie stanie z selektorem po najechaniu na niego*/ animation: blinker 1s linear infinite; text-decoration: none; } |
Efekt powinien wyglądać tak:
Spróbuj najechać na napis 🙂
Możesz poeksperymentować i rozszerzyć swój kod:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
body { background-color: aqua; } p { font-size: 150px; text-align: center; } a { color: blue; text-decoration: none; } a:hover { color: rgb(255, 10, 10); /*hover oznacza co się stanie z selektorem po najechaniu na niego*/ animation: blinker 1s linear infinite; text-decoration: none; } @keyframes blinker { 50% { opacity: 0; } } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Projekt CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="kolo"></div> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 |
body { background-color: gray; } #kolo { width: 300px; height: 300px; background-color: red; border-radius: 50%; margin: 10% auto; } |
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.
[caldera_form id=”CF5967958c2962a”]
Ten artykuł jest piątym wpisem z serii Irysy Tworzą Internet.
Ł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.
Świetny poradnik i bardzo ciekawy tytuł czekam na więcej
Żal znowu trafiłem na clickbait… nic wartościowego…
JK fajny poradnik, napewno zrobię.
Bardzo fajny poradnik! Czekam na więcej 🙂