Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

Wprowadzenie do CSS. Co to jest CSS? CSS to technologia, która pozwala na dużą swobodę w formatowaniu dokumentów HTML. Upraszcza nie tylko tworzenie stron.

Podobne prezentacje


Prezentacja na temat: "Wprowadzenie do CSS. Co to jest CSS? CSS to technologia, która pozwala na dużą swobodę w formatowaniu dokumentów HTML. Upraszcza nie tylko tworzenie stron."— Zapis prezentacji:

1 Wprowadzenie do CSS

2 Co to jest CSS? CSS to technologia, która pozwala na dużą swobodę w formatowaniu dokumentów HTML. Upraszcza nie tylko tworzenie stron WWW, ale również ich późniejszą modyfikację.

3 Jak wygląda kod? Zobaczmy to na przykładzie. Gdy w HTML-u chcieliśmy pokolorować tekst w paragrafie na niebiesko, robiliśmy to tak : Jakiś tekst. W CSS zrobimy to już bez pomocy znacznika : Jakiś tekst. Przestawiamy się na znacznik style="" i zauważamy, że w deklarowaniu stylu występuje inna składnia: cecha: wartość;

4 Dlaczego warto korzystać z CSS?  Pozwala ustalić zbiorczy styl dla całej witryny.  Wszelkie modyfikacje oznaczają zmiany tylko w jednym pliku stylów.  Rozmiar plików HTML po zastosowaniu stylów maleje, czasem bardzo pokaźnie.  Mniejsze pliki to mniejszy transfer i szybsze ładowanie stron.  Przeglądarka przechowuje plik CSS w swoim buforze.

5 Sposoby wprowadzania stylów  Style umieszczane lokalnie  Style w nagłówku strony  Style jako zewnętrzny plik CSS

6 Style umieszczane lokalnie Jakiś tekst.

7 Style w nagłówku strony.p { color: blue; } Jakiś tekst.

8 Style jako zewnętrzny plik CSS Jakiś tekst. Znacznik wskazuje lokalizację zewnętrznego pliku CSS, tj. "style.css". W tym samym katalogu utworzymy plik o takiej nazwie i rozszerzeniu, wstawiając do niego: p { color: blue; }

9 Kolory w CSS  Opisowe nazwy kolorów  Szesnastkowe wartości RGB  Dziesiętne i procentowe wartości RGB

10 Opisowe nazwy kolorów color: blue; Istnieje 140 predefiniowanych nazw, z których każda znajduje swój odpowiednik w postaci kodu RGB. Niestety, nie mamy gwarancji, że te nazwy będą działały ze wszystkimi przeglądarkami. Istnieje jednak 16 podstawowych nazw, które na pewno obsłuży każda przeglądarka : black, white, aqua, blue, fuschia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow

11 Szesnastkowe wartości RGB color: #0000ff; Zapis szesnastkowy to trzy pary wartości ustalające kolejne składowe RGB. W przykładzie kolor składa się z trzech par wartości o tych samych kolorach. W CSS możemy uprościć ten zapis wg reguły: #aabbcc = #abc. Zatem poniższa, trzyliterowa notacja zostanie obsłużona prawidłowo przez przeglądarki color: #00f;

12 Dziesiętne i procentowe wartości RGB color: rgb(0, 0, 255); color: rgb(0%, 0%, 100%); To zdecydowanie najrzadziej stosowana przez webmasterów metoda zapisu. Kolor czarny przy takiej reprezentacji to: rgb(0, 0, 0), a biały: rgb(255, 255, 255). W notacji procentowej będzie to odpowiednio: rgb(0%, 0%, 0%), rgb(100%, 100%, 100%)

13 Dziedziczenie body { font-family: Verdana; } strong { text-decoration: underline; } Jakiś tekst W CSS podstawowym mechanizmem przydzielającym reguły jest dziedziczenie. Spójrzmy na fragment kodu: Wynikiem tego kodu będzie: body { font-family: Verdana; } strong { text-decoration: underline; } Jakiś tekst

14 Schemat dziedziczenia

15 Klasy selektorów selektor.klasa { cecha: wartość } Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne) Klasa to wartość atrybutu class="..." nadanego selektorowi z poziomu języka (X)HTML. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style.

16 Selektor identyfikatora selektor#identyfikator { cecha: wartość } Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne) Klasa to wartość atrybutu id="..." nadanego selektorowi z poziomu języka (X)HTML. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style. Polecenie to pozwala, na nadanie określonych atrybutów formatowania dla elementu, który ma jednoznaczny identyfikator (ID), czyli występuje tylko raz w drzewie dokumentu (w odróżnieniu od klasy).

17 Podsumowanie CSS został stworzony w celu odseparowania struktury dokumentu od formy jego prezentacji. Separacja ta zwiększa zakres dostępności witryny, zmniejsza zawiłość dokumentu, ułatwia wprowadzanie zmian w strukturze dokumentu. Stosowanie zewnętrznych arkuszy CSS daje możliwość zmiany wyglądu wielu stron na raz bez ingerowania w sam kod (X)HTML, ponieważ arkusze mogą być wspólne dla wielu dokumentów.


Pobierz ppt "Wprowadzenie do CSS. Co to jest CSS? CSS to technologia, która pozwala na dużą swobodę w formatowaniu dokumentów HTML. Upraszcza nie tylko tworzenie stron."

Podobne prezentacje


Reklamy Google