Języki

Niniejszy dokument jest tłumaczeniem, które może zawierać błędy, lub który mógł się zdeaktualizować w stosunku do wersji angielskiej. Wykonane przez: Emil Sierżęga

Arkusze Kaskadowe Stylów CSS tips & tricks

Zobacz także indeks wszystkich porad.

Na tej stronie:

Figury i opisy

Eiffel tower

Pomniejszony model Wieży Eiffla w paryskim parku Francja w Miniaturze

HTML5 wprowadził element do dodawania opisu figury (ang. figure). (Pokażemy później jak ten sam efekt osiągnąć przy użyciu HTML4.) 

<figure>
  <p><img src="eiffel.jpg"
    width="136" height="200"
    alt="Wieża Eiffla">
  <figcaption>Pomniejszony model
    Wieży Eiffla w paryskim
    parku Francja w Miniaturze</figcaption>
</figure>

Dla przykładu, aby umieścić figurę po prawej stronie, na przestrzeni równej 30% otaczającego ją paragrafu, należy użyć następujących reguł: 

figure {
  float: right;
  width: 30%;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}

Tak naprawdę, tylko pierwsze dwie reguły (float i width) są kluczowe. Reszta to tylko dekoracja.

Skalowanie obrazu

We wcześniejszym przykładzie jest jeden problem. Obrazek może być za szeroki. W naszym wypadku, obrazek zawsze będzie miał szerokość 136 pikseli, natomiast figura będzie stanowić 30% otaczającego ją tekstu. A zatem, jeśli okno będzie dostatecznie małe, może się zdarzyć, że obrazek wyjdzie poza granice figury (spróbuj tak zrobić!).

Jeśli znasz szerokość wszystkich swoich obrazów w dokumencie, możesz dodać minimalną szerokość figury, o tak: 

figure {
  min-width: 150px;
}

St. Tropez

Fort w Saint Tropez skąpany w zachodzie słońca

Można również wyskalować sam obraz. Właśnie to uczyniliśmy po prawej stronie tego akapitu. Może jesteś w stanie zauważyć, że jeśli okno będzie bardzo szerokie, to obraz JPEG nie skaluje się za dobrze. Jednak, jeśli obraz jest diagramem albo grafem zapisanym w formacie SVG, skalowanie działa rewelacyjnie. Poniżej możesz zobaczyć kod, którego użyliśmy: 

<figure>
  <p><img class=scaled src="st-tropez.jpg"
    alt="St. Tropez">
  <figcaption>Fort w Saint Tropez skąpany
  w zachodzie słońca</figcaption>
</figure>

A style to: 

