НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
W3CSS. W3Schools українською. Уроки для початківців

En

W3.CSS Довідник


W3.CSS Класи


Класи контейнерів

Клас Визначає
w3-container Контейнер HTML із відступами ліворуч і праворуч 16 пікселів Спробуй це
  Використовується як заголовок Спробуй це
  Використовується як нижній колонтитул Спробуй це
w3-panel HTML-контейнер із лівим і правим відступами 16 пікселів і верхнім і нижнім полями 16 пікселів Спробуй це
  Використовується для відображення примітки Спробуй це
  Використовується для відображення цитати Спробуй це
w3-badge Круговий значок Спробуй це
w3-tag Прямокутний ярлик Спробуй це
w3-ul Невпорядкований список Спробуй це
w3-display-container Контейнер для w3-display-класів (дозволяє позиціонувати елементи всередині контейнера) Спробуй це
w3-block Клас, який можна використовувати для визначення повної ширини будь-якого елемента Спробуй це
w3-code Контейнер коду Спробуй це
w3-codespan Вбудований контейнер коду (для фрагментів коду) Спробуй це
w3-content Контейнер для вмісту фіксованого розміру по центру Спробуй це
w3-auto Контейнер для адаптивного вмісту з центром на розмір Спробуй це
w3-stretch Клас, який видаляє правий і лівий поля (особливо корисний для розтягування заповнених рядків (w3-row-padding)) Спробуй це

Табличні класи

Клас Визначає
w3-table Контейнер для таблиці HTML Спробуй це
w3-striped Смугаста таблиця Спробуй це
w3-border Таблиця з межами Спробуй це
w3-bordered Лінії з межами Спробуй це
w3-centered Таблиця по центру Спробуй це
w3-hoverable Hoverable table Спробуй це
w3-table-all Усі встановлені властивості Спробуй це
  With w3-striped, w3-border, and w3-bordered Спробуй це
  With colored head Спробуй це
  With w3-responsive Спробуй це
  With w3-tiny Спробуй це
  With w3-small Спробуй це
  With w3-large Спробуй це
  With w3-xlarge Спробуй це
  With w3-xxlarge Спробуй це
  With w3-xxxlarge Спробуй це
  With color Спробуй це
  With w3-jumbo Спробуй це
w3-responsive Creates a responsive table Спробуй це

Класи карток

Клас Визначає
w3-card Same as w3-card-2 Спробуй це
w3-card-2 Container for any HTML content (2px bordered shadow) Спробуй це
w3-card-4 Container for any HTML content (4px bordered shadow) Спробуй це

Класи адаптивності

Клас Визначає
w3-row Container for one row of fluid responsive content Спробуй це
w3-row-padding Row where all columns have a default padding Спробуй це
w3-auto Container for responsive size centered content Спробуй це
w3-stretch Клас that removes right and left margins Спробуй це
w3-half Half (1/2) screen column container Спробуй це
w3-third Third (1/3) screen column container Спробуй це
w3-twothird Two third (2/3) screen column container Спробуй це
w3-quarter Quarter (1/4) screen column container Спробуй це
w3-threequarter Three quarters (3/4) screen column container Спробуй це
w3-col Column container for any HTML content Спробуй це
w3-rest Occupies the rest of the column width Спробуй це
     
l1 - l12 Responsive sizes for large screens Спробуй це
m1 - m12 Responsive sizes for medium screens Спробуй це
s1 - s12 Responsive sizes for small screens Спробуй це
   
w3-hide-small Hide content on small screens (less than 601px) Спробуй це
w3-hide-medium Hide content on medium screens Спробуй це
w3-hide-large Hide content on large screens (larger than 992px) Спробуй це
   
w3-image Responsive image Спробуй це
   
w3-mobile Adds mobile-first responsiveness to any element.
Displays elements as block elements on mobile devices.
Спробуй це

Класи макету

Клас Визначає
w3-cell-row Container for layout columns (cells). Спробуй це
w3-cell Layout column (cell). Спробуй це
w3-cell-top Aligns content at the top of a column (cell). Спробуй це
w3-cell-middle Aligns content at the vertical middle of a column (cell). Спробуй це
w3-cell-bottom Aligns content at the bottom of a column (cell). Спробуй це

Класи панелей - Навігація

Клас Визначає
w3-bar Horizontal bar Спробуй це
w3-bar-block Vertical bar Спробуй це
w3-bar-item Provides common style for bar items Спробуй це
w3-sidebar Sidebar Спробуй це
  A sidebar can contain all types of content Спробуй це
  A sidebar overlaying main content Спробуй це
  A sidebar overlaying all main content Спробуй це
  A sidebar shifting main content to the right Спробуй це
  A sidebar with an overlay background Спробуй це
  A Side bar on the right side Спробуй це
