W3.CSS - Szybki przewodnik

Czym jest W3.CSS?

W3.CSS to kaskadowy arkusz stylów (CSS) opracowany przez w3schools.com . Pomaga w tworzeniu szybszych, ładniejszych i responsywnych stron internetowych. Jest inspirowany Google Material Design.

Niektóre z jego najważniejszych cech są następujące:

Wbudowane responsywne projektowanie
Standardowy CSS
Zainspirowany Google Material Design
Bezpłatne w użyciu

Elastyczny projekt

W3.CSS ma wbudowane responsywne projektowanie, dzięki czemu strona stworzona za pomocą W3.CSS będzie przeprojektowywać się zgodnie z rozmiarem urządzenia.
W3.CSS ma 12-kolumnową siatkę elastyczną, która obsługuje responsywne klasy dla małych, dużych i średnich rozmiarów ekranów.
Klasy W3.CSS są stworzone w taki sposób, aby serwis zmieścił się na dowolnym rozmiarze ekranu.
Strony internetowe tworzone przy użyciu W3.CSS są w pełni kompatybilne z komputerami PC, tabletami i urządzeniami mobilnymi.

Standardowy CSS

W3.CSS używa tylko standardowego CSS i jest bardzo łatwy do nauczenia.
Nie ma zależności od żadnej zewnętrznej biblioteki JavaScript, takiej jak jQuery.

Wygląd materiału

W3.CSS jest inspirowany przez Google Material Design.
Obsługuje projekt podobny do papieru.
Obsługuje cienie i odważne kolory.
Kolory i odcienie pozostają jednolite na różnych platformach i urządzeniach.

A co najważniejsze, jest całkowicie darmowy.

Jak korzystać z W3.CSS?

Istnieją dwa sposoby korzystania z W3.CSS -

Local Installation - Możesz pobrać plik W3.CSS na komputer lokalny i dołączyć go do kodu HTML.
CDN Based Version - Możesz dołączyć plik W3.CSS do kodu HTML bezpośrednio z sieci dostarczania treści (CDN).

Instalacja lokalna

Iść do https://www.w3schools.com/w3css/w3css_downloads.asp aby pobrać najnowszą dostępną wersję.
Następnie umieść pobrany plik w3.css w katalogu swojej witryny, np. / Css.

Przykład

Teraz możesz dołączyć plik css do pliku HTML w następujący sposób -

<html>
   <head>
      <title>The W3.CSS Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "css/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-teal">
         <h1>Hello World!</h1>
      </header>
   </body>
</html>

To da następujący wynik -

Wersja oparta na CDN

Możesz dołączyć plik W3.CSS do kodu HTML bezpośrednio z Content Delivery Network (CDN). W3Schools.com dostarcza treści do najnowszej wersji.

Note - Używamy wersji biblioteki W3Schools.com CDN w całym tym samouczku.

Przykład

Teraz przepiszmy powyższy przykład, używając biblioteki jQuery z CDN W3Schools.com.

<html>
   <head>
      <title>The W3.CSS Example</title>
      <meta name = "viewport" content = "width =  device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-teal">
         <h1>Hello World!</h1>
      </header>
   </body>
</html>

To da następujący wynik -

HTML5 ma następujące elementy kontenera -

<div> - Zapewnia ogólny kontener na zawartość HTML.
<header> - Reprezentuje sekcję nagłówka.
<footer> - Reprezentuje sekcję stopki.
<article> - Reprezentuje artykuły.
<section> - Zapewnia ogólny kontener dla różnych typów przekrojów.

W3.CSS zapewnia w3-containerjako klasa podstawowa do stylizacji wszystkich wyżej wymienionych kontenerów. W3.CSS ma również inne klasy, takie jakw3-border, w3-red, w3-teal, w3-padding-32 aby dodać dalsze atrybuty stylizacji do kontenerów.

Przykład

Poniższy przykład ilustruje użycie klasy w3-container do stylizacji różnych kontenerów.

w3css_containers.htm

<html>
   <head>
      <title>The W3.CSS Containers</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-red">
         <h1>HTML5 Tutorial</h1>
      </header>
      
      <div class = "w3-container w3-border w3-teal">
         <p>HTML5 is the latest and most enhanced version of HTML. Technically, HTML is not a programming language, but rather a mark up language.</p>
      </div>
      
      <article class = "w3-container">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality. The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </article>
      
      <section class = "w3-container">
         <p>HTML5 is designed, as much as possible, to be backward compatible with existing web browsers. New features build on existing features and allow you to provide fallback content for older browsers.</p>
      </section>
      
      <footer class = "w3-container w3-red">
         <p>Copyright @TutorialsPoint.COM</p>
      </footer>
   </body>
</html>

Wynik

Sprawdź wynik.

W3.CSS zapewnia również kontenery z możliwością ukrycia / zamknięcia. Zobacz następujący przykład -

w3css_hide_container.htm

<html>
   <head>
      <title>The W3.CSS Containers</title>
      <meta name = "viewport" content="width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body>
      <div class = "w3-container w3-border w3-teal">
         <span class = "w3-closebtn" onclick = "this.parentElement.style.display = 'none'">X</span>
         <p>Close container by clicking on the X in the upper right corner.</p>
      </div>
   </body>
</html>

Wynik

Sprawdź wynik.

W3.CSS zapewnia doskonałą obsługę podświetlania składni w następujących językach -

HTML - Użyj klas w3-code htmlHigh na kontenerze zawierającym kod HTML.
CSS - Użyj klas w3-code cssHigh na kontenerze z kodem CSS.
JS - Użyj klas w3-code jsHigh na kontenerze zawierającym kod CSS.

Musisz dołączyć następujący skrypt, aby mieć link do pliku js, aby mieć obsługę podświetlania składni -

<script src = "https://www.w3schools.com/lib/w3codecolors.js"></script>

w3css_color_coding.htm

<html>
   <head>
      <title>The W3.CSS Syntax Highlighter</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-teal">
         <h2>HTML Syntax Highlighted</h2>
      </header>
      <div class = "w3-code htmlHigh">
         <html>
            <head>
               <title>The W3.CSS Example</title>
               <meta name="viewport" content="width=device-width, initial-scale=1">
               <link rel="stylesheet" href="css/w3.css">
            </head>
            
            <body>
               <header class="w3-container w3-teal">
                  <h1>Hello World!</h1>
               </header>
            </body>
         </html>
      </div>
      
      <header class="w3-container w3-teal">
         <h2>CSS Syntax Highlighted</h2>
      </header>
      
      <div class = "w3-code cssHigh">
         .bold {
            font-weight:bold;
         }
         #boldLabel {
            font-weight:bold;
         }
         table, th, td {
            font-family:sans;
         }
      </div>
      
      <header class = "w3-container w3-teal">
         <h2>JS Syntax Highlighted</h2>
      </header>
      
      <div class = "w3-code cssHigh">
         <script type="text/javascript">
            function(message){
            }
            var message = "Hello, World!";
            alert(message);
         </script>
      </div>
      <script src="https://www.w3schools.com/lib/w3codecolors.js"></script>
   </body>
</html>

Wynik

Sprawdź wynik.

W3.CSS ma kilka specjalnych klas do wyświetlania kontenerów jako kartek przypominających papier z cieniem.

Sr. No.	Nazwa i opis klasy
1	w3-card Stylizuje kontener dla dowolnej zawartości HTML z obramowaniem
2	w3-card-2 Stylizuje kontener dla dowolnej treści HTML z 2 pikselami obramowanym cieniem
3	w3-card-4 Stylizuje kontener dla dowolnej zawartości HTML z 4-pikselowym obramowaniem w tle
4	w3-card-8 Stylizuje kontener dla dowolnej treści HTML z 8-pikselowym obramowaniem w tle
5	w3-card-12 Stylizuje kontener na dowolną zawartość HTML z 12-pikselowym obramowaniem w cieniu

Przykład

w3css_cards.htm

<html>
   <head>
      <title>The W3.CSS Syntax Highlighter</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
      <style>
         div {
            width : 200px;	
            height : 200px;	
         } 
      </style>
   </head>
   
   <body>   
      <header class = "w3-container w3-teal">   
         <h2>Yellow Card Demo</h2>   
      </header>
      <br/>
      
      <div class = "w3-card w3-yellow">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      <div class = "w3-card-2 w3-yellow">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      <div class = "w3-card-4 w3-yellow">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      <div class = "w3-card-8 w3-yellow">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      <br/>
      
      <header class = "w3-container w3-teal">   
         <h2>White Card Demo</h2>   
      </header>
      <br/>
      
      <div class = "w3-card w3-white">
         <p><b>TODO:</b> Learn W3.CSS</p>
      </div>
      <div class = "w3-card-8 w3-white">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      <br/>
      
      <div class = "w3-card-4" style = "width:550px;">
         <header class = "w3-container w3-blue">
            <h1>HTML5 Tutorial</h1>
         </header>
         
         <div class = "w3-container" style = "width:550px;">
            <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality. The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
         </div>
      </div>
      <br/>
      
      <header class  =  "w3-container w3-teal">   
         <h2>Image Card Demo</h2>   
      </header>
      <br/>
      
      <div class = "w3-card-12" style = "width:255px; height: 230px;">
         <img src = "/html5/images/html5-mini-logo.jpg" alt = "html5">
         <div class = "w3-container">
            <p>Learn HTML5</p>
         </div>
      </div>
   </body>
</html>

Wynik

Sprawdź wynik.

W3.CSS ma kilka specjalnych klas do tworzenia responsywnego projektu.

Sr. No.	Nazwa i opis klasy
1	w3-half Ustawia pojemnik zajmują 1/2 ^nd okna o średnich i dużych urządzeń z ekranem. Jeśli ekran jest mniejszy niż 601 pikseli, zmienia rozmiar kontenera na 100%.
2	w3-third Ustawia pojemnik do zajmowania 1/3 ^rd okna o średnich lub dużych urządzeń z ekranem. Jeśli ekran jest mniejszy niż 601 pikseli, zmienia rozmiar kontenera na 100%.
3	w3-quarter Ustawia pojemnik do zajmowania 1/4 ^th okna o średnich lub dużych urządzeń z ekranem. Jeśli ekran jest mniejszy niż 601 pikseli, zmienia rozmiar kontenera na 100%.
4	w3-col Określa słup w siatce 12 słupów.
5	w3-row Określa kontener bez wypełnienia, który ma być używany dla klas responsywnych. Ta klasa jest obowiązkowa, aby klasy responsywne były w pełni responsywne.

Przykład

w3css_responsive_design.htm

<html>
   <head>
      <title>The W3.CSS Containers</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-teal">
         <h2>Mobile First Design Demo</h2>
         <p class = "w3-large">Resize the window to see the effect!</p>
      </header>
      <br/>
      
      <div class = "w3-row w3-border">
         <div class = "w3-container w3-half w3-red">
            <h2>w3-half</h2>
            <p>Sets the container to occupy 1/2<sup>nd</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
         </div>
         
         <div class = "w3-container w3-half">
            <h2>w3-half</h2>
         </div>
      </div>
      <br/>
      
      <div class = "w3-row w3-border">
         <div class = "w3-container w3-third w3-red">
            <h2>w3-third</h2>
            <p>Sets the container to occupy 1/3<sup>rd</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
         </div>
         
         <div class = "w3-container w3-third">
            <h2>w3-third</h2>
         </div>
      </div>
      <br/>
      
      <div class = "w3-row w3-border">
         <div class = "w3-container w3-quarter w3-red">
            <h2>w3-quarter</h2>
            <p>Sets the container to occupy 1/4<sup>th</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
         </div>

         <div class = "w3-container w3-quarter">
            <h2>w3-quarter</h2>
         </div>
      </div>
   </body>
</html>

Wynik

Sprawdź wynik.

W3.CSS zapewnia 12-kolumnową siatkę reagującą na płyn.

Używa klas w3-row i w3-col do definiowania odpowiednio wierszy i kolumn.

Sr. No.	Nazwa i opis klasy
1	w3-row Określa kontener bez wypełnienia, który ma być używany w responsywnych kolumnach. Ta klasa jest obowiązkowa, aby klasy responsywne były w pełni responsywne.
2	w3-col Określa kolumnę z podklasami

w3-col ma kilka podklas przeznaczonych dla różnych typów ekranów.

Kolumny dla małych urządzeń ekranowych

Oto lista stylów na poziomie kolumn dla urządzeń z małym ekranem, zwykle smartfonów.

Sr. No.	Nazwa i opis klasy
1	s1 Definiuje 1 z 12 kolumn o szerokości 08,33%.
2	s2 Definiuje 2 z 12 kolumn o szerokości 16,66%.
3	s3 Definiuje 3 z 12 kolumn o szerokości 25,00%.
4	s4 Definiuje 4 z 12 kolumn o szerokości 33,33%.
5	s12 Definiuje 12 z 12 kolumn o szerokości 100%. Domyślna klasa dla telefonów z małymi ekranami.

Kolumny dla urządzeń ze średnim ekranem

Oto lista stylów na poziomie kolumn dla urządzeń ze średnim ekranem, zazwyczaj tabletów.

Sr. No.	Nazwa i opis klasy
1	m1 Definiuje 1 z 12 kolumn o szerokości 08,33%.
2	m2 Definiuje 2 z 12 kolumn o szerokości 16,66%.
3	m3 Definiuje 3 z 12 kolumn o szerokości 25,00%.
4	m4 Definiuje 4 z 12 kolumn o szerokości 33,33%.
5	m12 Definiuje 12 z 12 kolumn o szerokości 100%. Domyślna klasa dla telefonów ze średnim ekranem.

Kolumny do urządzeń z dużym ekranem

Oto lista stylów na poziomie kolumn dla urządzeń z dużym ekranem, zazwyczaj laptopów.

Sr. No.	Nazwa i opis klasy
1	\|1 Definiuje 1 z 12 kolumn o szerokości 08,33%.
2	\|2 Definiuje 2 z 12 kolumn o szerokości 16,66%.
3	\|3 Definiuje 3 z 12 kolumn o szerokości 25,00%.
4	\|4 Definiuje 4 z 12 kolumn o szerokości 33,33%.
5	\|12 Definiuje 12 z 12 kolumn o szerokości 100%. Domyślna klasa dla urządzeń z dużym ekranem.

Stosowanie

Każda podklasa określa liczbę kolumn siatki, która ma być używana, na podstawie typu urządzenia. Rozważ następujący fragment kodu HTML.

<div class = "w3-row">
   <div class = "w3-col s2 m4 l3">
      <p>This text will use 2 columns on a small screen, 4 on a medium screen, and 3 on a large screen.</p>
   </div>
</div>

