Languages

Це переклад. Він може містити помилки або бути застарілим відносно Англійської версії. Перекладач: Eugene Skrypets (ClustrMaps)

Каскадні таблиці стилів CSS поради & прийоми

Дивіться також покажчик усіх прийомів.

На цій сторінці:

Зображення & описи

Ейфелева вежа

Масштабована модель Ейфелевої вежі у Парку Міні-Франція

У HTML5 доданий новий елемент для додавання ілюстрації з описом. (Ми покажемо, як зробити теж саме у HTML4 нижче.)

<figure>
  <p><img src="eiffel.jpg"
    width="136" height="200"
    alt="Ейфелева вежа">
  <figcaption>Масштабована
    модель Ейфелевої вежі у Парку
    Міні-Франція</figcaption>
</figure>

Наприклад, щоб змістити зображення праворуч на відстань 30% від ширини оточуючих абзаців, використовуйте наступні правила:

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;
}

Насправді, дійсно необхідні тілки перших два визначення (float и width), інші тільки для декоративного оформлення.

Масштабування зображення

Тут тільки одна проблема і вона заключається в тому, що зображення може бути дуже широким. У цьому випадку зображення завжди 136px та ілюстрація буде займати 30% від оточуючого тексту. Та якщо ви зробите віконце менше, зображення може не вміститися й вилізти за рамку DIV (спробуйте це!).

Якщо ви знаєте ширину всіх зображень у документі, ви можете вказати мінімальну ширину ілюстрації наступним чином:

figure {
  min-width: 150px;
}

Сен-Тропе

Сен-Тропе та його форт у вечірньому сонці

Інший спосіб - це масштабувати власне зображення. Це те, що ми зробили із зображенням справа. Як ви, можливо, бачили, якщо зробити вікно браузера дуже широким - зображення JPEG масштабується не дуже добре. Але якщо це зображення - діаграма або графік у SVG форматі, масштабування працює просто чудово. Ось розмітка, яку ми використали:

<figure>
  <p><img class=scaled src="st-tropez.jpg"
    alt="Сен-Тропе">
  <figcaption>Сен-Тропе та його форт
    у вечірньому сонці</figcaption>
</figure>

Це таблиця стилів:

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%;
}

Одне доповнення: цей прийом робить зображення настільки широким, наскільки дозволяє DIV (площа всередині border та padding).

Розміщення опису зверху

Кап Ферра

Середземне море біля Кап Ферра

HTML дозволяе елементу figcaption бути або першим, або останнім елементом всередині ілюстрації. Якщо не застосовувати будь-яких правил CSS, це призведе до того, що опис буде розміщено або над ілюстрацією, або під нею відповідно.

Однак, незалежно від розмітки тексту, ви можете вказати в CSS, щоб опис з'явився або над зображенням, або під ним. Цього можна досягти, вказавши браузеру, що зображення повинно бути відформатовано як таблиця, в якій картинка є єдиною клітинкою, а опис стає заголовком таблиці. Просто додайте ці правила в таблицю стилів з попередньої секції:

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

Стиль, який ми використовували на цій сторінці, містить рамку сірого кольору. Вона обрамляє ілюстрацію. На жаль, коли ми використовуємо табличну розмітку, щоб помістити опис зверху чи знизу, ми повинні вказати рамку іншим чином, тому що опис розміщений за межами таблиці. Ми можемо виправити це, помістивши частину кордону на сам опис:

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

Ілюстрації & підписи у HTML4

Ейфелева вежа

Масштабована модель Ейфелевої вежі у Парку Міні-Франція

HTML 4, на відміну від HTML5, не має елементів, які б дозволили вставити в документ зображення з описом. Це пропонувалося зробити (дивись HTML3), але в підсумку у HTML4 ця пропозиція не увійшла. Ось єдина можливість відтворити елемент figure:

<div class=figure>
  <p><img src="eiffel.jpg"
    width="136" height="200"
    alt="Ейфелева вежа">
  <p>Масштабована модель
    Ейфелевої вежі у
    Парку Міні-Франція
</div>

Потім у таблиці стилів ви використовуєте клас "figure" для форматування ілюстрації так, як вам необхідно. Наприклад, щоб змістити ілюстрацію вправо на відстань, рівну 30% від ширини оточуючих абзаців, необхідно застосувати такі правила:

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;
}

Як і раніше, необхідні тільки дві перші декларації (float і width), а інші використані виключно для оформлення.

Масштабування зображення у HTML 4

Щоб уникнути виходу зображення за рамки ілюстрації та за умови, що ви знаєте ширину всіх зображень в документі, ви можете додати мінімальну ширину DIV наступним чином:

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

Сен-Тропе

Сен-Тропе та його форт у вечірньому сонці

Для масштабування зображення на всю ширину ілюстрації (як ми зробили з зображенням праворуч), ви можете додати атрибут КЛАСУ і відповідне правило CSS, дуже схоже на приклад з HTML5 вище. Ось розмітка, яку ми використовували:

<div class=figure>
  <p><img class=scaled src="st-tropez.jpg"
    alt="Сен-Тропе">
  <p>Сен-Тропе та його форт
    у вечірньому сонці
</div>

А ось таблиця стилів:

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%;
}

Одне доповнення: цей прийом робить зображення настільки широким, наскільки дозволяє DIV (площа всередині border та padding).

Розміщення опису зверху у HTML 4

Кап Ферра

Середземне море біля Кап Ферра

Щоб розмістити підпис зверху, додайте ці правила в таблицю стилів з попередніх секцій:

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

'+' Призводить до того, що правило діє на елемент P, який слідує за іншим P. Що означає, що умова діє на другий елемент P ілюстрації, який містить опис картинки.

(Ця техніка може привести до помилок в деяких браузерах, розроблених раніше 2003, особливо в комбінації з масштабуванням зображень, як в прикладі вище)

Як і раніше, сіра рамка, яку ми вибрали для обрамлення ілюстрацій на цій сторінці, обрамлятиме тільки саме зображення. Щоб рамка була навколо зображення та опису, додайте ці правила:

div.figure {
  border-top: none;
  padding-top: 0;
}
div.figure p + p {
  padding: 0.5em;
  border: thin silver solid;
  border-bottom: none;
}
Bert Bos, style activity lead
Copyright © 1994–2017 W3C®

Created 17 January 2001;
Last updated чт, 09-лис-2017 04:40:59 +0000

Languages

About the translations