Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

W3.CSS teglar

ULASHISH

Teglar, yorliqlar va lavhalar

Done New! More Later!

Falcon Ridge Parkway STOP! WATCH OUT!

W3.CSS teg klasslari

Klass Vazifasi
w3-tag To‘rtburchak teg yoki yorliq

W3.CSS’da w3-tag klassidan teglar, yorliqlar va lavhalar uchun foydalanish mumkin.

Teglar to‘rtburchak shaklda bo‘ladi

w3-tag klassi to‘rtburchak teg (yorliq yoki lavha) yaratadi. Standart rang — qora:

Status: Done

Misol

<p>Status: <span class="w3-tag">Done</span></p>
O‘zingiz sinab ko‘ring »

Rangli teglar

Teg rangini o‘zgartirish uchun w3-color klassidan foydalaning:

New!

More Later!

Misol

<p><span class="w3-tag w3-blue">New!</span></p> <p><span class="w3-tag w3-teal">More Later!</span></p>
O‘zingiz sinab ko‘ring »

Teg o‘lchamlari

Standart holatda teg o‘z konteynerining o‘lchamini meros qilib oladi.

Teg o‘lchamini o‘zgartirish uchun w3-size klasslaridan foydalanish mumkin:

  • w3-tiny
  • w3-small
  • w3-large
  • w3-xlarge
  • w3-xxlarge
  • w3-xxxlarge
  • w3-jumbo

6 6 6

66 66 66

66 66

Katta teglarga biroz qo‘shimcha ichki bo‘shliq (padding) qo‘shishni xohlashingiz mumkin:

Misol

<span class="w3-tag w3-jumbo w3-blue">66</span> <span class="w3-tag w3-jumbo w3-blue w3-padding-large">66</span>
O‘zingiz sinab ko‘ring »

Harfli teglar

A U G U S T

Misol

<span class="w3-tag w3-xlarge">A</span> <span class="w3-tag w3-xlarge">U</span> <span class="w3-tag w3-xlarge">G</span> <span class="w3-tag w3-xlarge">U</span> <span class="w3-tag w3-xlarge">S</span> <span class="w3-tag w3-xlarge">T</span>
O‘zingiz sinab ko‘ring »
S A L E

Misol

<span class="w3-tag w3-jumbo w3-red">S</span> <span class="w3-tag w3-jumbo">A</span> <span class="w3-tag w3-jumbo w3-yellow">L</span> <span class="w3-tag w3-jumbo">E</span>
O‘zingiz sinab ko‘ring »

Lavhalar

Lavhalar — bu shunchaki katta teglar.

London Zoo

Misol

<div class="w3-tag w3-xxlarge w3-orange">London Zoo</div>
O‘zingiz sinab ko‘ring »

Yo‘l belgilari

Falcon Ridge Parkway

Misol

<div class="w3-tag w3-round w3-green" style="padding:3px">   <div class="w3-tag w3-round w3-green w3-border w3-border-white">     Falcon Ridge Parkway   </div> </div>
O‘zingiz sinab ko‘ring »

Katta lavhalar

Katta lavhalarni ko‘rsatish uchun w3-size klasslaridan foydalanish mumkin:

IN CASE OF
EMERGENCY:
RUN LIKE HELL!

Misol

<span class="w3-tag w3-xxlarge w3-padding w3-orange w3-center"> <strong> IN CASE OF<br> EMERGENCY:<br> RUN LIKE HELL! </strong> </span>
O‘zingiz sinab ko‘ring »
49,99

Misol

<span class="w3-tag w3-jumbo w3-green"> 49<span class="w3-xlarge">,99</span> </span>
O‘zingiz sinab ko‘ring »

Yumaloq burchakli lavhalar

Lavhaga yumaloq burchaklar qo‘shish uchun w3-round-size klasslaridan foydalanish mumkin:

DO NOT
BREATHE
UNDER WATER

Misol

<span class="w3-tag w3-padding w3-round-large w3-red w3-center"> DO NOT<br> BREATHE<br> UNDER WATER </span>
O‘zingiz sinab ko‘ring »

Burilgan teglar

Teg yoki lavhani burish uchun standart CSS transform xususiyatidan foydalaning:

STOP

Misol

<span class="w3-tag w3-xlarge w3-padding w3-red" style="transform:rotate(-5deg)"> STOP </span>
O‘zingiz sinab ko‘ring »

Aylanuvchi teglar

Tegni 360 gradusga aylantirish uchun w3-spin klassidan foydalanish mumkin:

STOP

Misol

<span class="w3-tag w3-spin w3-large">STOP</span>
O‘zingiz sinab ko‘ring »

‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish