Wprowadzenie Darmowy kurs CSS http://pl.html.net/tutorials/css (przykłady)
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.
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.
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:
<style type="text/css">
body {background‐color: #FF0000;} </style>
<body>
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. Sytuację można zilustrować następująco:
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:
<title>Mój dokument</title>
...
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
cassida