ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP КАК СДЕЛАТЬ W3.CSS JQUERY XML JAVA БОЛЬШЕ 🔍 ◑ КНИГИ СПРАВОЧНИКИ УПРАЖНЕНИЯ
W3CSS. Уроки для начинающих

W3.CSS Справочник

❮ Prev Next ❯

W3.CSS Классы

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

Класс Определяет
w3-container HTML container with 16px left and right padding Попробуй это
  Used as header Попробуй это
  Used as footer Попробуй это
w3-panel HTML container with 16px left and right padding and 16px top and bottom margin Попробуй это
  Used to display a note Попробуй это
  Used to display a quote Попробуй это
w3-badge Circular badge Попробуй это
w3-tag Rectangular tag Попробуй это
w3-ul Unordered list Попробуй это
w3-display-container Container for w3-display-classes (enables positioning of elements inside the container) Попробуй это
w3-block Class that can be used to define a full width for any element Попробуй это
w3-code Code container Попробуй это
w3-codespan Inline code container (for code snippets) Попробуй это
w3-content Container for fixed size centered content Попробуй это
w3-auto Container for responsive size centered content Попробуй это
w3-stretch Class that removes right and left margins (especially useful for stretching padded rows (w3-row-padding)) Попробуй это

Классы таблицы

Класс Определяет
w3-table Container for an HTML table Попробуй это
w3-striped Striped table Попробуй это
w3-border Bordered table Попробуй это
w3-bordered Bordered lines Попробуй это
w3-centered Centered table Попробуй это
w3-hoverable Hoverable table Попробуй это
w3-table-all All properties set Попробуй это
  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 Class 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 Side bar Попробуй это
  A side bar can contain all types of content Попробуй это
  A side bar overlaying main content Попробуй это
  A side bar overlaying all main content Попробуй это
  A side bar shifting main content to the right Попробуй это
  A side bar 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) Попробуй это

Классы кнопок

Класс Определяет
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 Can be used to group elements (like buttons) in an horizontal bar Попробуй это
w3-block Class 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 Попробуй это

Классы анимации

Класс Определяет
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 Class 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 at the top left corner of the w3-display-container Попробуй это
w3-display-topright Displays content at the top right corner of the w3-display-container Попробуй это
w3-display-bottomleft Displays content at the bottom left corner of the w3-display-container Попробуй это
w3-display-bottomright Displays content at 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 Попробуй это

Классы Цвета фона

Класс Определяет
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  

Классы Цвета при наведении

The colors above can also be used as hover classes:

Класс Определяет
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 Попробуй это

Классы Цвета текста

Класс Определяет
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 Попробуй это

Классы Текста при наведении

Приведенные выше текстовые классы также могут использоваться как классы при наведении курсора:

Класс Определяет
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 Попробуй это

Другие классы при наведении

Класс Определяет
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-48 Padding 32px on top Попробуй это
w3-padding-top-32 Padding 24px on top Попробуй это

Классы Margin

Класс Определяет
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 Попробуй это

Классы 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 Попробуй это
❮ Prev Next ❯