Domyślnie używane kolumny to 12 na urządzeniu, jeśli podklasa nie jest wymieniona w atrybucie class elementu HTML.

Przykład

w3css_grids.htm

<html>
   <head>
      <title>The W3.CSS Grids</title>
      <meta name = "viewport" content="width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>

   <body>
      <header class = "w3-container w3-teal">
         <h2>Mobile First Design Demo</h2>
         <p class = "w3-large">Resize the window to see the effect!</p>
      </header>
      <div class = "w3-row">
         <div class = "w3-col m1 w3-center w3-grey">1</div>
         <div class = "w3-col m1 w3-center">2</div>
         <div class = "w3-col m1 w3-center w3-grey">3</div>
         <div class = "w3-col m1 w3-center">4</div>
      
         <div class = "w3-col m1 w3-center w3-grey">5</div>
         <div class = "w3-col m1 w3-center">6</div>
         <div class = "w3-col m1 w3-center w3-grey">7</div>
         <div class = "w3-col m1 w3-center">8</div>
      
         <div class = "w3-col m1 w3-center w3-grey">9</div>
         <div class = "w3-col m1 w3-center">10</div>
         <div class = "w3-col m1 w3-center w3-grey">11</div>
         <div class = "w3-col m1 w3-center">12</div>
      </div>
      
      <div class = "w3-row">
         <div class = "w3-col w3-container m4 l3 w3-yellow">
            <p>This text will use 12 columns on a small screen, 4 on a medium screen (m4), and 3 on a large screen (l3).</p>
         </div>
      
         <div class = "w3-col w3-container s4 m8 l9">
            <p>This text will use 4 columns on a small screen (s4), 8 on a medium screen (m8), and 9 on a large screen (l9).</p>
         </div>
      </div>
   </body>
</html>

Wynik

Sprawdź wynik.

W3.CSS ma bardzo piękny i responsywny CSS do projektowania formularzy. Używane są następujące CSS -

Sr. No.	Nazwa i opis klasy
1	w3-group Reprezentuje obramowany kontener. Może służyć do grupowania etykiety i wejścia.
2	w3-input Upiększa kontrolkę wejściową.
3	w3-label Upiększa etykietę.
4	w3-checkbox w3-checkmark Upiększ pole wyboru / przycisk opcji.

Przykład

w3css_forms.htm

<html>
   <head>
      <title>The W3.CSS Forms</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body>
      <form class = "w3-container w3-card-8">
         <div class = "w3-group">
            <input class = "w3-input" type = "text" style = "width:90%" required>
            <label class = "w3-label">User Name</label>
         </div>
         
         <div class = "w3-group">
            <input class = "w3-input" type = "text" style = "width:90%" required>
            <label class = "w3-label">Email</label>
         </div>
         
         <div class = "w3-group">
            <textarea class = "w3-input" style = "width:90%" required></textarea>
            <label class = "w3-label">Comments</label>
         </div>
         <div class = "w3-row">
            <div class = "w3-half">
               <label class = "w3-checkbox">
                  <input type = "checkbox" checked = "checked">
                  <div class = "w3-checkmark"></div> Married
               </label>
               <br>
               <label class = "w3-checkbox">
                  <input type = "checkbox">
                  <div class = "w3-checkmark"></div> Single
               </label>
               <br>
               <label class = "w3-checkbox">
                  <input type = "checkbox" disabled>
                  <div class = "w3-checkmark"></div> Don't know (Disabled)
               </label>
               <br>
               <br>
            </div>
            
            <div class = "w3-half">
               <label class = "w3-checkbox">
                  <input type = "radio" name = "gender" value = "male" checked>
                  <div class = "w3-checkmark"></div> Male
               </label>
               <br>
               <label class = "w3-checkbox">
                  <input type = "radio" name = "gender" value = "female">
                  <div class = "w3-checkmark"></div> Female
               </label>
               <br>
               <label class = "w3-checkbox">
                  <input type = "radio" name = "gender" value = "female" disabled>
                  <div class = "w3-checkmark"></div> Don't know (Disabled)
               </label>
            </div>
         </div>
      </form>
   </body>
</html>

Wynik

Sprawdź wynik.

W3.CSS ma bardzo piękny i responsywny CSS do dostosowywania wyglądu przycisku. Używane są następujące CSS -

Sr. No.	Nazwa i opis klasy
1	w3-btn Reprezentuje standardowy przycisk. Może być również używany do stylizowania linku jako przycisku.
2	w3-btn-floating Reprezentuje pływający przycisk, który ma okrągły kształt.
3	w3-btn-floating-large Reprezentuje duży pływający przycisk.

Przykład

w3css_buttons.htm

