Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

Aplikacje internetowe CSS – kolory i obrazy tła. Kolor tła (background-color) Właściwość background-color pozwala zdefiniować kolor tła dla elementu.

Podobne prezentacje


Prezentacja na temat: "Aplikacje internetowe CSS – kolory i obrazy tła. Kolor tła (background-color) Właściwość background-color pozwala zdefiniować kolor tła dla elementu."— Zapis prezentacji:

1 Aplikacje internetowe CSS – kolory i obrazy tła

2 Kolor tła (background-color) Właściwość background-color pozwala zdefiniować kolor tła dla elementu. selektor {background-color: kolor} gdzie: selektorem może być dowolny znacznik (X)HTML, jako kolor należy podać definicję koloru. Wpisanie wartości transparent ustali tło przezroczyste. Oto przykład: Tytuł stopnia drugiego na żółtym tle

3 Grafika jako tło (background-image) Właściwość background-image pozwala zdefiniować obraz jako tło. selektor {background-image: url (adres_obrazka)} gdzie: selektorem może być dowolny znacznik (X)HTML, jako adres_obrazka należy podać miejsce, gdzie znajduje się obrazek, który chcemy wstawić jako tło. Wpisanie none usunie obrazek. Oto przykład: Tytuł stopnia pierwszego w kolorze białym z obrazkiem jako tło

4 Powtarzanie tła (background-repeat) Właściwość background-repeat pozwala określić, jak mają sąsiadować ze sobą obrazy. selektor {background-repeat: powtarzanie} gdzie: selektorem może być praktycznie dowolny znacznik (X)HTML, jako powtarzanie należy wpisać: – repeat - powtarzanie tła w obu kierunkach (domyślnie), – repeat-x - powtarzanie tła tylko w kierunku poziomym, wzdłuż osi X, – repeat-y - powtarzanie tła tylko w kierunku pionowym, wzdłuż osi Y, – no-repeat - brak powtarzania tła (zostanie wyświetlone jako pojedynczy obrazek).

5 Przykłady repeat-x zastosowanie repeat-x, czyli powtórzenie tła w poziomie repeat-y zastosowanie repeat-y, czyli powtórzenie tła w pionie

6 Przykłady repeat zastosowanie repeat, czyli powtórzenie tła na całej stronie no-repeat zastosowanie no- repeat, czyli powtórzenie nie powtarzanie tła

7 Pozycja tła (background-position) Właściwość background-position służy do określania pozycji tła graficznego. selektor {background-position: pozycja} gdzie: selektorem może być znacznik (X)HTML wyświetlany w bloku albo zastępowalny, jako pozycja należy wpisać: – Jedną wartość: center - obrazek na środku (w centrum) left - obrazek po lewej right - po prawej top - na górze bottom - na dole jednostka długości - odległość od lewej krawędzi

8 Pozycja tła (background-position) – Dwie wartości (oddzielone spacją): left top - lewy-górny róg left bottom - lewy-dolny róg right top - prawy-górny róg right bottom - prawy-dolny róg Polecenie to ma sens, tylko jeśli określimy równocześnie tło obrazkowe oraz ograniczymy jego powtarzanie (no-repeat, repeat-x lub repeat-y).

9 Przykłady 1.Przykład zastosowania obrazka jako tła bez definiowania jego pozycji 2.Przykład zastosowania obrazka jako tła z określeniem jego pozycji w pionie background-position: top

10 Przykłady 3.Przykład zastosowania obrazka jako tła z określeniem jego pozycji w pionie background-position: center 4.Przykład zastosowania obrazka jako tła z określeniem jego pozycji w pionie background-position: bottom

11 Przykłady 5.Przykład zastosowania obrazka jako tła z określeniem jego pozycji w poziomie background-position: left 6.Przykład zastosowania obrazka jako tła z określeniem jego pozycji w poziomie background-position: right

12 Przykłady 7.Przykład zastosowania obrazka jako tła z określeniem jego pozycji w poziomie background-position: center

13 Przykłady 1.Możemy mieszać wartości pozycji pionowej i poziomej background-position: top right 2.Możemy mieszać wartości pozycji pionowej i poziomej background-position: bottom left

14 Przykłady 1.Możliwe jest wreszcie podanie wartości liczbowych. background-position: 2cm 1cm 2.Możliwe jest wreszcie podanie wartości liczbowych. background-position: 70% 70%

15 Atrybuty mieszane tła (background) Polecenie to pozwala w wygodny sposób zdefiniować wszystkie atrybuty tła. Nie musimy wypisywać kolejno wszystkich cech, a jedynie ich konkretne wartości. selektor {background: wartości atrybutów} gdzie: selektorem może być dowolny znacznik (X)HTML, jako wartości atrybutów należy wpisać konkretne wartości atrybutów dotyczących tła, które będą oddzielone od siebie spacjami (przy czy można niektóre pominąć). Są to: – kolor tła, – tło obrazkowe, – powtarzanie tła, – zaczepienie tła, – pozycja tła.

16 Przykład zastosowania: To jest akapit z obrazkiem w tle. Obrazek ma podaną w nawiasie ścieżkę dostępu i nie jest powtarzany (no- repeat). Znajduje się po lewej stronie. Tekst pisany jest kolorem zielonym i jest oddalony od lewej krawędzi o 155px. Szerokość obrazka wynosi 150px. W przypadku gdybyśmy nie określili przesunięcia w prawo, tekst zaczynałby się standardowo przy lewej krawędzi.


Pobierz ppt "Aplikacje internetowe CSS – kolory i obrazy tła. Kolor tła (background-color) Właściwość background-color pozwala zdefiniować kolor tła dla elementu."

Podobne prezentacje


Reklamy Google