figure {
  float: right;
  width: 30%;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
img.scaled {
  width: 100%;
}

Jedynym dodatkowym elementem jest ostatnia reguła: sprawia ona, że obraz jest tak szeroki, jak szerokie jest wnętrze figury (obszar wewnątrz obramowania i paddingu).

Umieszczanie opisu na górze

Cap Ferrat

Morze Śródziemne w okolicy Cap Ferrat

HTML pozwala, aby opis figury (ang. figcaption) był pierwszym albo ostatnim elementem wewnątrz figury. Bez żadnych dodatkowych reguł, spowoduje to, że opis znajdzie się nad albo pod figurą.

Ale niezależnie od znaczników, możesz zapisać reguły CSS, tak aby wskazać czy opis powinien znajdować się pod czy nad obrazem. Zrobisz tak mówiąc przeglądarce, że figura powinna być formatowana jak tabela, z obrazem jako jej jedynym elementem i opisem, jako opisem tabeli. Wystarczy dodać poniższe reguły do tych używanych wcześniej: 

figure {
  display: table;
}
figcaption {
  display: table-caption;
  caption-side: top;
}

Styl użyty na tej stronie zawiera szare obramowanie dookoła figury. Niestety, kiedy użyjemy display: table-caption do wyświetlenia opisu pod lub nad obrazem, musimy także inaczej zdefiniować obramowanie, ponieważ opis jest umieszczany poza obramowaniem tabeli. Naprawimy to poprzez dodanie części obramowania do samego opisu: 

figure {
  border-top: none;
  padding-top: 0;
}
figcaption {
  padding: 0.5em;
  border: thin silver solid;
  border-bottom: none;
}

Figury i opisy w HTML4

Eiffel tower

Pomniejszony model Wieży Eiffla w paryskim parku Francja w Miniaturze

HTML4, inaczej niż HTML5, nie posiada żadnego wbudowanego mechanizmu do umieszczenia figur z opisem. Taka propozycja była kiedyś rozważana (zobacz HTML3), jednak ostatecznie nie trafiła do standardu HTML4. Poniżej znajduje się przykład tego jak możemy zasymulować brakujące elementy: 

<div class=figure>
  <p><img src="eiffel.jpg"
    width="136" height="200"
    alt="Wieża Eiffla">
  <p>Pomniejszony model Wieży
    Eiffla w paryskim parku
    Francja w Miniaturze
</div>

W arkuszu użyta jest klasa "figure", którą można zmieniać według własnych upodobań. Na przykład, aby umieścić figurę po prawej stronie, tak aby zajmowała 30% szerokości otaczającego ją paragrafu, możemy użyć poniższych reguł: 

div.figure {
  float: right;
  width: 30%;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}

Podobnie jak poprzednio, tak teraz, istotne są tylko dwie pierwsze deklaracje (float i width), pozostałe zostały dodane wyłącznie w celach dekoracyjnych.

Skalowanie obrazu w HTML4

Aby uniknąć wychodzenia szerokiego obrazu poza granice figury, jeśli znasz szerokości wszystkich obrazów w dokumencie, możesz ustawić minimalną szerokość elementu DIV, na przykład tak: 

div.figure {
  min-width: 150px;
}

St. Tropez

>Fort w Saint Tropez skąpany w zachodzie słońca

Aby dopasować obraz do szerokości figury (tak jak to zrobiliśmy z obrazem po prawej stronie), możesz dodać atrybut CLASS i odpowiednie reguły CSS, bardzo podobnie jak to miało miejsce we wcześniejszym przykładzie z HTML5. Poniżej przedstawiono zastosowane znaczniki: 

<div class=figure>
  <p><img class=scaled src="st-tropez.jpg"
    alt="St. Tropez">
  <p>>Fort w Saint Tropez
  skąpany w zachodzie słońca
</div>

Oraz style: 

div.figure {
  float: right;
  width: 30%;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}
img.scaled {
  width: 100%;
}

Istotna jest tutaj ostania reguła: to ona sprawia, że obraz jest tak szeroki jak szeroki jest sam DIV (obszar wewnątrz obramowania z paddingiem).

Umieszczanie opisu na górze w HTML4

Cap Ferrat

Morze Śródziemne w okolicy Cap Ferrat

Aby umieścić opis na górze, dodaj te reguły do wcześniejszych: 

div.figure {
  display: table;
}
div.figure p + p {
  display: table-caption;
  caption-side: top;
}

Operator '+' powoduje, że reguła jest zastosowana do elementów P, które następują po innym P. W tym wypadku oznacza to, że reguła pasuje do drugiego P w figurze, czyli tego, które zawiera opis.

(Ta technika może pokazać błędy starych przeglądarek (takich sprzed 2003 roku), szczególnie jeśli połączymy ją ze skalowaniem obrazu, tak jak w naszym przykładzie.)

Podobnie jak poprzednio, szare obramowanie zadziała tylko wokół samego obrazu. Aby umieścić je wokół całej figury (tj. obrazu z opisem), należy dodać poniższe reguły: 

div.figure {
  border-top: none;
  padding-top: 0;
}
div.figure p + p {
  padding: 0.5em;
  border: thin silver solid;
  border-bottom: none;
}
Bert Bos, Prowadzący dział CSS
Prawa autorskie © 1994–2021 W3C® Privacy policy

Utworzono 17 lutego 2001;
Ostatnia aktualizacja śro, 6 sty 2021, 05:40:49

Języki

O tłumaczeniach