<html>
   <head>
      <title>The W3.CSS Forms</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>Standard Buttons</h2>
      <button class = "w3-btn">Click Me</button>
      <button class = "w3-btn w3-teal">Click Me</button>
      <button class = "w3-btn w3-disabled">I am disabled</button>
      
      <h2>Links as Buttons</h2>
      <a class = "w3-btn">Link</a>
      <a class = "w3-btn w3-teal">Link</a>
      <a class = "w3-btn w3-disabled">Disabled Link</a>
      
      <h2>Floating Buttons</h2>
      <a class = "w3-btn-floating">+</a>
      <a class = "w3-btn-floating w3-teal">+</a>
      <a class = "w3-btn-floating w3-disabled">+</a>
      
      <h2>Large Floating Buttons</h2>
      <a class = "w3-btn-floating-large">+</a>
      <a class = "w3-btn-floating-large w3-teal">+</a>
      <a class = "w3-btn-floating-large w3-disabled">+</a>
   </body>
</html>

Wynik

Sprawdź wynik.

W3.CSS obsługuje inny rodzaj podpowiedzi przy użyciu klasy w3-tooltip. Spójrz na poniższy przykład. Tutaj umieściliśmy tekst podpowiedzi w elemencie div i obraz i zastosowaliśmy podpowiedź w3- w nadrzędnym elemencie div.

<div class = "w3-tooltip">
   <div class = "w3-text w3-container w3-teal" style = "width:255px;">
      <p>Learn HTML5 in simply easy way @TutorialsPoint.com</p>
   </div>
   <div>
      <img src = "html5-mini-logo.jpg" alt = "html5">
   </div>
</div>

Przykład

w3css_tooltips.htm

<html>
   <head>
      <title>The W3.CSS Tooltips</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>Hover Demo</h2>
      <div class = "w3-tooltip">
         <div class = "w3-text w3-container w3-teal" style = "width:255px;">
            <p>Learn HTML5 in simply easy way @TutorialsPoint.com</p>
         </div>
         
         <div>
            <img src = "html5-mini-logo.jpg" alt = "html5">
         </div>
      </div>
   </body>
</html>

Wynik

Sprawdź wynik.

W3.CSS może być używany do wyświetlania dostosowywalnego modalnego okna dialogowego zamiast standardowego alertu JavaScript.

Używa klas w3-row i w3-col do definiowania odpowiednio wierszy i kolumn.

Sr. No.	Nazwa i opis klasy
1	modal-dialog Reprezentuje główne okno nadrzędne do definiowania okna dialogowego.
2	w3-modal-dialog Reprezentuje kontener zawartości okna dialogowego.
3	w3-modal-content Reprezentuje zawartość okna dialogowego.

Przykład

w3css_modal_dialog.htm

<html>
   <head>
      <title>The W3.CSS Modal dialog</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>Modal dialog Demo</h2>
      <a class = "w3-btn w3-teal" href = "#model-dialog">Open a Modal dialog</a>
      <div id = "model-dialog" class = "w3-modal">
         <div class = "w3-modal-dialog">
            <div class = "w3-modal-content w3-card-8">
               <header class = "w3-container w3-teal">
                  <a href = "#" class = "w3-closebtn">×</a>
                  <h2>TutorialsPoint</h2>
               </header>
               <div class = "w3-container">
                  <p>Hello World!</p>
               </div>
               <footer class = "w3-container w3-teal">
                  <p>@TutorialsPoint.COM</p>
               </footer>
            </div>
         </div>
      </div>
   </body>
</html>

Wynik

Sprawdź wynik.

W3.CSS może być używany do wyświetlania różnych typów tabel przy użyciu różnych stylów na w3-table.

Sr. No.	Nazwa i opis klasy
1	w3-table Reprezentuje podstawową tabelę bez obramowania.
2	w3-striped Wyświetla rozłożoną tabelę.
3	w3-bordered Rysuje tabelę z obramowaniem między wierszami.
4	w3-border Rysuje tabelę z obramowaniami.
5	w3-card Rysuje stół jako kartę.
6	w3-responsive Rysuje responsywną tabelę, aby pokazać poziomy pasek przewijania, jeśli ekran jest zbyt mały, aby wyświetlić zawartość.
7	w3-tiny Rysuje tabelę bardzo małą czcionką.
8	w3-small Rysuje tabelę małą czcionką.
9	w3-large Rysuje tabelę dużą czcionką.
10	w3-xlarge Rysuje tabelę z bardzo dużą czcionką.
11	w3-xxlarge Rysuje tabelę z bardzo dużą czcionką.
12	w3-xxxlarge Rysuje tabelę bardzo dużą, bardzo dużą czcionką.
13	w3-jumbo Rysuje tabelę dużą czcionką typu jumbo.

Przykład

w3css_tables.htm

