publikuj: Opublikuj w wykop.pl Opublikuj we flaker.pl Opublikuj na OSnews.pl Opublikuj w delicious wydrukuj
5 skomentuj »

TAGI: css , html , kurs

2007-08-12 10:46  |  Marcin Modestowicz

Kurs CSS 2.1. Budujemy nowoczesne i stylowe witryny

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 »

publikuj: Opublikuj w wykop.pl Opublikuj we flaker.pl Opublikuj na OSnews.pl Opublikuj w delicious wydrukuj
5 skomentuj »

Polecamy

Reklama

Komentarze

  • qarola

    #1 qarola 2010-07-07 17:44:58 0

    drobna literówka w przykładzie 1 - zamiast

    powinno być

    :)

    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

  • qarola

    #2 qarola 2010-07-07 17:46:17 0

    no tak... :p

    zamiast 'h2' powinno być '/h1' :)

    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

  • ja_gupa

    #3 ja_gupa 2010-08-05 13:04:52 0

    no i przyszło mi się nauczyć css :P a już było tak miło jak sie zmusiłam to Latex`a i przebrnęłam przez skład pierwszych książek, a tu znowu coś potrzebnego do pracy... w jaskini to mieli prościej :P

    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)

  • sprawdzenie strony
  • web developer

    #5 web developer 2011-09-20 09:14:21 0

    Fachowo i na temat. Dobra robota, dzięki

    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)

Uwaga! Możesz zarejestrować się w serwisie i w ten sposób zarezerwować swój nick oraz ominąć konieczność ciągłego odczytywania wyrazów.

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.

Polecane książki

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ł