w3-collapse Used together with w3-sidebar to create a fully automatic responsive side navigation. For this class to work, the page content must be within a "w3-main" class Спробуй це
w3-main Container for page content when using the w3-collapse class for responsive side navigations Спробуй це
  Fully automatic right-sided responsive side navigation Спробуй це

Dropdown Класи

w3-dropdown-click Clickable dropdown element Спробуй це
w3-dropdown-hover Hoverable dropdown element Спробуй це
  Hoverable dropdown element (used in w3-bar) Спробуй це
  Hoverable dropdown element (used in w3-bar-block) Спробуй це
  Hoverable dropdown element (used in w3-sidebar) Спробуй це

Button Класи

Клас Визначає
w3-button Rectangular button with grey background color on hover Спробуй це
w3-btn Rectangular button with shadows on hover Спробуй це
w3-circle Can be used to create a circular button Спробуй це
w3-ripple Rectangular button with ripple effect Спробуй це
  Circular floating button with ripple effect Спробуй це
w3-bar It сan be used to group elements (like buttons) in a horizontal bar Спробуй це
w3-block Клас that can be used to define a full width w3-button Спробуй це
  Full width w3-btn Спробуй це
  Full width circular button Спробуй це

Input Класи

Клас Визначає
w3-input Input elements Спробуй це
  Input form as a card Спробуй це
  Input elements (top labels) Спробуй це
  Input elements (bottom labels) Спробуй це
w3-check Checkbox input type Спробуй це
w3-radio Radio input type Спробуй це
w3-select Input select element Спробуй це
w3-animate-input Animates the width of an input to 100% Спробуй це

Modal Класи

Клас Визначає
w3-modal Modal container Спробуй це
w3-modal-content Modal pop-up element Спробуй це
w3-tooltip Tooltip element Спробуй це
w3-text Tooltip text Спробуй це

Animation Класи

Клас Визначає
w3-animate-top Animates an element from the top -300px to 0px Спробуй це
w3-animate-left Animates an element from left -300px to 0px Спробуй це
w3-animate-bottom Animates an element from the bottom -300px to 0px Спробуй це
w3-animate-right Animates an element from right -300px to 0px Спробуй це
w3-animate-opacity Animates an element's opacity from 0 to 1 Спробуй це
w3-animate-zoom Animates an element from 0 to 100% in size Спробуй це
w3-animate-fading Animates an element's opacity from 0 to 1 and 1 to 0 (fades in AND out) Спробуй це
w3-spin Spin an icon 360 degrees Спробуй це
  Spin any element 360 degrees Спробуй це
w3-animate-input Animates the width of an input field to 100% Спробуй це

Класи шрифту та тексту

Клас Визначає
w3-tiny Specifies a font size of 10 pixels Спробуй це
w3-small Specifies a font size of 12 pixels Спробуй це
w3-large Specifies a font size of 18 pixels Спробуй це
w3-xlarge Specifies a font size of 24 pixels Спробуй це
w3-xxlarge Specifies a font size of 32 pixels Спробуй це
w3-xxxlarge Specifies a font size of 48 pixels Спробуй це
w3-jumbo Specifies a font size of 64 pixels Спробуй це
w3-wide Specifies a wider text Спробуй це
w3-serif Changes the font to serif Спробуй це
w3-sans-serif Changes the font to sans-serif Спробуй це
w3-cursive Changes the font to cursive Спробуй це
w3-monospace Changes the font to monospace Спробуй це

Display Класи

Клас Визначає
w3-center Centered content Спробуй це
w3-left Floats an element to the left (float: left) Спробуй це
w3-right Floats an element to the right (float: right) Спробуй це
w3-left-align Left aligned text Спробуй це
w3-right-align Right aligned text Спробуй це
w3-justify Right and left aligned text Спробуй це
w3-block Клас that can be used to define a full width for any element Спробуй це
w3-circle Circled content Спробуй це
w3-hide Hidden content (display:none) Спробуй це
w3-show Show content (display:block) Спробуй це
w3-show-block Alias of w3-show (display:block) Спробуй це
w3-show-inline-block Show content as inline-block (display:inline-block) Спробуй це
w3-top Fixed content at the top of a page Спробуй це
w3-bottom Fixed content at the bottom of a page Спробуй це
w3-display-container Container for w3-display-classes (position: relative) Спробуй це
w3-display-topleft Displays content in the top left corner of the w3-display-container Спробуй це
w3-display-topright Displays content in the top right corner of the w3-display-container Спробуй це
w3-display-bottomleft Displays content in the bottom left corner of the w3-display-container Спробуй це
w3-display-bottomright Displays content in the bottom right corner of the w3-display-container Спробуй це
w3-display-left Displays content to the left (middle left) of the w3-display-container Спробуй це
w3-display-right Displays content to the right (middle right) of the w3-display-container Спробуй це
w3-display-middle Displays content in the middle (center) of the w3-display-container Спробуй це
w3-display-topmiddle Displays content at the top middle of the w3-display-container Спробуй це
w3-display-bottommiddle Displays content at the bottom middle of the w3-display-container Спробуй це
w3-display-position Displays content at a specified position in the w3-display-container Спробуй це
w3-display-hover Displays content on hover inside the w3-display-container Спробуй це