<html>
   <head>
      <title>The W3.CSS Tables</title>
      <meta name = "viewport" content = "width=device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>Tables Demo</h2>
      <hr/>
      <h3>Simple Table</h3>
      <table class = "w3-table">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
      
      <h3>Stripped Table with borders</h3>
      <table class = "w3-table w3-striped w3-bordered w3-border">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
      <hr/>
      
      <h3>Table as Card</h3>
      <table class = "w3-table w3-card-4">
         <thead>
            <tr>
            <th>Student</th>
            <th>Class</th>
            <th>Grade</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
      
      <h3>Responsive table</h3>
      <div class = "w3-responsive">
         <table class = "w3-table w3-card-4">
            <thead>
               <tr>
                  <th>Student</th>
                  <th>Class</th>
                  <th>Data #1</th>
                  <th>Data #2</th>
                  <th>Data #3</th>
                  <th>Data #4</th>
                  <th>Data #5</th>
                  <th>Data #6</th>
                  <th>Data #7</th>
                  <th>Data #8</th>
                  <th>Data #9</th>
                  <th>Data #10</th>
               </tr>
            </thead>
            
            <tbody>
               <tr>
                  <td>Mahesh Parashar</td>
                  <td>VI</td>
                  <td>10</td>
                  <td>11</td>
                  <td>12</td>
                  <td>13</td>
                  <td>14</td>
                  <td>15</td>
                  <td>16</td>
                  <td>17</td>
                  <td>19</td>
                  <td>20</td>
               </tr>
               <tr>
                  <td>Rahul Sharma</td>
                  <td>VI</td>
                  <td>10</td>
                  <td>11</td>
                  <td>12</td>
                  <td>13</td>
                  <td>14</td>
                  <td>15</td>
                  <td>16</td>
                  <td>17</td>
                  <td>19</td>
                  <td>20</td>
               </tr>
               <tr>
                  <td>Mohan Sood</td>
                  <td>VI</td>
                  <td>10</td>
                  <td>11</td>
                  <td>12</td>
                  <td>13</td>
                  <td>14</td>
                  <td>15</td>
                  <td>16</td>
                  <td>17</td>
                  <td>19</td>
                  <td>20</td>
               </tr>
            </tbody>
         </table>
      </div>
      
      <h3>Table with very small font</h3>
      <table class = "w3-table w3-tiny">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
               </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
   </body>
</html>

Wynik

Sprawdź wynik.

W3.CSS może być używany do wyświetlania różnych typów list przy użyciu różnych stylów przez w3-ul.

Sr. No.	Nazwa i opis klasy
1	w3-ul Reprezentuje podstawową listę bez żadnych obramowań.
2	w3-striped Wyświetla okrojoną listę.
3	w3-bordered Rysuje listę z obramowaniem w wierszach.
4	w3-border Rysuje listę z obramowaniem.
5	w3-card Rysuje listę jako kartę.
6	w3-tiny Rysuje listę z bardzo małą czcionką.
7	w3-small Rysuje listę małą czcionką.
8	w3-large Rysuje listę z dużą czcionką.
9	w3-xlarge Rysuje listę z bardzo dużą czcionką.
10	w3-xxlarge Rysuje listę z bardzo dużą czcionką.
11	w3-xxxlarge Rysuje listę z bardzo dużą, bardzo dużą czcionką.
12	w3-jumbo Rysuje listę za pomocą dużej czcionki Jumbo.

Przykład

w3css_lists.htm

<html>
   <head>
      <title>The W3.CSS Lists</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>List Demo</h2>
      <hr/>
      <h3>Simple List</h3>
      <ul class = "w3-ul">
         <li>Mahesh Parashar</li>
         <li>Rahul Sharma</li>
         <li>Mohan Sood</li>
      </ul>
      
      <h3>Stripped List with borders</h3>
      <ul class = "w3-ul w3-striped w3-bordered w3-border">
         <li>Mahesh Parashar</li>
         <li>Rahul Sharma</li>
         <li>Mohan Sood</li>
      </ul>
      
      <h3>List as Card</h3>
      <ul class = "w3-ul w3-card-4">
         <li>Mahesh Parashar</li>
         <li>Rahul Sharma</li>
         <li>Mohan Sood</li>
      </ul>
      
      <h3>List with very small font</h3>
      <ul class = "w3-ul w3-tiny">
         <li>Mahesh Parashar</li>
         <li>Rahul Sharma</li>
         <li>Mohan Sood</li>
      </ul>
   </body>
</html>

Wynik

Sprawdź wynik.

W3.CSS zapewnia opcje wyświetlania obrazów w piękny i interesujący sposób, używając w3-image jako głównej klasy.

Sr. No.	Nazwa i opis klasy
1	w3-image Reprezentuje podstawowy stylizowany obraz bez obramowania.
2	w3-circle Wyświetla obraz w okręgu
3	w3-title Służy do umieszczania tekstu na obrazie.
4	w3-card Rysuje obraz jako kartę.

Przykład

w3css_images.htm

<html>
   <head>
      <title>The W3.CSS Images</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel="stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>Images Demo</h2>
      <hr/>
      <h3>Simple Image</h3>
      <div class = "w3-image">
         <img src = "html5-mini-logo.jpg" alt = "html5">
      </div>
      
      <h3>Circled Image</h3>
      <div class = "w3-image">
         <img src = "html5-mini-logo.jpg" alt = "html5" class = "w3-circle">
      </div>
      
      <h3>Text over image</h3>
      <div class = "w3-image"><img src = "html5-mini-logo.jpg" alt = "html5">
         <div class = "w3-title w3-text-black">Learn HTML5</div>
      </div>
      
      <h3>Image as a card</h3>
      <div class = "w3-image">
         <img src = "html5-mini-logo.jpg" alt = "html5" class = "w3-card-4">
      </div>
   </body>
