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.