plan kursów

zaawansowane kursy CSS

• Dodatkowa lektura CSS
• Wprowadzenie do CSS
• Podstawowa gramatyka CSS
• Zaawansowana gramatyka CSS
• Wybór zależny CSS
• Wybór id CSS
• Wybór klasy CSS
• Tworzenie CSS
• Tło CSS
• Tekst CSS
• Czcionki CSS
• Listy CSS

ramowy model CSS

• Podsumowanie modelu ramy CSS
• Wewnętrzne marginesy CSS
• Krawędzie CSS
• Zewnętrzne marginesy CSS
• Scalanie zewnętrznych marginesów CSS

pozycjonowanie CSS

• Podsumowanie pozycjonowania CSS
• Pozycjonowanie względne CSS
• Pozycjonowanie absolutne CSS
• Przepływ CSS

selektorzy CSS

• Wybór elementu CSS
• Grupowanie selektorów CSS
• Szczegółowy wybór klasy CSS
• Szczegółowy wybór id CSS
• Szczegółowy wybór selektora atrybutu CSS
• Wybór potomka CSS
• Wybór potomka CSS
• Wybór sąsiada CSS

wybieralne kursy

Polecane kursy:

• Skarbiec CodeW3C.com

CSS pozwala na zastosowanie czystych kolorów jako tła oraz na użycie obrazów tła do tworzenia dość złożonych efektów.

CSS ma znacznie większe możliwości w tym względzie niż HTML.

koloru tła

można użyć property background-colorUstawienie koloru tła dla elementu. Ta właściwość akceptuje każdą prawną wartość koloru.

To zasada ustawia kolor tła elementu na szary:

p {background-color: gray;}

Jeśli chcesz, aby kolor tła zewnętrzny elementu był nieco mniejszy niż tekst wewnątrz elementu, dodaj więcej wewnętrznego marginesu:

p {background-color: gray; padding: 20px;}

Spróbuj sam

Można ustawić kolor tła dla wszystkich elementów, w tym dla body oraz dla wewnętrznych elementów takich jak em i a.

property background-color nie jest dziedziczona, jej wartość domyślna to transparent. Transparent oznacza 'przezroczysty'. Oznacza to, że jeśli element nie ma określonego koloru tła, to tło jest przezroczyste, co pozwala na zobaczenie tła elementów nadrzędnych.

obrazu tła

Aby umieścić obraz w tle, należy użyć Atrybut background-image.Domyślna wartość atrybutu background-image to none, co oznacza, że na tle nie ma umieszczonych żadnych obrazów.

Aby ustawić obraz tła, musi się ustawić wartość URL dla tego atrybutu:

body {background-image: url(/i/eg_bg_04.gif);}

Większość tła jest aplikowana do elementu body, ale nie jest to ograniczone tylko do tego.

Poniższy przykład aplikuje tło do akapitu, bez aplikowania tła do innych części dokumentu:

p.flower {background-image: url(/i/eg_bg_03.gif);}

Nawet można ustawić obraz tła dla elementów wewnętrznych, poniższy przykład ustawia obraz tła dla linku:

a.radio {background-image: url(/i/eg_bg_07.gif);}

Spróbuj sam

Teoretycznie, można również zastosować obraz tła do elementów zastępczych, takich jak textareas i select, chociaż nie wszyscy agenci użytkowników mogą dobrze to obsługiwać.

Dodatkowo, atrybut background-image nie można dziedziczyć. W rzeczywistości, wszystkie atrybuty tła nie mogą być dziedziczone.

Powtarzanie tła

Jeśli należy powtarzać obraz tła na stronie, można użyć Atrybut background-repeat.

Wartość atrybutu repeat powoduje, że obraz jest rozkładany w poziomie i pionie, jak to często się robi z obrazami tła. repeat-x i repeat-y powodują, że obraz jest rozkładany tylko w poziomie lub pionie, a no-repeat nie pozwala na rozkładanie obrazu w żadnym kierunku.

Domyślnie, obraz tła zaczyna się od lewego górnego rogu elementu. Patrz na poniższy przykład:

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

Spróbuj sam

Umieszczenie tła

Można użyć Atrybut background-positionZmiana pozycji obrazu w tle.

Poniższy przykład umieszcza obraz tła w środku elementu body:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position: center;
  }