</html>

Wynik

Sprawdź wynik.

W3.CSS obsługuje następujące popularne biblioteki ikon -

Niesamowite ikony czcionek
Ikony materiałów Google
Ikony Bootstrap

Stosowanie

Aby użyć ikony, umieść nazwę ikony w klasie elementu HTML <i>. Aby kontrolować rozmiar ikony, możesz użyć następujących klas -

Sr. No.	Nazwa i opis klasy
1	w3-tiny Rysuje ikonę o bardzo małym rozmiarze.
2	w3-small Rysuje ikonę o małym rozmiarze.
3	w3-large Rysuje ikonę o dużym rozmiarze.
4	w3-xlarge Rysuje ikonę o bardzo dużym rozmiarze.
5	w3-xxlarge Rysuje ikonę o bardzo dużym rozmiarze.
6	w3-xxxlarge Rysuje ikonę bardzo dużego, bardzo dużego rozmiaru.

Przykład

w3css_icons.htm

<html>
   <head>
      <title>The W3.CSS Icons</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1"> 
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
   </head>
   
   <body class = "w3-container">
      <h2>Icons Demo</h2>
      <hr/>
      <h3>Font Awesome Icon Demo</h3>
      <i class = "fa fa-cloud"></i>
      <i class = "fa fa-cloud w3-large"></i>
      <i class = "fa fa-cloud w3-xlarge"></i>
      <i class = "fa fa-cloud w3-xxlarge"></i>
      <i class = "fa fa-cloud w3-xxxlarge"></i>
      <i class = "fa fa-cloud w3-text-teal" style = "font-size:64px"></i>
      
      <h3>Google Material Design Icon Demo</h3>
      <i class = "material-icons w3-large">cloud</i>
      <i class = "material-icons">cloud</i>
      <i class = "material-icons w3-xlarge">cloud</i>
      <i class = "material-icons w3-xxlarge">cloud</i>
      <i class = "material-icons w3-xxxlarge">cloud</i>
      <i class = "material-icons w3-text-teal" style = "font-size:64px">cloud</i>
      
      <h3>Bootstrap Icon Demo</h3>
      <i class = "glyphicon glyphicon-cloud"></i>
      <i class = "gclass = "glyphicon glyphicon-cloud w3-large"></i>
      <i class = "glyphicon glyphicon-cloud w3-xlarge"></i>
      <i class = "glyphicon glyphicon-cloud w3-xxlarge"></i>
      <i class = "glyphicon glyphicon-cloud w3-xxxlarge"></i>
      <i class = "glyphicon glyphicon-cloud w3-text-teal" style = "font-size:64px"></i>
   </body>
</html>

Wynik

Sprawdź wynik.

W3.CSS obsługuje bogaty zestaw klas kolorów. Te klasy kolorów są inspirowane i rozwijane z uwzględnieniem kolorów używanych w marketingu, znakach drogowych i karteczkach samoprzylepnych.

w3-red
w3-pink
w3-purple
w3-deep-purple
w3-indigo
w3-blue
w3-light-blue
w3-cyan
w3-teal
w3-green
w3-light-green
w3-lime
w3-khaki
w3-yellow
w3-amber
w3-orange
w3-deep-orange
w3-blue-grey
w3-brown
w3-light-grey
w3-grey
w3-dark-grey
w3-black

Motywy kolorów

W3.CSS zapewnia doskonałe wsparcie dla stosowania motywu na stronie internetowej przy użyciu jej css motywu domeny publicznej. Niektóre przykłady podano poniżej -

Sr. No.	Nazwa i opis CSS
1	w3-theme-indigo.css CSS z wariantami kolorystycznymi Indigo
2	w3-theme-red.css CSS z czerwonymi wariantami kolorów

Aby korzystać z motywów, przejdź do https://www.w3schools.com/w3css/w3css_downloads.asp aby pobrać wymagany plik CSS.

Przykład

w3css_colors.htm

<html>
   <head>
      <title>The W3.CSS Color Themes</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
      <link rel = "stylesheet" href = "css/w3-theme-red.css">
   </head>
   
   <body class = "w3-container">
      <h2>Color Theme Demo</h2>
      <hr/>
      <div class = "w3-card-4">
         <div class = "w3-container w3-theme w3-card-2">
            <h1>Red Colored Theme</h1>
         </div>
         
         <div class = "w3-container w3-text-theme">
            <h2>w3-text-theme - Theme for Text</h2>
         </div>
         
         <ul class = "w3-ul w3-border-top">
            <li class = "w3-theme-l5" style = "position:relative">
            <a class = "w3-btn-floating-large w3-theme-action w3-right"
            style = "position:absolute;top:-28px;right:16px;">+</a>
            <p>Using w3-theme-l5 / w3-theme-light style</p>
            </li>
            <li class = "w3-theme-l4"><p>Using w3-theme-l4 style</p></li>
            <li class = "w3-theme-l3"><p>Using w3-theme-l3 style</p></li>
            <li class = "w3-theme-l2"><p>Using w3-theme-l2 style</p></li>
            <li class = "w3-theme-l1"><p>Using w3-theme-l1 style</p></li>
            <li class = "w3-theme"><p>Using w3-theme style</p></li>
            <li class = "w3-theme-d1"><p>Using w3-theme style</p></li>
            <li class = "w3-theme-d2"><p>Using w3-theme style</p></li>
            <li class = "w3-theme-d3"><p>Using w3-theme style</p></li>
            <li class = "w3-theme-d4"><p>Using w3-theme style</p></li>
         </ul>
      </div>
   </body>
