Kurs CSS 2.1. Budujemy nowoczesne i stylowe witryny
U swych korzeni Internet miał służyć jedynie przekazywaniu porcji informacji. Oczywiście założenie to jest nadal prawdziwe, lecz w miarę rozwoju infrastruktury technicznej oraz dynamicznego poszerzania się grona użytkowników Sieci zaczęto przywiązywać odpowiednią wagę do sposobu prezentowania danych – do stylu dokumentu i form jego interakcji z użytkownikiem.
Początkowo formatowaniu treści służyły opisujące ją znaczniki HTML. W ten sposób stosowano określoną typografię, np. dzielono fragmenty tekstu na kolumny. Wiele z wykształconych w tej epoce metod znajduje zastosowanie (lub może raczej "pokutuje") do dziś – jak na przykład powszechne użycie znacznika <table>. W połowie lat dziewięćdziesiątych ubiegłego stulecia wzrost liczby stron internetowych i objętości publikowanych na nich treści wymusił jednak zmianę podejścia do zagadnień stylu. Konieczne stało się zastosowanie narzędzia, które poprzez oddzielenie treści od jej formy pozwoli efektywnie zarządzać sposobem prezentacji informacji na wielu stronach internetowych jednocześnie w sposób ujednolicony i wydajny. W ramach nowo powstałego World Wide Web Consortium (W3C) – organizacji mającej odtąd wyznaczać standardy rozwoju globalnej sieci – podjęto prace nad stworzeniem uniwersalnego języka opisu stylu dokumentu.
W rezultacie w grudniu 1996 roku ogłoszono specyfikację CSS w wersji 1.0. Bogaty zestaw reguł pozwalał w sposób daleko bardziej zaawansowany ingerować w sposób, w jaki przeglądarka będzie prezentowała dane. Układ tekstu został podporządkowany podstawowej jednostce – modelowi pudełka (box). Jego dowolnie skomplikowane kombinacje można obecnie wykorzystywać w tworzeniu warstwy graficznej strony, określając pozycję, odstępy, kolory i wzajemne zależności. Sam tekst może być także w niezwykle elastyczny sposób kontrolowany zarówno pod względem kroju, koloru, odstępów oraz marginesów, jak i w bardziej skomplikowanych układach. Po pewnym czasie poszerzono możliwości języka, tworząc standard CSS w wersjach 2.0 i 2.1. Jakkolwiek druga z tych specyfikacji nie została wciąż oficjalnie zarekomendowana, to zakres jej upowszechnienia czyni z niej de facto wyznacznik obecnie obowiązujących zasad projektowania. W przygotowaniu jest już standard CSS 3.0. Choć niektóre z jego właściwości zostały już na zasadach prototypu zaimplementowane w części programów, to moment ostatecznego wdrożenia wciąż jest nieznany.
Mimo upływu czasu i statusu standardu specyfikacja CSS 2.1 nie została nadal w całości "przyswojona" przez najbardziej liczące się przeglądarki. Prym wiedzie tutaj Internet Explorer, który nawet w najnowszej wersji nie zawiera pełnej implementacji CSS 2.1, ale nie jest on wyjątkiem. W takiej sytuacji webdesignerowi pozostaje skupienie się na elementach obsługiwanych przez jak największą liczbę programów. Co prawda ogranicza to możliwości twórcze, ale pozwala zapewnić wszystkim użytkownikom bezproblemowe korzystanie z finalnego dzieła. Zgodnie z tym podejściem w poniższym tekście uwzględniono jedynie te funkcje CSS 2.1, które są obecnie obsługiwane przez większość przeglądarek.
Spis treści:
1. Wprowadzenie
2. Struktura arkusza stylów (czytaj)
- 2.1. Podstawy składni
- 2.2. Rodzaje selektorów
- 2.3. Pseudoelementy i pseudoklasy
- 2.4. Rodzaje wartości i jednostki
- 2.5. Klauzula !important
- 2.6. @-reguły
- 2.7. Dziedziczenie
- 2.8. Przykład nr 1
3. Wyświetlanie elementów (czytaj)
- 3.1. Model pudełka
- 3.2. Wymiary
- 3.3. Dopełnienie
- 3.4. Ramka
- 3.5. Marginesy
- 3.6. Przykład nr 2
4. Pozycjonowanie elementów (czytaj)
- 4.1. Rodzaje elementów
- 4.2. Rodzaje pozycjonowania
- 4.3. Opływanie
- 4.4. Sortowanie stosu
- 4.5. Nadmiar treści
- 4.6. Przycinanie
- 4.7. Widoczność
- 4.8. Przykład nr 3
5. Formatowanie tekstu (czytaj)
- 5.1. Rodzaj czcionki
- 5.2. Waga czcionki
- 5.3. Kolor, styl i wariant czcionki
- 5.4. Tekst
- 5.5. Przykład nr 4
6. Formatowanie list (czytaj)
- 6.1. Definiowanie markerów
- 6.2. Przykład nr 5
7. Formatowanie tła (czytaj)
- 7.1. Wypełnienie kolorem
- 7.2. Wypełnienie obrazem
- 7.3. Przykład nr 6
8. Elementy interfejsu (czytaj)
- 8.1. Kolory
- 8.2. Czcionki
- 8.3. Kursory
9. Podsumowanie (czytaj)
«poprzednia 1 2 3 4 ... 9 następna »
Polecamy
Reklama
Komentarze
Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka
(słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.
Popularne
MSWiA zamówiło narzędzia do „złamania” Tora i podsłuchiwania internautów. Czy złamało przy tym prawo?
89
Korea Północna: korzystasz z telefonu komórkowego? Jesteś więc zbrodniarzem wojennym
5
Nowa polityka prywatności Google'a już za miesiąc wejdzie w życie. Mamy się czego bać?
16
Firefox 10 już jest. Wiele atrakcji dla programistów, użytkownicy raczej nic nie zauważą
9
Pobieraczek.pl pozwie internautów, którzy nie chcą płacić abonamentu
1451
Linux wypiera z korporacyjnych serwerów już nie tylko Uniksy, ale i Windows
11
Źle się dzieje z Chrome, ze stabilnością coraz gorzej. Gdzie się podziała słynna izolacja procesów?
23
MSWiA zamówiło narzędzia do „złamania” Tora i podsłuchiwania internautów. Czy złamało przy tym prawo?
89
[Aktualizacja] Facebook zablokował Demotywatory.pl. W czym zawiniły?
36
FBI zamknęło Megaupload. Anonimowi dali się sprowokować. Teraz ich akcja uzasadni potrzebę SOPA?
17
Pobieraczek.pl pozwie internautów, którzy nie chcą płacić abonamentu
1451
Rząd Tuska zablokował dostęp do tańszych leków z internetowych aptek
61
Programowanie w środowisku Android – wprowadzenie do projektowania aplikacji dla urządzeń mobilnych
15
„Donald matole, twój rząd dopadną kibole” – hakerska elita przyłącza się do walki z ACTA
23
Społeczność
matrixik A ja już długi czas temu przesiadłem się z Konnecta na Mirandę i jestem...
hipertracker @slawek22, ORM wcale nie musi tworzyć nieoptymalnych kwerend. Poza tym...
Rumcajs Kolejna PRowska ściema Donka. Już mnie krew zalewa.
Artykuł 41...
zalesz o Pan Sławek :)
Patrzę nic się nie zmieniło, w sumie to nic się nie...
slawek22 Jeszcze taka dygresja na poparcie tezy, akurat sobie czytałem o node...
slawek22 Tylko po co mi 5, 10 albo nawet 15 razy szybszy JRuby skoro całą "moc...
pobieraczek.pl zapłacicie wszyscy ;D
- gardius: Dobra hurtownia sportowa (1)
- gardius: Tanie książki gdzie warto kupować? (1)
- Najdmen.pl: PROMOCJA, 500 DOMEN .EU ZA 1 PLN NETTO ! (1)
- VMLine: [Oferta] Serwery VPS Xen-HVM/OpenVZ z darmową administracją (2)
- Marek: Generowanie PDFa (2)
- Marek: problem z menu (2)
- Marek: Własne checkboxy w HTML,CSS (1)
Polecane książki
Praca
Obsługa księgowa z językiem niemieckim
Tech Support Engineer with fluent English and German, French, Italian or Spanish
Młodszy Specjalista w Dziale Należności ze znajomością języka francuskiego
Analityk Baz Danych i Systemów Monitorowania
Menedżer ds. Klienta Biznesowego
Starszy Programista Aplikacji Internetowych/Team Leader
Czytaj Webhosting
Chcesz być na bieżąco z naszymi informacjami? Zapisz się na Newsletter.
Zarejestruj domenę
Sprawdź dostępność swojej domeny:
| .pl: | 0 zł | .com: | 19.90 zł | |
|---|---|---|---|---|
| .com.pl: | 0 zł | .eu: | 19.90 zł |









#1 qarola 2010-07-07 17:44:58 0
IP: 188.147.83.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/533.4 (KHTML, like Gecko) Chrome/5.0.375.99 Safari/533.4
#2 qarola 2010-07-07 17:46:17 0
IP: 188.147.83.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/533.4 (KHTML, like Gecko) Chrome/5.0.375.99 Safari/533.4
#3 ja_gupa 2010-08-05 13:04:52 0
IP: 213.108.11.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.2) Gecko/20090729 Firefox/3.5.2 (.NET CLR 3.5.30729)
#4 sprawdzenie strony 2011-03-29 22:00:23 -1
Pokaż komentarzIP: 212.160.166.[...] Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/534.16 (KHTML, like Gecko) Chrome/10.0.648.204 Safari/534.16
#5 web developer 2011-09-20 09:14:21 0
IP: 192.138.116.[...] Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 1.1.4322; .NET4.0C; .NET4.0E; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; MS-RTC LM 8; InfoPath.3)