Kurs CSS, Inne
[ Pobierz całość w formacie PDF ]
KURS CSS
Wprowadzenie
Kaskadowe Arkusze Stylów (Cascading Style Sheets - CSS) jest to fantastyczne narzędzie pozwalające dodać układ graficzny do strony internetowej. Dzięki niemu oszczędzasz mnóstwo czasu i projektujesz stronę w całkowicie nowy sposób. CSS jest koniecznością każdego projektującego strony internetowe.
Ten kurs pozwoli ci zacząć z CSS w zaledwie pare godzin. Jest to łatwe w zrozumieniu i nauczy cię wszystkich złożonych technnik.
Nauka CSS jest zabawą. Jak tylko wgłębisz się w kurs, pamiętaj aby wykorzystać jak najwięcej czasu na eksperymenty z tym, czego nauczysz się w kolejnych lekcjach.
Używanie CSS wymaga podstawowego doświadczenia z językiem HTML. Jeżeli nie jesteś zaznajomiony z HTML, proszę zacznij od naszego kursu HTML zanim podążysz dalej w CSS.
Jakiego oprogramowania potrzebuje?
Proszę w trakcie kursu unikać korzystania z oprogramowania takiego jak FrontPage, DreamWeaver lub Word. Zaawansowane programy nie pomogą ci w nauce CSS. Zamiast tego, zwolnią znacząco twoją naukę.
Wszystko czego potrzebujesz to prosty i darmowy edytor tekstowy.
Na przykład, Microsoft Windows zawiera program zwany Notatnikiem. Najprawdopodobniej znajdziesz go w Akcesoriach w menu start pod menu Programy. Alternatywnie, możesz korzystać z podobnego prostego edytora tekstowego np. Pico dla Linux lub Simple Text dla systemu Macintosh.
Prosty edytor tekstowy jest idealnym narzędziem do nauki HTML i CSS ponieważ nie zmienia on w żaden sposób wprowadzanego przez ciebie kodu. Tym sposobem, sukcesy i błędy zawdzięczasz tylko i wyłącznie sobie - nie oprogramowaniu.
Możesz używać każdej przeglądarki w tym kursie. Zachęcamy cię jednak abyś zawsze uaktualniał swoją przeglądarkę i używał jej najnowszej wersji.
Przeglądarka i prosty edytor tekstowy to wszystko czego potrzebujemy.
Zaczynajmy!
Lekcja 1: Co to jest CSS?
Możliwe że słyszałeś już o CSS i nie wiedziales tak naprawdę co to oznacza. W tej lekcji nauczysz się czym jest CSS i co może dla ciebie zrobić.
CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów).
Co mogę zrobić z CSS?
CSS jest językiem stylu określającego układ graficzny dokumentów HTML. Na przykład, CSS ustawia parametry czcionki, kolorów, marginesów, linii, wysokości, szerokości, obrazków tła, zaawansowanego pozycjonowania i wielu innych rzeczy . Poczekaj a sam zobaczysz!
Można dodawać poprzez HTML układ graficzny. Ale CSS oferuje więcej opcji i jest bardziej dokładny i wyszukany. CSS jest wspierany przez większość dzisiejszych przeglądarek.
Po paru lekcjach tego kursu będziesz już potrafił tworzyć swoje własne arkusze stylów wykorzystując CSS do nadania swoim stronom wspaniałego wyglądu.
Jaka jest różnica między CSS a HTML?
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.
W dawnych dobrych czasach kiedy Madonna była dziewicą a facet zwany Tim Berners Lee wynalazł World Wide Web, język HTML był wykorzystywany tylko do nadawania struktury w tekście. Autor mógł oznaczyć swój tekst "to jest nagłówek" lub "to jest akapit" używając znaczników HTML takich jak <h1> i <p>.
Gdy internet zdobył popularność, twórcy stron zaczeli poszukiwać możliwości nadawania układu graficznego dokumentom HTML. Aby spełnić te wymagania, twórcy przeglądarki (w tamtych czasach Netscape i Microsoft) stworzyli nowe znaczniki HTML takie jak na przykład <font> , który różnił się od oryginalnych znaczników HTML przez to, że dodawał układ graficzny - a nie strukturę.
To także doprowadziło do sytuacji kiedy oryginalne znaczniki struktury <table> były coraz częściej błędnie wykorzystywane do tworzenia układu graficznego stron, zamiast dodawania struktury do tekstu. Wiele nowych znaczników układu graficznego takich jak <blink> było wspieranych tylko przez jeden typ przeglądarek. "Potrzebujesz przeglądarki X aby wyświetlić stronę" stał się częstym zaprzeczeniem na stronach internetowych.
CSS został stworzony aby rozwiązać problematyczną sytuację poprzez dostarczenie twórcom stron internetowych możliwości tworzenia zaawansowanych układów graficznych wspieranych przez wszystkie przeglądarki. W tym samym czasie, separacja prezentacji stylu dokumentów od treści dokumentów, pozwoliła na łatwiejszą kontrolę dokumentów.
Jakie korzyści da mi CSS?
CSS stał się rewolucją w świecie projektowania stron internetowych. Jedne z wielu korzyści CSS:
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, drukarka, itd.);
niezliczone zaawansowane i wyszukane techniki.
Lekcja 2: Jak działa CSS?
W tej lekcji nauczysz się jak stworzyć swój pierwszy arkusz stylów. Poznasz podstawy modelu CSS i jaki kod jest porerzebny aby CSS działał w dokumencie HTML.
Wiele właściwości używanych w Kaskadowych Arkuszach Stylów (CSS) jest podobnych do tych w HTML. Więc, jeżeli jesteś przyzwyczajony do stosowania HTML jako układ graficzny, najprawdopodobniej rozpoznasz wiele z kodów. Popatrzmy na konkretny przykład.
Podstawa składni CSS
Powiedzmy że chcemy ładny czerwony kolor tła na stronie:
Używając HTML możemy zrobić to tak:
<body bgcolor="#FF0000">
Dzięki CSS ten sam rezultat można osiągnąć w taki sposób:
body {background-color: #FF0000;}
Jak już pewnie zauważyłeś, kod jest bardzo podobny dla HTML i CSS. Powyższy przykład pokazuje także fundamentalny model CSS:
Ale gdzie umieszczam mój kod CSS? To jest dokładnie to czym się teraz zajmiemy.
Dodawanie CSS do dokumentu HTML
Są trzy sposoby stosowania CSS w dokumentach HTML. Te metody są przedstawione poniżej. Sugerujemy abyś skupił się na trzeciej metodzie tzn. zewnętrznej.
Metoda 1: W linii (atrybut style)
Pierwszym sposobem jest użycie atrybutu style. Poniżej umieszczony jest przykład użycia tej metody do zmiany koloru tła elementu na czerwony:
<html>
<head>
<title>Example</title>
</head>
<body style="background-color: #FF0000;">
<p>This is a red page</p>
</body>
</html>
Metoda 2: Wewnętrzna (znacznik style)
Innym sposobem jestt umieszczenie kodu CSS dzięki użyciu znacznika HTML - <style>. Przykład poniżej:
<html>
<head>
<title>Example</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>This is a red page</p>
</body>
</html>
Metoda 3: Zewnętrzna (odnośnik do arkusza stylów)
Sugerowaną metodą jest umieszczenie odnośnika do tak zwanego zewnętrznego arkusza stylów. Przykłady w tym kursie będą wykorzystywały właśnie tą metodę.
Zewnętrzny arkusz stylów jest po prosru plikiem tekstowym z rozszerzeniem .css. Tak jak każdy inny plik, możesz umieścić arkusz stylów na swoim serwerze internetowym lub na dysku twardym.
Na przykład, powiedzmy że arkusz stylów nazywa się arkusz.css i znajduje się w folderze style.
Sztuką jest utworzenie odnośnika z dokumentu HTML (default.htm) do arkusza stylów (arkusz.css). Taki odnośnik można stworzyć jedną linią kodu HTML:
<link rel="stylesheet" type="text/css" href="style/arkusz.css" />
Zauważ jak określiliśmy ścieżkę do arkusza stylów za pomocą atrybutu href.
Linia kodu musi zostać umieszczona w sekcji nagłówkowej dokumentu HTML tzn. pomiędzy znacznikiem <head> i </head>. Tak jak tutaj:
<html>
<head>
<title>Mój dokument</title>
<link rel="stylesheet" type="text/css" href="style/arkusz.css" />
</head>
<body>
...
Ten odnośnik mówi przeglądarce, że powinna korzystać z układu graficznego zdefiniowanego w pliku CSS podczas wyświetlania dokumentu HTML.
Naprawdę mądrą rzeczą jest to, że wiele dokumentów HTML może zostać połączonych z tym samym plikiem arkusza stylów. Innymi słowy, jeden plik CSS może kontrolować układ graficzny w wielu dokumentach HTML.
Ta technika zaoszczędzi ci mnóstwo czasu. Jeżeli, na przykład, będziesz chciał zmienić kolor tła strony internetowej zawierającej 100 dokumentów HTML, arkusz stylów uchroni cię od ręcznej zmiany wszystkich 100 stron. Używając CSS, zmianę można zrobić w parę sekund tylko poprzez modyfikacje w centralnym arkuszu stylów.
Poćwiczmy teraz wszystko czego się nauczyliśmy.
Sprawdź to sam
Otwórz Notatnik (lub jakikolwiek edytor tekstowy) i stwórz dwa pliki - plik HTML oraz plik CSS - z następującą zawartością:
default.htm
<html>
<head>
<title>Mój dokument</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Mój pierwszy arkusz stylów</h1>
</body>
</html>
style.css
body {
background-color: #FF0000;
}
Teraz umieść oba pliki w tym samym folderze. Pamiętaj aby zapisać pliki z poprawnymi rozszerzeniami (odpowiednio ".htm" oraz ".css")
Otwórz default.htm w swojej przeglądarce i zobacz jak strona uzyskała czerwone tło. Gratulacje! Zrobiłeś swój pierwszy arkusz stylów!
Lekcja 3: Kolory i tła
W tej lekcji nauczysz się stosowania CSS do zmiany kolorów oraz kolorów tła na swojej stronie internetowej. Popatrzymy także na zaawansowane metody pozycjonowania i kontroli obrazków w tle. Opiszemy następujące właściwości CSS:
color
background-color
background-image
background-repeat
background-attachment
background-position
background
Kolor pierwszoplanowy: właściwość 'color'
Właściwość color opisuje kolor pierwszoplanowy (najczęściej kolor napisów) elementu.
Na przykład, wyobraź sobie że chcesz aby nagłówki na stronie miały ciemno czerwony kolor. Nagłówki są oznaczone znacznikiem <h1> w kodzie HTML. Kod CSS poniżej ustawia kolor elementów <h1> na czerwony.
h1 {
color: #ff0000;
}
Kolory mogą zostać wprowadzone jako wartość szesnastkowa tak jak w przykładzie powyżej (#ff0000). Możesz także skorzystać z angielskich nazw najbardziej popularnych kolorów ("red" - czerwony) lub wartości rgb (rgb(255,0,0)).
Właściwość 'background-color'
Właściwość background-color opisuje kolor tła elementów.
Element <body> zawiera całą zawartość dokumentu HTML. Więc, aby zmienić kolor tła dla całej strony, właściwość background-color powinna stosować się do elementu <body>.
Możesz także zastosować kolory tła dla innych elementów, także dla nagłówków i tekstu. W poniższym przykładzie zastosowano różne kolory tła dla elementu <body> oraz <h1>.
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Zauważ użycie dwóch właściwości dla <h1> rozdzielonych średnikiem.
Obrazki w tle [background-image]
Właściwość CSS background-image jest używana do wstawiania obrazka w tle.
Jako przykład obrazka w tle poniżej użyliśmy motyla. Możesz zapisać obrazek na dysku tak byś mógł sam go użyć w praktyce (kliknij prawym klawiszem i wybierz "zapisz obrazek jako "), lub możesz użyć innego obrazka do ćwiczeń.
Aby umieścić obrazek motyla jako obrazek w tle dla strony internetowej, po prostu zastosuj właściwość background-image do elementu <body> i określ położenie obrazka.
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}
h1 {
color: #990000;
background-color: #FC9804;
}
Zauważ jak określona jest lokalizacja obrazka jako url("butterfly.gif"). To oznacza że obrazek mieści się w tym samym folderze gdzie arkusz stylów. Możesz także odwołać się do obrazka w folderze używając url("../images/butterfly.gif") lub nawet w Internecie określając pełen adres do pliku: url("http://www.html.net/butterfly.gif").
Powtarzanie obrazka w tle [background-repeat]
W powyższym przykładzie, czy zauważyłeś że standardowo obrazek powtarzał się w poziomie i w pionie i zakrywał całą stronę? Właściwość background-repeat kontroluje to zachowanie.
Tabela poniżej przedstawia cztery możliwe wartości dla właściwości background-repeat.Value Description Example
Background-repeat: repeat-x Obrazek powtarza się w poziomie Pokaż przykład
background-repeat: repeat-y Obrazek powtarza się w pionie Pokaż przykład
background-repeat: repeat Obrazek powtarza się w poziomie oraz w pionie Pokaż przykład
background-repeat: no-repeat Obrazek nie powtarza się Pokaż przykład
Na przykład, aby uniknąć powtarzania się obrazka w tle kod powinien wyglądać następująco:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
}
h1 {
color: #990000;
...
[ Pobierz całość w formacie PDF ]