</html>

Wynik

Sprawdź wynik.

W3.CSS ma kilka specjalnych klas do szybkiego wyświetlania paska nawigacji lub menu na stronie internetowej.

Sr. No.	Nazwa i opis klasy
1	w3-topnav Stylizuje listę jako poziome menu / pasek nawigacji.
2	w3-sidenav Stylizuje listę jako pionowe menu / pasek nawigacji.

Przykład

w3css_navigation.htm

<html>
   <head>
      <title>The W3.CSS Navigation</title>
      <meta name = "viewport" content = "width=device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
      <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body class = "w3-container">
      <h2>Navigation Demo</h2>
      <hr/>
      <h3>Horizontal top navigation bar</h3>
      <nav class = "w3-topnav w3-red">
         <a href="#">Home</a>
         <a href="#">Overview</a>
         <a href="#">Environment</a>
         <a href="#">Containers</a>
         <a href="#">Grids</a>
      </nav>
      
      <h3>Using font awesome icons</h3>
      <nav class = "w3-topnav w3-red">
         <a href="#"><i class="fa fa-home"></i></a>
         <a href="#">Overview</a>
         <a href="#">Environment</a>
         <a href="#">Containers</a>
         <a href="#">Grids</a>
      </nav>
      
      <h3>Using material icons</h3>
      <nav class = "w3-topnav w3-red">
         <a href="#"><i class="material-icons">home</i></a>
         <a href="#">Overview</a>
         <a href="#">Environment</a>
         <a href="#">Containers</a>
         <a href="#">Grids</a>
      </nav>
      
      <h3>Using Side Navigation</h3>
      <nav class = "w3-sidenav w3-red w3-card-2" style="width:25%">
         <a href="#">Home</a>
         <a href="#">Overview</a>
         <a href="#">Environment</a>
         <a href="#">Containers</a>
         <a href="#">Grids</a>
      </nav>
   </body>
</html>

Wynik

Sprawdź wynik.

W3.CSS posiada kilka klas użytkowych, które są bardzo przydatne w codziennych potrzebach projektowych.

Color utility classes - Przykłady: w3-czerwony, w3-żółty
Padding utility classes - Przykłady: w3-padding-jumbo, w3-padding-16
Margin utility classes - Przykłady: w3-margin-8, w3-margin-64
Border utility class - Przykłady: w3-border-left, w3-border-right
Size utility classes - Przykłady: w3-tiny, w3-small
Circle utility class - Przykład: w3-circle
Center utility class - Przykład: w3-center

Przykład

w3css_utilities.htm

<html>
   <head>
      <title>The W3.CSS Utilities</title>
      <meta name = "viewport" content = "width=device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>W3.CSS Utilities</h2>
      <hr/>
      <h3>Color Utilities Demo</h3>
      <div class = "w3-container w3-red">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
      </div>
      <div class = "w3-container w3-green">
         <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </div>
      
      <h3>Padding Utilities Demo</h3>
      <div class = "w3-container w3-red w3-padding-jumbo">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
      </div>
      <div class = "w3-container w3-green w3-padding-16">
         <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </div>
      
      <h3>Margin Utilities Demo</h3>
      <div class = "w3-container w3-margin-64">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
      </div>
      <div class = "w3-container w3-margin-8">
         <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </div>
      
      <h3>Border Utilities Demo</h3>
      <div class = "w3-container w3-red w3-border-left w3-border-right">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
      </div>
      <div class = "w3-container w3-green w3-border">
         <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </div>
 
      <h3>Size Utilities Demo</h3>
      <div class = "w3-container">
         <p class = "w3-small">Using w3-small font.</p>
         <p>Using Default (medium).</p>
         <p class = "w3-large">Using w3-large font.</p>
         <p class = "w3-xlarge">Using w3-xlarge font.</p>
      </div>

      <h3>Circle Utility Demo</h3>
      <div class = "w3-container">
         <img src = "html5-mini-logo.jpg" alt = "html5" class = "w3-circle">
      </div>
      <h3>Center Utility Demo</h3>
      <div class = "w3-container w3-center w3-black w3-card-2">
         <img src = "html5-mini-logo.jpg" class = "w3-circle" alt = "html5">
      </div>
   </body>
</html>

Wynik

Sprawdź wynik.