Upload
dakota-huff
View
27
Download
0
Embed Size (px)
DESCRIPTION
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. selektor { background-color : kolor } gdzie: selektorem może być dowolny znacznik (X)HTML, - PowerPoint PPT Presentation
Citation preview
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.
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:<h2 style="background-color: yellow">Tytuł stopnia drugiego na
żółtym tle</h2>
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:
<h1 style="background-image: url(stars.jpg); color: white;">Tytuł stopnia pierwszego w kolorze białym z obrazkiem jako tło </h1>
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).
Przykłady
• repeat-x
<div style="background-image: url(stars.jpg); background-repeat: repeat-x">zastosowanie repeat-x, czyli powtórzenie tła w poziomie</div>
• repeat-y
<div style="background-image:url(stars.jpg); background-repeat: repeat-y;">zastosowanie repeat-y, czyli powtórzenie tła w pionie</div>
Przykłady
• repeat <div style="background-image: url(star.jpg); background-repeat: repeat; ">zastosowanie repeat, czyli powtórzenie tła na całej stronie</div>
• no-repeat <div style="background-image: url(stars.jpg); background-repeat: no-repeat;">zastosowanie no-repeat, czyli powtórzenie nie powtarzanie tła</div>
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
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).
Przykłady
1. Przykład zastosowania obrazka jako tła bez definiowania jego pozycji
<div style="background: url(star.jpg); background-repeat: no-repeat; height: 50px;"></div>
2. Przykład zastosowania obrazka jako tła z określeniem jego pozycji w pionie background-position: top
<div style="background:url(star.jpg); background-position: top; background-repeat: no-repeat; height: 50px;"></div>
Przykłady
3. Przykład zastosowania obrazka jako tła z określeniem jego pozycji w pionie background-position: center
<div style="background: url(star.jpg); background-position: center; background-repeat: no-repeat; height: 50px;"></div>
4. Przykład zastosowania obrazka jako tła z określeniem jego pozycji w pionie background-position: bottom
<div style="background: url(star.jpg); background-position: bottom; background-repeat: no-repeat; height: 50px;"></div>
Przykłady
5. Przykład zastosowania obrazka jako tła z określeniem jego pozycji w poziomie background-position: left
<div style="background: url(star.jpg); background-position: left; background-repeat: no-repeat; height: 50px;"></div>
6. Przykład zastosowania obrazka jako tła z określeniem jego pozycji w poziomie background-position: right
<div style="background: url(star.jpg); background-position: right; background-repeat: no-repeat; height: 50px;"></div>
Przykłady
7. Przykład zastosowania obrazka jako tła z określeniem jego pozycji w poziomie background-position: center
<div style="background: url(star.jpg); background-position: center; background-repeat: no-repeat; height: 50px;"></div>
Przykłady
1. Możemy mieszać wartości pozycji pionowej i poziomej background-position: top right
<div style="background: url(star.jpg); background-position: top right; background-repeat: no-repeat; height: 50px;"></div>
2. Możemy mieszać wartości pozycji pionowej i poziomej background-position: bottom left
<div style="background: url(star.jpg); background-position: bottom left; background-repeat: no-repeat; height: 50px;"></div>
Przykłady
1. Możliwe jest wreszcie podanie wartości liczbowych. background-position: 2cm 1cm
<div style="background: url(star.jpg); background-position: 2cm 1cm; background-repeat: no-repeat; height: 50px;"></div>
2. Możliwe jest wreszcie podanie wartości liczbowych. background-position: 70% 70%
<div style="background: url(star.jpg); background-position: 70% 70%; background-repeat: no-repeat; height: 50px;"></div>
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.
Przykład zastosowania:
• <div style="color: green; background: url(pies.jpg) no-repeat left top; padding:0px 0px 155px 155px;">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.</div>