ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

W3.CSS Учебник

W3.CSS Учебник W3.CSS Введение W3.CSS Цвета W3.CSS Контейнеры W3.CSS Панели W3.CSS Границы W3.CSS Открытки W3.CSS Шрифты W3.CSS Текст W3.CSS Округлости W3.CSS Внутренние отступы W3.CSS Внешние отступы W3.CSS Отображение W3.CSS Кнопки W3.CSS Примечания W3.CSS Цитаты W3.CSS Оповещения W3.CSS Таблицы W3.CSS Списки W3.CSS Изображения W3.CSS Вводы W3.CSS Значки W3.CSS Ярлыки W3.CSS Иконки W3.CSS Адаптив W3.CSS Макеты W3.CSS Анимация W3.CSS Эффекты W3.CSS Панели W3.CSS Выпадающие W3.CSS Аккордионы W3.CSS Навигация W3.CSS Сайдбар W3.CSS Вкладки W3.CSS Пагинация W3.CSS Прогресс-бары W3.CSS Слайдшоу W3.CSS Модальные окна W3.CSS Всплывающие подсказки W3.CSS Сетка W3.CSS Код W3.CSS Фильтры W3.CSS Тренды W3.CSS Кейс W3.CSS Material-дизайн W3.CSS Валидация W3.CSS Версии W3.CSS Мобильность

W3.CSS Цвета

W3.CSS Классы цветов W3.CSS Цвет Material W3.CSS Цвет Flat UI W3.CSS Цвет Metro UI W3.CSS Цвет Win8 W3.CSS Цвет iOS W3.CSS Библиотеки цветов W3.CSS Цветовые схемы W3.CSS Цветовые темы W3.CSS Генератор цветов

Примеры

W3.CSS Примеры W3.CSS Демо W3.CSS Шаблоны

Справочники

W3.CSS Справочник W3.CSS Загрузки

W3.CSS Уроки для начинающих

W3.CSS Контейнеры


Это заголовок

Это статья

Эта статья светло-серая, а текст коричневый. Эта статья светло-серая, а текст коричневый. Эта статья светло-серая, а текст коричневый. Эта статья светло-серая, а текст коричневый. Эта статья светло-серая, а текст коричневый.

Это нижний колонтитул


Класс контейнера

Класс w3-container добавляет 16px левый и правый отступ (padding) к любому элементу HTML.

Класс w3-container является идеальным классом для использования на всех элементах контейнера HTML, таких как:

<div>, <article>, <section>, <header>, <footer>, <form> и др.


Контейнеры обеспечивают равенство

Класс w3-container обеспечивает равенство для всех элементов контейнера HTML:

  • Общие поля (margin)
  • Общие отступы (padding)
  • Общие выравнивания (align)
  • Общие шрифты (font)
  • Общие цвета (color)

Чтобы использовать контейнер, просто добавьте класс w3-container к любому элементу:

Пример

<div class="w3-container">
  <p>Класс w3-container является важным классом W3.CSS.</p>
</div>
Попробуйте сами »

Чтобы добавить цвет, просто добавьте класс w3-color:

Пример

<div class="w3-container w3-red">
  <p>Лондон является столицей Англии.</p>
</div>
Попробуйте сами »

Заголовки (header) и нижние колонтитулы (footer)

Класс w3-container может использоваться для стилизации заголовков:

Header

Пример

<div class="w3-container w3-teal">
  <h1>Header</h1>
</div>
Попробуйте сами »

Пример

<header class="w3-container w3-teal">
  <h1>Header</h1>
</header>
Попробуйте сами »

Нет разницы в том, как W3.CSS обрабатывает элементы <div> и <header>.

Класс w3-container может быть использован для оформления нижних колонтитулов:

Footer

Информация нижнего колонтитула идет здесь

Пример

<div class="w3-container w3-teal">
  <h5>Footer</h5>
  <p>Информация нижнего колонтитула идет здесь</p>
</div>
Попробуйте сами »

Пример

<footer class="w3-container w3-teal">
  <h5>Footer</h5>
  <p>Информация нижнего колонтитула идет здесь</p>
</footer>
Попробуйте сами »

Многие веб-страницы используют элементы <div> вместо элементов <header> и <footer>.


Статьи (article) и разделы (section)

Класс w3-container может использоваться для стилизации элементов <article> и <section>:

Пример

<div class="w3-container">
  <h2>London</h2>
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 9 million inhabitants.</p>
</div>

<article class="w3-container">
  <h2>Paris</h2>
  <p>The Paris area is one of the largest population centers in Europe,
  with more than 2 million inhabitants.</p>
</article>

<section class="w3-container">
  <h2>Tokyo</h2>
  <p>Tokyo is the center of the Greater Tokyo Area,
  and the most populous metropolitan area in the world.</p>
</section>
Попробуйте сами »

Многие веб-страницы используют элементы <div> вместо элементов <article> и <section>.


Пример веб-страницы

Header

Car

Автомобиль - это самоходное транспортное средство на колесах, используемое для перевозки. В большинстве определений этого термина указано, что автомобили предназначены для движения в основном по дорогам. (Википедия)

Footer

Пример использования HTML элементов <div>

<div class="w3-container w3-red">
  <h1>Header</h1>
</div>

<img src="img_car.jpg" alt="Автомобиль" style="width:100%">

<div class="w3-container">
  <p>Автомобиль - это самоходное транспортное средство на колесах, используемое для перевозки. В большинстве определений этого термина указано, что автомобили предназначены для движения в основном по дорогам. (Википедия)</p>
</div>

<div class="w3-container w3-red">
  <h5>Footer</h5>
</div>
Попробуйте сами »

Пример использования семантических HTML элементов

<header class="w3-container w3-teal">
  <h1>Header</h1>
</header>

<img src="img_car.jpg" alt="Car" style="width:100%">

<article class="w3-container">
  <p>Автомобиль - это самоходное транспортное средство на колесах, используемое для перевозки. В большинстве определений этого термина указано, что автомобили предназначены для движения в основном по дорогам. (Википедия)</p>
</article>

<footer class="w3-container w3-teal">
 <h5>Footer</h5>
</footer>
Попробуйте сами »

Отступы (padding) контейнера

Класс w3-container имеет по умолчанию 16px левый и правый отступы (padding), и не имеет отступов вверху и снизу:

У меня нет верхнего или нижнего отступа

Пример

<div class="w3-container w3-blue">
У меня нет верхнего или нижнего отступа.
</div>
Попробуйте сами »

Как правило, вам не нужно изменять padding контейнера по умолчанию, поскольку параграфы и заголовок обеспечивают поля, которые будут имитировать padding.

I am a Heading

I am a paragraph.

Пример

<div class="w3-container w3-blue">
  <h1>А заголовок</h1>
  <p>Я параграф.</p>
</div>
Попробуйте сами »