Wielu metod może dostarczać wartości dla atrybutu background-position. Najpierw, można używać niektórych słów kluczowych: top, bottom, left, right i center. Zwykle, te słowa kluczowe pojawiają się w parach, ale nie zawsze jest to tak. Można również używać wartości długości, takich jak 100px lub 5cm, a także wartości procentowych. Różne typy wartości mają niewielkie różnice w umieszczeniu obrazu tła.

Słowa kluczowe

Słowa kluczowe umieszczania obrazu są najłatwiejsze do zrozumienia, ich działanie jest zgodne z ich nazwą. Na przykład, top right umieszcza obraz w prawym górnym rogu obszaru wewnętrznego marginesu elementu.

Zgodnie z normą, słowa kluczowe pozycji mogą pojawiać się w dowolnej kolejności, pod warunkiem, że nie przekraczają dwóch słów kluczowych - jednego dla kierunku poziomego, drugiego dla kierunku pionowego.

Jeśli pojawia się tylko jeden słów kluczowych, uznaje się, że drugi słów kluczowych to center.

Dlatego, jeśli chcesz, aby każdy akapit miał obraz w środku góry, wystarczy zadeklarować:

p
  { 
    background-image:url('bgimg.gif');
    background-repeat:no-repeat;
    background-position:top;
  }

Poniżej znajdują się równoważne słowa kluczowe pozycji:

Wartości procentowe

Wyrażanie wartości procentowych jest bardziej złożone. Załóżmy, że chcesz użyć wartości procentowych, aby wyśrodkować obraz w elemencie, to jest łatwe:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50% 50%;
  }

To spowoduje odpowiednie umieszczenie obrazu, jego środek będzie wyśrodkowany z centrum elementu.Innymi słowy, wartości procentowe są stosowane jednocześnie do elementu i obrazu.To znaczy, punkt opisany jako 50% 50% w obrazie (punkt środkowy) będzie wyśrodkowany z punktem opisanym jako 50% 50% w elemencie (punkt środkowy).

Jeśli obraz znajduje się w 0% 0%, jego górny lewy kąt zostanie umieszczony w lewym górnym rogu obszaru wewnętrznego marginesu elementu. Jeśli pozycja obrazu wynosi 100% 100%, jego prawy dolny kąt zostanie umieszczony w prawym dolnym rogu marginesu.

Dlatego, jeśli chcesz umieścić obraz w 2/3 kierunku poziomego i 1/3 kierunku pionowego, możesz to wyrazić w ten sposób:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:66% 33%;
  }

Jeśli podano tylko wartość procentową, ta wartość zostanie użyta jako wartość pozioma, a wartość pionowa zostanie założona na 50%. To jest podobne do słów kluczowych.

Domyślna wartość background-position to 0% 0%, co funkcjonalnie odpowiada top left. To wyjaśnia, dlaczego obraz tła zawsze rozciąga się od lewego górnego rogu obszaru wewnętrznego marginesu elementu, chyba że ustawiono inne wartości pozycji.

Wartości długości

Wartości długości opisują przesunięcie z lewego górnego rogu wewnętrznego obszaru marginesu. Punkt przesunięcia to lewy górny róg obrazu.

Na przykład, jeśli wartość ustawiona to 50px 100px, lewy górny róg obrazu będzie znajdował się w górnym lewym rogu wewnętrznego obszaru marginesu o 50 pikseli na prawo i 100 pikseli w dół:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
  }

Zwróć uwagę, że to różni się od wartości procentowych, ponieważ przesunięcie dotyczy tylko lewego górnego rogu do innego lewego górnego rogu. To znaczy, że lewy górny róg obrazu wyśrodkowany jest z punktem określonym w deklaracji background-position.

Związanie tła

Jeśli dokument jest długi, to podczas przewijania dokumentu w dół, obraz tła również będzie się przesuwał. Kiedy dokument przesunie się poza pozycję obrazu, obraz zniknie.

Można to zrobić poprzez Atrybut background-attachmentUnikaj takiego przesuwania. Dzięki tej właściwości można oznaczyć, że obraz jest stały (fixed) w stosunku do obszaru widocznego, więc nie jest wpływanym przez przesuwanie:

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }

Spróbuj sam

Domyślna wartość atrybutu background-attachment to scroll, co oznacza, że w przypadku domyślnym tło będzie się przesuwać razem z dokumentem.

Atrybuty tła CSS

Narzędzia

Podręcznik referencyjny CSS

Przykłady CSS

Testy CSS

Podręcznik CSS

Linki sponsorowane