Справочник по W3.CSS
Классы W3.CSS
| Класс |
Определяет |
|
| w3-контейнер |
Контейнер HTML с левым и правым отступом 16px |
|
| |
Используется как заголовок |
|
| |
Используется как нижний колонтитул |
|
| w3-панель |
Контейнер HTML с отступом слева и справа по 16 пикселей и верхним и нижним полем по 16 пикселей. |
|
| |
Используется для отображения заметки |
|
| |
Используется для отображения цитаты |
|
| w3-значок |
Круглый значок |
|
| w3 день |
Прямоугольный тег |
|
| w3-ул |
Неупорядоченный список |
|
| w3-дисплей-контейнер |
Контейнер для w3-display- classes (позволяет позиционировать элементы внутри контейнера) |
|
| w3-блок |
Класс, который можно использовать для определения полной ширины любого элемента. |
|
| w3-код |
Контейнер кода |
|
| w3-кодовый диапазон |
Контейнер встроенного кода (для фрагментов кода) |
|
| w3-контент |
Контейнер для содержимого фиксированного размера по центру |
|
| машина w3 |
Контейнер для адаптивного контента с центрированием по размеру |
|
| w3-стрейч |
Класс, удаляющий правое и левое поля (особенно полезно для растягивания строк с отступами (w3-row-padding)) |
|
| Класс |
Определяет |
|
| w3-таблица |
Контейнер для таблицы HTML |
|
| w3-полосатый |
Полосатый стол |
|
| w3-граница |
Таблица с рамкой |
|
| w3-окаймленный |
Линии с границами |
|
| w3 по центру |
Центрированная таблица |
|
| w3-hoverable |
Парящий стол |
|
| w3-таблица-все |
Все свойства установлены |
|
| |
С полосами w3, рамкой w3 и рамкой w3 |
|
| |
С цветной головой |
|
| |
С w3-отзывчивым |
|
| |
С w3-крошечный |
|
| |
С w3-маленький |
|
| |
С w3-большой |
|
| |
С w3-xlarge |
|
| |
С w3-xxlarge |
|
| |
С w3-xxxlarge |
|
| |
С цветом |
|
| |
С w3-джамбо |
|
| w3-отзывчивый |
Создает адаптивную таблицу |
|
| Класс |
Определяет |
|
| w3-карта |
То же, что и w3-card-2 |
|
| w3-карта-2 |
Контейнер для любого HTML-контента (тень с рамкой 2 пикселя) |
|
| w3-карта-4 |
Контейнер для любого HTML-контента (тень с рамкой 4 пикселя) |
|
| Класс |
Определяет |
|
| w3-ряд |
Контейнер для одного ряда адаптивного контента |
|
| w3-заполнение строки |
Строка, в которой все столбцы имеют заполнение по умолчанию |
|
| машина w3 |
Контейнер для адаптивного контента с центрированием по размеру |
|
| w3-стрейч |
Класс, удаляющий правое и левое поля |
|
| w3-половина |
Половина (1/2) контейнера ситовой колонны |
|
| w3-третий |
Третий (1/3) контейнер столбца экрана |
|
| w3-две трети |
Контейнер с двумя третьими (2/3) экранными колонками |
|
| w3-квартал |
Четверть (1/4) контейнера колонны экрана |
|
| w3-три четверти |
Контейнер колонны экрана на три четверти (3/4) |
|
| w3-столбец |
Контейнер столбца для любого HTML-контента |
|
| w3-отдых |
Занимает остальную часть ширины столбца |
|
| |
|
|
| л1 - л12 |
Адаптивные размеры для больших экранов |
|
| м1 - м12 |
Адаптивные размеры для средних экранов |
|
| с1 - с12 |
Адаптивные размеры для маленьких экранов |
|
| |
|
|
| w3-скрыть-маленький |
Скрыть контент на маленьких экранах (менее 601 пикселя) |
|
| w3-скрыть-средний |
Скрыть контент на средних экранах |
|
| w3-скрыть-большой |
Скрыть контент на больших экранах (более 992 пикселей) |
|
| |
|
|
| w3-изображение |
Адаптивное изображение |
|
| |
|
|
| w3-мобильный |
Добавляет отзывчивость для мобильных устройств к любому элементу.
Отображает элементы в виде блочных элементов на мобильных устройствах. |
|
| Класс |
Определяет |
|
| w3-cell-row |
Контейнер для столбцов макета (ячеек). |
|
| w3-ячейка |
Столбец макета (ячейка). |
|
| w3-cell-top |
Выравнивает содержимое по верху столбца (ячейки). |
|
| w3-cell-средний |
Выравнивает содержимое по вертикальной середине столбца (ячейки). |
|
| w3-cell-bottom |
Выравнивает содержимое по нижней части столбца (ячейки). |
|
| Класс |
Определяет |
|
| w3-бар |
Перекладина |
|
| w3-бар-блок |
Вертикальная полоса |
|
| w3-бар-элемент |
Обеспечивает общий стиль для элементов панели |
|
| w3-боковая панель |
Боковая панель |
|
| |
Боковая панель может содержать все типы контента |
|
| |
Боковая панель, перекрывающая основной контент |
|
| |
Боковая панель, перекрывающая весь основной контент |
|
| |
Боковая панель, смещающая основной контент вправо |
|
| |
Боковая панель с наложенным фоном |
|
| |
Боковая панель с правой стороны |
|
| w3-свернуть |
Используется вместе с w3-sidebar для создания полностью автоматической адаптивной боковой навигации. Чтобы этот класс работал, содержимое страницы должно находиться в классе «w3-main». |
|
| w3-основной |
Контейнер для содержимого страницы при использовании класса w3-collapse для адаптивной боковой навигации |
|
| |
Полностью автоматическая правосторонняя боковая навигация |
|
| w3-выпадающий-щелчок |
Кликабельный выпадающий элемент |
|
| w3-раскрывающийся список |
Выпадающий элемент с наведением |
|
| |
Выпадающий элемент с наведением (используется в w3-bar) |
|
| |
Выпадающий элемент с возможностью наведения (используется в блоке w3-bar) |
|
| |
Выпадающий элемент с возможностью наведения (используется на боковой панели w3) |
|
| Класс |
Определяет |
|
| w3-кнопка |
Прямоугольная кнопка с серым цветом фона при наведении |
|
| w3-бн |
Прямоугольная кнопка с тенями при наведении |
|
| w3-круг |
Можно использовать для создания круглой кнопки |
|
| w3-рябь |
Прямоугольная кнопка с волнистым эффектом |
|
| |
Круглая плавающая кнопка с волновым эффектом |
|
| w3-бар |
Может использоваться для группировки элементов (например, кнопок) на горизонтальной панели. |
|
| w3-блок |
Класс, который можно использовать для определения полноразмерной кнопки w3. |
|
| |
Полная ширина ш3-бтн |
|
| |
Круглая кнопка во всю ширину |
|
| Класс |
Определяет |
|
| w3-вход |
Элементы ввода |
|
| |
Форма ввода в виде карты |
|
| |
Элементы ввода (верхние метки) |
|
| |
Элементы ввода (нижние метки) |
|
| w3-проверить |
Тип ввода флажка |
|
| w3 радио |
Тип радио входа |
|
| w3-выбрать |
Входной элемент выбора |
|
| w3-анимация-ввод |
Анимирует ширину ввода до 100% |
|
| Класс |
Определяет |
|
| w3-модальный |
Модальный контейнер |
|
| w3-модальный-контент |
Модальный всплывающий элемент |
|
| w3-подсказка |
Элемент подсказки |
|
| w3-текст |
Текст всплывающей подсказки |
|
| Класс |
Определяет |
|
| w3-анимация-топ |
Анимирует элемент сверху от -300px до 0px |
|
| w3-анимация-влево |
Анимирует элемент слева от -300px до 0px |
|
| w3-анимация-дно |
Анимирует элемент снизу от -300px до 0px |
|
| w3-анимация-справа |
Анимирует элемент справа от -300px до 0px |
|
| w3-анимация-непрозрачность |
Анимирует непрозрачность элемента от 0 до 1 |
|
| w3-анимация-зум |
Анимирует элемент от 0 до 100% размера |
|
| w3-анимация-затухание |
Анимирует непрозрачность элемента от 0 до 1 и от 1 до 0 (исчезает и исчезает) |
|
| w3-спин |
Вращение иконки на 360 градусов |
|
| |
Вращайте любой элемент на 360 градусов |
|
| w3-анимация-ввод |
Анимирует ширину поля ввода до 100% |
|
| Класс |
Определяет |
|
| w3-крошечный |
Задает размер шрифта 10 пикселей. |
|
| w3-маленький |
Задает размер шрифта 12 пикселей. |
|
| w3-большой |
Задает размер шрифта 18 пикселей. |
|
| w3-xlarge |
Задает размер шрифта 24 пикселя. |
|
| w3-xxlarge |
Задает размер шрифта 32 пикселя. |
|
| w3-xxxlarge |
Задает размер шрифта 48 пикселей. |
|
| w3-джамбо |
Указывает размер шрифта 64 пикселя. |
|
| w3 шириной |
Задает более широкий текст |
|
| w3 с засечками |
Меняет шрифт на засечки |
|
| w3-без засечек |
Меняет шрифт на без засечек |
|
| w3-курсив |
Меняет шрифт на курсивный |
|
| w3-моноширинный |
Меняет шрифт на моноширинный |
|
| Класс |
Определяет |
|
| w3-центр |
Содержимое по центру |
|
| w3-левый |
Плавает элемент влево (float: left) |
|
| w3-право |
Плавает элемент вправо (float: right) |
|
| w3-выравнивание по левому краю |
Текст с выравниванием по левому краю |
|
| w3-выравнивание по правому краю |
Выровненный по правому краю текст |
|
| w3-выравнивание |
Выровненный по правому и левому краю текст |
|
| w3-блок |
Класс, который можно использовать для определения полной ширины любого элемента. |
|
| w3-круг |
Содержимое в кружке |
|
| w3-скрыть |
Скрытый контент (отображение: нет) |
|
| w3-шоу |
Показать содержимое (отображение:блок) |
|
| w3-шоу-блок |
Псевдоним w3-show (display:block) |
|
| w3-шоу встроенный блок |
Показывать содержимое как встроенный блок (display:inline-block) |
|
| w3-топ |
Фиксированный контент в верхней части страницы |
|
| w3-низ |
Фиксированный контент внизу страницы |
|
| w3-дисплей-контейнер |
Контейнер для w3-display- class (положение: относительное) |
|
| w3-дисплей-вверху слева |
Отображает содержимое в верхнем левом углу w3-display-container. |
|
| w3-дисплей-вверху справа |
Отображает содержимое в правом верхнем углу w3-display-container. |
|
| w3-дисплей-нижний левый |
Отображает содержимое в левом нижнем углу w3-display-container. |
|
| w3-дисплей-нижний правый |
Отображает содержимое в правом нижнем углу w3-display-container. |
|
| w3-дисплей-левый |
Отображает содержимое слева (посередине слева) от w3-display-container |
|
| w3-дисплей-справа |
Отображает содержимое справа (посередине справа) от w3-display-container |
|
| w3-дисплей-средний |
Отображает содержимое в середине (центре) w3-display-container |
|
| w3-дисплей-topmiddle |
Отображает содержимое вверху посередине w3-display-container |
|
| w3-дисплей-нижнийсредний |
Отображает содержимое внизу посередине w3-display-container |
|
| w3-позиция отображения |
Отображает содержимое в указанной позиции в w3-display-container |
|
| w3-дисплей-наведения |
Отображает содержимое при наведении внутри w3-display-container |
|
| Класс |
Определяет |
|
| w3-непрозрачность |
Добавляет непрозрачность/прозрачность элементу (непрозрачность: 0,6) |
|
| |
Добавить непрозрачность/прозрачность к тексту |
|
| w3-непрозрачность выключена |
Отключает непрозрачность/прозрачность (непрозрачность: 1) |
|
| w3-непрозрачность-мин |
Добавляет непрозрачность/прозрачность элементу (непрозрачность: 0,75) |
|
| w3-непрозрачность-макс. |
Добавляет непрозрачность/прозрачность элементу (непрозрачность: 0,25) |
|
| w3-оттенки серого-мин |
Добавляет эффект оттенков серого к элементу (оттенки серого: 50%). |
|
| w3-оттенки серого |
Добавляет эффект оттенков серого к элементу (оттенки серого: 75%). |
|
| w3-оттенки серого-макс. |
Добавляет эффект оттенков серого к элементу (оттенки серого: 100%). |
|
| w3-сепия-мин |
Добавляет элементу эффект сепии (сепия: 50%) |
|
| w3-сепия |
Добавляет элементу эффект сепии (сепия: 75%) |
|
| w3-сепия-макс |
Добавляет элементу эффект сепии (сепия: 100%) |
|
| w3-оверлей |
Создает эффект наложения |
|
| Класс |
Определяет |
|
| w3-красный |
Цвет фона красный |
|
| w3-розовый |
Цвет фона розовый |
|
| w3-фиолетовый |
Цвет фона фиолетовый |
|
| w3-темно-фиолетовый |
Цвет фона темно-фиолетовый |
|
| w3-индиго |
Цвет фона индиго |
|
| w3-синий |
Цвет фона синий |
|
| w3-голубой |
Цвет фона светло-голубой |
|
| w3-голубой |
Цвет фона голубой |
|
| w3-аква |
Цвет фона морской волны |
|
| w3-бирюзовый |
Бирюзовый цвет фона |
|
| w3-зеленый |
Цвет фона зеленый |
|
| w3-светло-зеленый |
Цвет фона светло-зеленый |
|
| w3-лайм |
Цвет фона салатовый |
|
| w3-песок |
Цвет фона песочный |
|
| w3-хаки |
Цвет фона хаки |
|
| w3-желтый |
Цвет фона желтый |
|
| w3-янтарный |
Янтарный цвет фона |
|
| w3-оранжевый |
Цвет фона оранжевый |
|
| w3-темно-оранжевый |
Цвет фона темно-оранжевый |
|
| w3-сине-серый |
Цвет фона сине-серый |
|
| w3-коричневый |
Цвет фона коричневый |
|
| w3-светло-серый |
Цвет фона светло-серый |
|
| w3-серый |
Цвет фона серый |
|
| w3-темно-серый |
Цвет фона темно-серый |
|
| w3-черный |
Цвет фона черный |
|
| w3-бледно-красный |
Цвет фона бледно-красный |
|
| w3-бледно-желтый |
Цвет фона бледно-желтый |
|
| w3-бледно-зеленый |
Цвет фона бледно-зеленый |
|
| w3-бледно-голубой |
Цвет фона бледно-голубой |
|
| w3-прозрачный |
Прозрачный цвет фона |
|
Цветовые классы при наведении
Приведенные выше цвета также можно использовать в качестве классов при наведении:
| Класс |
Определяет |
|
| w3-hover-белый |
Цвет при наведении белый |
|
| w3-hover-черный |
Черный цвет при наведении |
|
| w3-hover-красный |
Красный цвет при наведении |
|
| w3-hover-синий |
Синий цвет при наведении |
|
| w3-hover-зеленый |
Зеленый цвет при наведении |
|
| w3-hover-аква |
Цвет морской волны при наведении |
|
| w3-hover-оранжевый |
Оранжевый цвет при наведении |
|
| w3-hover-серый |
Цвет при наведении серый |
|
| w3-hover-бледно-зеленый |
Цвет при наведении бледно-зеленый |
|
| Класс |
Определяет |
|
| w3-текст-красный |
Цвет текста красный |
|
| w3-текст-зеленый |
Зеленый цвет текста |
|
| w3-синий текст |
Синий цвет текста |
|
| w3-желтый текст |
Желтый цвет текста |
|
| w3-текст-светло-серый |
Text color light-grey |
|
| w3-text-grey |
Text color grey |
|
| w3-text-dark-grey |
Text color dark grey |
|
| w3-text-black |
Text color black |
|
| w3-text-white |
Text color white |
|
| w3-text-pink |
Text color pink |
|
| w3-text-purple |
Text color purple |
|
| w3-text-teal |
Text color teal |
|
| w3-text-light-green |
Text color light green |
|
| w3-text-lime |
Text color lime |
|
| w3-text-deep-purple |
Text color deep purple |
|
| w3-text-indigo |
Text color indigo |
|
| w3-text-light-blue |
Text color light blue |
|
| w3-text-blue-grey |
Text color blue grey |
|
| w3-text-cyan |
Text color cyan |
|
| w3-text-aqua |
Text color aqua |
|
| w3-text-amber |
Text color amber |
|
| w3-text-orange |
Text color orange |
|
| w3-text-deep-orange |
Text color deep orange |
|
| w3-text-sand |
Text color sand |
|
| w3-text-khaki |
Text color khaki |
|
| w3-text-brown |
Text color brown |
|
The text classes above can also be used as hover classes:
| Class |
Defines |
|
| w3-hover-text-red |
Hover text color red |
|
| w3-hover-text-green |
Hover text color green |
|
| w3-hover-text-blue |
Hover text color blue |
|
| w3-hover-text-yellow |
Hover text color yellow |
|
| Class |
Defines |
|
| w3-hover-border-color |
Hover border color |
|
| w3-hover-opacity |
Adds transparency to an element on hover (opacity: 0.6) |
|
| w3-hover-opacity-off |
Removes transparency from an element on hover (100% opacity) |
|
| w3-hover-shadow |
Adds shadow to an element on hover |
|
| w3-hover-grayscale |
Adds a black and white (100% grayscale) effect to an element |
|
| w3-hover-sepia |
Adds a sepia effect to an element on hover |
|
| w3-hover-none |
Removes hover effects from an element |
|
| Class |
Defines |
|
| w3-round |
Element rounded (border-radius) 4px |
|
| w3-round-small |
Element rounded (border-radius) 2px |
|
| w3-round-medium |
Element rounded (border-radius) 4px |
|
| w3-round-large |
Element rounded (border-radius) 8px |
|
| w3-round-xlarge |
Element rounded (border-radius) 16px |
|
| w3-round-xxlarge |
Element rounded (border-radius) 32px |
|
| Class |
Defines |
|
| w3-padding-small |
Padding 4px top and bottom, and 8px left and right. |
|
| w3-padding |
Padding 8px top and bottom, and 16px left and right. |
|
| w3-padding-large |
Padding 12px top and bottom, and 24px left and right. |
|
| w3-padding-16 |
Padding 16px top and bottom |
|
| w3-padding-24 |
Padding 24px top and bottom |
|
| w3-padding-32 |
Padding 32px top and bottom |
|
| w3-padding-48 |
Padding 48px top and bottom |
|
| w3-padding-64 |
Padding 64px top and bottom |
|
| w3-padding-top-64 |
Padding 64px on top |
|
| w3-padding-top-48 |
Padding 48px on top |
|
| w3-padding-top-32 |
Padding 32px on top |
|
| w3-padding-top-24 |
Padding 24px on top |
|
| Class |
Defines |
|
| w3-margin |
Adds an 16px margin to an element |
|
| w3-margin-top |
Adds an 16px top margin to an element |
|
| w3-margin-right |
Adds an 16px right margin to an element |
|
| w3-margin-bottom |
Adds an 16px bottom margin to an element |
|
| w3-margin-left |
Adds an 16px left margin to an element |
|
| w3-section |
Adds an 16px top and bottom margin to an element |
|
| Class |
Defines |
|
| w3-border |
Borders (top, right, bottom, left) |
|
| w3-border-top |
Border top |
|
| w3-border-right |
Border right |
|
| w3-border-bottom |
Border bottom |
|
| w3-border-left |
Border left |
|
| w3-border-0 |
Removes all borders |
|
| w3-border-color |
Displays any defined borders in a specified color (like red, etc) |
|
| w3-bottombar |
Adds a thick bottom border (bar) to an element |
|
| w3-leftbar |
Adds a thick left border (bar) to an element |
|
| w3-rightbar |
Adds a thick right border (bar) to an element |
|
| w3-topbar |
Adds a thick top border (bar) to an element |
|
| w3-hover-border-color |
Hoverable border color |
|