Класи ефектів

Клас Визначає
w3-opacity Adds opacity/transparency to an element (opacity: 0.6) Спробуй це
  Add opacity/transparency to text Спробуй це
w3-opacity-off Turns off opacity/transparency (opacity: 1) Спробуй це
w3-opacity-min Adds opacity/transparency to an element (opacity: 0.75) Спробуй це
w3-opacity-max Adds opacity/transparency to an element (opacity: 0.25) Спробуй це
w3-grayscale-min Adds a grayscale effect to an element (grayscale: 50%) Спробуй це
w3-grayscale Adds a grayscale effect to an element (grayscale: 75%) Спробуй це
w3-grayscale-max Adds a grayscale effect to an element (grayscale: 100%) Спробуй це
w3-sepia-min Adds a sepia effect to an element (sepia: 50%) Спробуй це
w3-sepia Adds a sepia effect to an element (sepia: 75%) Спробуй це
w3-sepia-max Adds a sepia effect to an element (sepia: 100%) Спробуй це
w3-overlay Creates an overlay effect Спробуй це

Background Color Класи

Клас Визначає
w3-red Background color red Спробуй це
w3-pink Background color pink Спробуй це
w3-purple Background color purple Спробуй це
w3-deep-purple Background color deep purple Спробуй це
w3-indigo Background color indigo Спробуй це
w3-blue Background color blue Спробуй це
w3-light-blue Background color light blue Спробуй це
w3-cyan Background color cyan Спробуй це
w3-aqua Background color aqua Спробуй це
w3-teal Background color teal Спробуй це
w3-green Background color green Спробуй це
w3-light-green Background color light green Спробуй це
w3-lime Background color lime Спробуй це
w3-sand Background color sand Спробуй це
w3-khaki Background color khaki Спробуй це
w3-yellow Background color yellow Спробуй це
w3-amber Background color amber Спробуй це
w3-orange Background color orange Спробуй це
w3-deep-orange Background color deep orange Спробуй це
w3-blue-grey Background color blue grey Спробуй це
w3-brown Background color brown Спробуй це
w3-light-grey Background color light grey Спробуй це
w3-grey Background color grey Спробуй це
w3-dark-grey Background color dark grey Спробуй це
w3-black Background color black Спробуй це
w3-pale-red Background color pale red Спробуй це
w3-pale-yellow Background color pale yellow Спробуй це
w3-pale-green Background color pale green Спробуй це
w3-pale-blue Background color pale blue Спробуй це
w3-transparent Transparent background-color  

Hover Color Класи

Наведені вище кольори також можна використовувати як класи наведення:

Клас Визначає
w3-hover-white Hover color white Спробуй це
w3-hover-black Hover color black Спробуй це
w3-hover-red Hover color red Спробуй це
w3-hover-blue Hover color blue Спробуй це
w3-hover-green Hover color green Спробуй це
w3-hover-aqua Hover color aqua Спробуй це
w3-hover-orange Hover color orange Спробуй це
w3-hover-grey Hover color grey Спробуй це
w3-hover-pale-green Hover color pale green Спробуй це

Text Color Класи

Клас Визначає
w3-text-red Text color red Спробуй це
w3-text-green Text color green Спробуй це
w3-text-blue Text color blue Спробуй це
w3-text-yellow Text color yellow Спробуй це
w3-text-light-grey 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 Спробуй це

Hover Text Класи

Наведені вище текстові класи також можна використовувати як класи наведення:

Клас Визначає
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 Спробуй це

Інші Hover Класи

Клас Визначає
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 Спробуй це

Класи округлення

Клас Визначає
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 Спробуй це

Padding Класи

Клас Визначає
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 Спробуй це

Margin Класи

Клас Визначає
w3-margin Adds a 16px margin to an element Спробуй це
w3-margin-top Adds a 16px top margin to an element Спробуй це
w3-margin-right Adds a 16px right margin to an element Спробуй це
w3-margin-bottom Adds a 16px bottom margin to an element Спробуй це
w3-margin-left Adds a 16px left margin to an element Спробуй це
w3-section Adds a 16px top and bottom margin to an element Спробуй це

Border Класи

Клас Визначає
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 Спробуй це