CSS Kurs - Kurs CSS dla początkujących! css,style,kaskadowe,beginner,cascading style sheets,kurs,polski,stylesheet



Polecam: drukarnia Wroclaw
Przejrzyj sobie: Fajną stronę dobrej firmy poligraficznej drukarnia Wrocław.




Prosty program do faktur

Kurs CSS dla początkujących

Na kanale IRC, na którym przebywam, wiele osób z którymi rozmawiam nigdy nie miało do czynienia z CSS, albo mialo do czynienia w bardzo ograniczonym zakresie. Ten artykuł nauczy Cię podstaw styli kaskadowych abyś mógł napisać swoją pierwszą stronę opartą o style kaskadowe. Kurs jest skierowany do ludzi, którzy posiadają wiedzę z zakresu HTML i wykonali już w przeszłości jakieś strony w technologii HTML. Ok. Zaczynajmy zatem! Czym jest CSS? CSS jest językiem, który dodaje style (kolory, obrazki, obramowania, marginesy…) do Twojej strony www. To naprawdę nie jest trudne. CSS nie służy do umieszczania na Twojej stronie zawartości I treści, tylko nadaje jej właściwą formę, taką jaką sobie zażyczysz.. Pierwszą rzeczą jaką musisz wykonać jest plik CSS, który potem będzie użyty do formatowania Twojej zawartości w kodzie HTML. Możesz to zrobić w następujący sposób:

<link rel="stylesheet" href="style.css"
   type="text/css">
Linijki tego kodu powinny znajdować się pomiędzy tagami <head> i </head> . Jak wiadomo jest to tak zwany nagłówek strony www. Jeśli masz więcej niż jedną stronę www, powinny one posiadać taką linijkę pomiędzy meta tagami <head> i </head>, ale więcej o tym powiemy później. Spójrzmy dla przykładu w zawartość tego pliku "style.css", do którego się właśnie odwołaliśmy.
h1 {
   font-size: 40px;
   height: 200px;
}
.warning {
   color: Red;
   font-weight: bold;
}
#footer {
   background-color: Gray;
}
Jak widać mamy wyróżnione trzy selektory tam, h1, .warning i #footer. Selektor jest z reguły jakimkolwiek tagiem HTML, oraz może także wskazywać na atrybuty tagów HTML. Selektor może być zbudowany na wiele sposobów, możemy posłużyć się:

* Elementami


* Klasami


* Id (identyfikatorami)


Zamierzam przeanalizować wszystkie trzy elementy oraz opisać co każdy z nich ma do spełnienia za rolę podczas definiowania styli kaskadowych.. Element wskazuje na taga HTML gdziekolwiek u Ciebie na stronie WWW. W przykładzie powyżej chcemy nadal styl dla taga <h1>. Zwróć uwagę na to, że nadając jakiemuś tagowi globalnie styl będziemy mieli w całym dokumencie takie samo formatowanie (od tłumacza: oczywiście można także używać stylów inline, czyli np. w środku dokumentu jakiemuś tagowi <h1> nadać inne formatowanie), dlatego np. używając:
p { margin-left: 100px; }
styl nada wszystkim tagom <p> margines lewy na 100 pikseli. Uzywanie klas jest także bardzo proste. Podczas pisania .twojej_klasy nadajesz każdemu tagowi, który używa klasę twoja_klasa jej formatowanie. W przykładzie powyzej mamy klasę .warning która nada style np. tagom

<div class="warning"> i <em class="warning">
, zatem każdy z elementów znadujących się pomiędzy tymi tagami będzie miał formatowanie jakie przypisane jest w klasie warning. Klasy są używane wtedy gdy chcesz nadać formatowanie tylko kilku tagom na stronie. (od tłumacza: Dla przykładu np. linki do stron www, możesz zdefiniować dla każdego stanu linka jakiś inny kolor np. dla aktywnego, albo odwiedzonego linka można w ten sposób zdefiniować odmienne kolory. Możesz dodać klasę dla każdego takiego linka z osobna) Potrzebujesz jeszcze jeden blok do budowy, nazywa się on: id. Tym razem nadajesz styl tagowi z atrybutem id, który wybrałeś. Id'y działają w identyczny sposób jak klasy z jednym tylko wyjątkiem; możesz mieć tylko jeden id z konkretną nazwą w każdym ze swoich dokumentów HTML. W dokumencie powyżej nadaliśmy style dla taga
<div id="footer">
Jeśli spojrzysz na przykład od razu zwrócisz uwagę, że to ma sens: HTML dokument może zawierać wiele warnings, ale posiada tylko jedną stopkę. Id'y powinny być używane, jeśli chcesz nadać styl tylko jednemu konkretnemu tagowi HTML. Używanie tych trzech rodzajów bloków pozwoli Ci na budowanie stylowych stron www, ale jeśli być zechciał w przyszłości zbudować bardziej zaawansowane wyglądy stron www, zapewne zechcesz budować bloki w bardziej zaawansowane selektory. Aby zobrazować możliwości mieszania ze sobą bloków, przytoczę dwa przykłady:
em.warning
Ma nadać styl tylko tagowi <em>- z ustawioną klasą .warning. Możesz również użyć #footer a aby nadać style tylko linkom, które są osadzone w tagach z id "footer". Całkiem fajne, nieprawdaż? Mógłbym pisać wiele na temat selektorów i możliwości mieszania ich ze sobą, ale ten kurs jest tylko dla początkujących, zatem zaniecham rozwijania tego tematu. Jeśli chcesz pogłębić swoją wiedzę na ten temat, zachęcam Ciebie do odwiedzenia wspaniałego źródła wiedzy, które mieści się pod adresem Maxdesigns Selectutorial. Zajmijmy się teraz objaśnieniem kodu, jaki zapisaliśmy wcześniej powyżej. Każdy selektor ma jakieś deklaracje przyłączone do nich. Każda deklaracja ma właściwość, opisującą co chcemy zmienić i wartość, na jaką chcemy zmienić. Hmm, za dużo terminologii jak na jeden raz? Czytasz dalej ten kurs? :-) Pozwól, że wyjaśnię Ci to wszystko na przykładzie:
a { color: Blue; font-size: 3em; }
Mamy tutaj selektor a, so zatem wszystkie linki będą miały nadane style w Twoim dokumencie HTML. Mamy dwie deklaracje:
color: Blue i font-size: 3em;
Na sam koniec, każda z deklaracji posiada dwie częśći:
właściwość color i  wartość Blue
Ok, dobra robota, wiemy już coraz więcej na temat CSS, a terminologia którą użyliśmy powyżej pozwoli nam w sposób swobodny rozmawiać o stylach kaskadowych. Zatem jeśli odwiedzisz teraz chat IRC i uzyskasz odpowiedź na swój problem treści:

"Masz błąd w swoim selektorze A w drugiej deklaracji"

będziesz wiedział gdzie popełniłeś błąd, nieprawdaż? :) Teraz pewnie spytasz jakie występują właściwości/atrybuty. Widziałeś już font-size i color ale jakie inne właściwości można użyć? Odpowiedź brzmi WIELE rzeczy, którym możesz nadać style i się nimi pobawić. Dodatkowo warto powiedzieć, że wszystkie style są podobne w CSS, do tego jakich wartości możesz użyć w przypadku formatowania tekstu przy użyciu jedynie samego HTML'a na przykład : border, color itp. To jak, jesteś gotowy by zobaczyć co nam daje CSS? W każdym razie nie mam zamariu przedstawiać wszystkich właściwości/atrybuntów, ponieważ bym zanudził na śmierć. Zamiast tego przekieruję Cię na anglojęzyczną stronę: w3schools section about CSS. Tam po prostu wybierz sobie jedną z sekcji CSS po lewo w menu i możesz eksplorować wiedzę na ten temat. Tak, czy siak nie zostawiaj mnie samego z tym kursem i czytaj dalej, bo naprawde jest jeszcze sporo do nauczenia się! Na następnej stronie porozmawiamy o dobrym i złym kodowaniu i będzie tam dużo kolorowych przykładów aby wszystko unaocznić. Brzmi dobrze, nieprawdaż?

Przejdź na stronę nr 2 | nr 3 | nr 4 |

Tłumaczenie kursu wykonane zostało przez vj_, oryginał pochodzi ze strony Friendlybit.com i zostało oficjalnie potwierdzone przez autora kursu. Prawa autorskie do tłumaczenia zastrzeżone, możesz jednak swobodnie rozpowszechniać ten kurs podając link do strony autora tłumaczenia (http://vj.e.pl/), oraz linka do strony autora oryginału (http://www.friendlybit.com/)



Copyright vj zone 2006