tutorial pengembangan web terbaru
 

W3.CSS Reference manual

❮ Sebelumnya Berikutnya Bab ❯

Container Kelas

Kelas mendefinisikan
w3-kontainer Wadah untuk konten HTML (menambahkan bantalan 16px kiri dan kanan) Cobalah
Digunakan dengan kelas warna Cobalah
Digunakan sebagai header Cobalah
Digunakan sebagai footer Cobalah
Digunakan dengan w3-leftbar Cobalah
Digunakan dengan w3-bottombar Cobalah
w3-bagian Wadah untuk konten HTML (menambahkan 16px margin atas dan bawah) Cobalah
w3-badge Lencana melingkar 8 Cobalah
w3-tag Tag persegi panjang Lebih Kemudian! Cobalah
w3-ul daftar unordered Cobalah
w3-display-kontainer Wadah untuk kelas w3-Tampilan- (posisi elemen di kiri atas, kanan atas, kiri bawah atau sudut kanan bawah, atau di tengah-tengah wadah) Cobalah
w3-gambar Usang. Gunakan w3-display-kontainer sebagai gantinya. Cobalah
w3-blockquote Dihapus di 2.0 (menggunakan w3-leftbar gantinya) Cobalah
w3-kode kode wadah Cobalah
w3-kemajuan-kontainer Progress bar wadah Cobalah

tabel Kelas

Kelas mendefinisikan
w3-tabel Kontainer untuk tabel HTML Cobalah
w3-bergaris tabel bergaris Cobalah
w3-perbatasan tabel berbatasan Cobalah
w3-berbatasan garis berbatasan Cobalah
w3 berpusat tabel berpusat Cobalah
w3-hoverable tabel Hoverable Cobalah
w3-meja-semua Semua properti menetapkan Cobalah
Dengan w3-bergaris, w3-perbatasan, dan w3-berbatasan Cobalah
Dengan kepala berwarna Cobalah
Dengan w3-jawab Cobalah
Dengan w3-kecil Cobalah
Dengan w3-kecil Cobalah
Dengan w3-besar Cobalah
Dengan w3-xlarge Cobalah
Dengan w3-xxlarge Cobalah
Dengan w3-xxxlarge Cobalah
dengan warna Cobalah
Dengan w3-jumbo Cobalah

Kelas kartu

Kelas mendefinisikan
w3-card Wadah untuk setiap konten HTML (Dengan perbatasan) Cobalah
w3-card-2 Wadah untuk setiap konten HTML (2px shadow border) Cobalah
w3-card-4 Wadah untuk setiap konten HTML (4 piksel shadow border) Cobalah
w3-card-8 Wadah untuk setiap konten HTML (8px shadow border) Cobalah
w3-card-12 Wadah untuk setiap konten HTML (12px berbatasan shadow) Cobalah
w3-card-16 Wadah untuk setiap konten HTML (16px berbatasan shadow) Cobalah
w3-card-24 Wadah untuk setiap konten HTML (24px berbatasan shadow) Cobalah

Kelas responsif

Kelas mendefinisikan
w3-baris Wadah untuk satu baris dari konten responsif cairan Cobalah
w3-baris-bantalan Baris di mana semua kolom memiliki bantalan standar Cobalah
w3-konten Wadah untuk berpusat ukuran konten tetap Cobalah
w3-setengah Setengah wadah kolom (1/2) layar Cobalah
w3-ketiga Ketiga wadah kolom (1/3) layar Cobalah
w3-twothird Dua ketiga wadah kolom (2/3) layar Cobalah
w3-kuartal Quarter wadah kolom (1/4) layar Cobalah
w3-threequarter Tiga perempat wadah kolom (3/4) layar Cobalah
w3-col kontainer kolom untuk setiap konten HTML Cobalah
l1 - L12 ukuran responsif untuk layar besar Cobalah
m1 - m12 ukuran responsif untuk layar media Cobalah
s1 - s12 ukuran responsif untuk layar kecil Cobalah
w3-hide-kecil Sembunyikan konten pada layar kecil (kurang dari 601px) Cobalah
w3-hide-menengah Menyembunyikan konten pada layar media Cobalah
w3-hide-besar Sembunyikan konten pada layar besar (lebih besar dari 992px) Cobalah

Kelas navigasi

Kelas mendefinisikan
w3-navbar bar navigasi Cobalah
bar navigasi dilipat Cobalah
w3-topnav navigation bar Cobalah
w3-sidenav bar navigasi samping Cobalah
bar navigasi samping overlay konten utama Cobalah
bar navigasi samping overlay semua konten utama Cobalah
bar navigasi samping menggeser konten utama ke kanan Cobalah
Side bar navigasi dengan latar belakang hamparan Cobalah
w3-runtuhnya Sepenuhnya otomatis navigasi samping responsif Cobalah
w3-dropnav navigasi dropdown Cobalah
w3-dropdown-klik elemen dropdown diklik Cobalah
w3-dropdown-melayang elemen dropdown Hoverable Cobalah
Unsur dropdown Hoverable (digunakan di w3-navbar) Cobalah
Unsur dropdown Hoverable (digunakan di w3-sidenav) Cobalah
Unsur dropdown Hoverable (digunakan di w3-topnav) Cobalah
w3-akordeon Menyembunyikan dan menampilkan konten dilipat Cobalah
akordeon diklik dan dropdown yang digunakan dalam w3-sidenav Cobalah
w3-pagination link pagination Cobalah

tombol Kelas

Kelas mendefinisikan
w3-btn tombol HTML Rectangular Cobalah
tombol HTML persegi panjang dengan efek riak Cobalah
w3-btn-apung tombol mengambang melingkar Cobalah
tombol mengambang melingkar dengan efek riak Cobalah
w3-btn-kelompok tombol dikelompokkan Cobalah
w3-btn-blok tombol-lebar penuh (100%) Cobalah

masukan Kelas

Kelas mendefinisikan
w3-bentuk Sama seperti w3-bantalan Cobalah
form input sebagai kartu Cobalah
w3-masukan elemen masukan Cobalah
elemen masukan (label top) Cobalah
elemen masukan (label bawah) Cobalah
w3-kelompok Sekelompok elemen HTML Cobalah
w3-label label masukan Cobalah
w3-memvalidasi Memvalidasi input (Perubahan warna ketika input tidak valid) Cobalah
w3-cek input type checkbox Cobalah
w3-radio input type radio Cobalah
w3-pilih Masukan elemen pilih Cobalah
w3-bernyawa-masukan Menjiwai lebar masukan untuk 100% Cobalah

modal Kelas

Kelas mendefinisikan
w3-modal kontainer modal Cobalah
w3-modal-konten Unsur pop-up modal Cobalah
w3-tooltip elemen tooltip Cobalah
w3-teks teks tooltip Cobalah
inline tooltip Cobalah

animasi Kelas

Kelas mendefinisikan
w3-bernyawa-top Menjiwai elemen dari -300px atas ke 0px Cobalah
w3-bernyawa-kiri Menjiwai sebuah elemen dari -300px kiri ke 0px Cobalah
w3-bernyawa-bottom Menjiwai elemen dari -300px bawah ke 0px Cobalah
w3-bernyawa-benar Menjiwai sebuah elemen dari -300px hak untuk 0px Cobalah
w3-bernyawa-opacity Menjiwai opacity sebuah elemen dari 0 ke 1 Cobalah
w3-bernyawa-zoom Menjiwai elemen dari 0 sampai 100% dalam ukuran Cobalah
w3-bernyawa-memudar Menjiwai opacity sebuah elemen dari 0 ke 1 dan 1-0 (memudar dalam dan keluar) Cobalah
w3-spin Berputar ikon 360 derajat Cobalah
Berputar setiap elemen 360 derajat Cobalah
w3-bernyawa-masukan Menjiwai lebar field input untuk 100% Cobalah

utilitas Kelas

Kelas mendefinisikan
w3-kecil Menentukan ukuran font 10 piksel Cobalah
w3-kecil Menentukan ukuran font 12 piksel Cobalah
w3-besar Menentukan ukuran font 20 piksel Cobalah
w3-xlarge Menentukan ukuran font 24 piksel Cobalah
w3-xxlarge Menentukan ukuran font 32 piksel Cobalah
w3-xxxlarge Menentukan ukuran font 48 piksel Cobalah
w3-jumbo Menentukan ukuran font 64 piksel Cobalah
w3-slim Menentukan teks lebih ramping Cobalah
w3-lebar Menentukan teks yang lebih luas Cobalah
w3-vertikal Menentukan teks vertikal Cobalah
w3-top konten tetap di atas halaman Cobalah
w3-pusat konten berpusat Cobalah
w3-lingkaran konten dilingkari Cobalah
w3-hide konten tersembunyi (display: none) Cobalah
w3-show Tampilkan konten (display: block) Cobalah
w3-show-blok Alias ​​w3-acara (display: block) Cobalah
w3-show-inline-block Tampilkan konten sebagai inline-block (display: inline-block) Cobalah
w3-hide-kecil Sembunyikan konten pada layar kecil (kurang dari 601px) Cobalah
w3-hide-menengah Menyembunyikan konten pada layar media Cobalah
w3-hide-besar Sembunyikan konten pada layar besar (lebih besar dari 992px) Cobalah
w3-kiri konten yang disesuaikan meninggalkan Cobalah
w3-benar konten yang disesuaikan benar Cobalah
w3-kiri-align Meninggalkan teks selaras Cobalah
w3-kanan-align teks selaras tepat Cobalah
w3-membenarkan Kanan dan teks selaras kiri Cobalah
w3-display-kontainer Wadah untuk w3-Tampilan- kelas (position: relative) Cobalah
w3-display-topleft konten posisi di sudut kiri atas Cobalah
w3-display-topright konten posisi di sudut kanan atas Cobalah
w3-display-bottomleft konten posisi di sudut kiri bawah Cobalah
w3-display-bottomRight konten posisi di sudut kanan bawah Cobalah
w3-display-tengah konten posisi di tengah (horizontal dan vertikal) Cobalah
w3-display-topmiddle konten posisi di tengah di bagian atas elemen Cobalah
w3-display-bottommiddle konten posisi di tengah di bagian bawah dari elemen Cobalah
w3-serif Perubahan font untuk serif Cobalah
w3-opacity Menambahkan opacity ke teks Cobalah
Menambahkan opacity ke setiap elemen Cobalah
w3-overlay Menciptakan efek overlay Cobalah
w3-text-shadow Menambahkan bayangan untuk teks Cobalah

Kelas warna

Kelas mendefinisikan
w3-red Warna merah latar belakang Cobalah
w3-merah muda Background warna pink Cobalah
w3-ungu warna latar belakang ungu Cobalah
w3-deep-ungu warna latar belakang yang mendalam ungu Cobalah
w3-indigo warna indigo latar Cobalah
w3-biru biru warna latar belakang Cobalah
w3-cahaya biru Latar belakang biru muda warna Cobalah
w3-cyan cyan warna latar belakang Cobalah
w3-aqua warna aqua latar Cobalah
w3-teal warna teal latar Cobalah
w3-hijau hijau warna latar belakang Cobalah
w3-lampu-hijau Latar belakang hijau terang warna Cobalah
w3-lime warna lime latar Cobalah
w3-pasir pasir warna latar belakang Cobalah
w3-khaki warna khaki latar Cobalah
w3-kuning warna latar belakang kuning Cobalah
w3-amber amber warna latar belakang Cobalah
w3-oranye warna oranye latar Cobalah
w3-dalam-oranye Background warna oranye yang mendalam Cobalah
w3-biru-abu-abu Latar belakang warna biru abu-abu Cobalah
w3-coklat warna coklat latar Cobalah
w3-abu-abu terang Cahaya latar belakang warna abu-abu Cobalah
w3-abu Warna abu-abu latar belakang Cobalah
w3-abu-abu gelap Background warna abu-abu gelap Cobalah
w3-hitam Background warna hitam Cobalah
w3-pucat-red Latar belakang warna merah pucat Cobalah
w3-pucat-kuning warna latar belakang kuning pucat Cobalah
w3-hijau pucat Warna latar belakang hijau pucat Cobalah
w3-pucat-biru Latar belakang warna biru pucat Cobalah
w3-transparan Transparan background-color

Hover Kelas

Semua warna di atas juga dapat digunakan sebagai kelas melayang:

Kelas mendefinisikan
w3-melayang-putih Hover warna putih Cobalah
w3-melayang-hitam Hover warna hitam Cobalah
w3-melayang-red Warna merah Hover Cobalah
w3-melayang-biru warna biru Hover Cobalah
w3-melayang-hijau warna hijau Hover Cobalah
w3-melayang-aqua warna aqua Hover Cobalah
w3-melayang-oranye warna oranye Hover Cobalah
w3-melayang-abu Warna abu-abu Hover Cobalah
w3-melayang-hijau pucat warna Hover hijau pucat Cobalah
w3-hover teks-red Arahkan warna teks merah Cobalah
w3-hover teks-red Arahkan teks warna biru Cobalah
w3-hover teks-hijau Arahkan warna teks hijau Cobalah
w3-hover teks-ungu Warna teks Hover ungu Cobalah
w3-melayang-border- warna Warna perbatasan Hover Cobalah
w3-melayang-opacity Menambahkan transparansi untuk sebuah elemen di hover (60% opacity) Cobalah
w3-melayang-shadow Menambahkan bayangan ke elemen di hover Cobalah
w3-melayang-none Menghilangkan efek melayang dari unsur Cobalah

Kelas putaran

Kelas mendefinisikan
w3-round Elemen bulat (border-radius) 4px Cobalah
w3-round-kecil Elemen bulat (border-radius) 2px Cobalah
w3-round-menengah Elemen bulat (border-radius) 4px Cobalah
w3-round-besar Elemen bulat (border-radius) 8px Cobalah
w3-round-xlarge Elemen bulat (border-radius) 16px Cobalah
w3-round-xxlarge Elemen bulat (border-radius) 32px Cobalah
w3-round-jumbo Elemen bulat (border-radius) 64px Cobalah

Padding Kelas

Kelas mendefinisikan
w3-padding-0 Menghapus semua lapisan dari sebuah elemen Cobalah
w3-bantalan Padding 8px atas dan bawah, dan 16px kiri dan kanan. Cobalah
w3-padding-kecil Padding 2px atas dan bawah, dan 4px kiri dan kanan. Cobalah
w3-padding-kecil Padding 4px atas dan bawah, dan 8px kiri dan kanan. Cobalah
w3-padding-menengah Padding 8px atas dan bawah, dan 16px kiri dan kanan. Cobalah
w3-padding-besar Padding 12px atas dan bawah, dan 24px kiri dan kanan. Cobalah
w3-padding-xlarge Padding 16px atas dan bawah, dan 32px kiri dan kanan. Cobalah
w3-padding-xxlarge Padding 24px atas dan bawah, dan 48px kiri dan kanan. Cobalah
w3-padding-jumbo Padding 32px atas dan bawah, dan 64px kiri dan kanan. Cobalah
w3-padding-top Padding atas 8px Cobalah
w3-padding-right Melapisi 16px tepat Cobalah
w3-padding-bottom Padding bawah 8px Cobalah
w3-padding-left Padding meninggalkan 16px Cobalah
w3-padding-hor-4 Padding 4px atas dan bawah Cobalah
w3-padding-hor-8 Padding 8px atas dan bawah Cobalah
w3-padding-hor-12 Padding 12px atas dan bawah Cobalah
w3-padding-hor-16 Padding 16px atas dan bawah Cobalah
w3-padding-hor-24 Padding 24px atas dan bawah Cobalah
w3-padding-hor-32 Padding 32px atas dan bawah Cobalah
w3-padding-hor-48 Padding 48px atas dan bawah Cobalah
w3-padding-hor-64 Padding 64px atas dan bawah Cobalah
w3-padding-hor-128 Padding 128px atas dan bawah Cobalah
w3-padding-ver-4 Padding 4px kiri dan kanan. Cobalah
w3-padding-ver-8 Padding 8px kiri dan kanan. Cobalah
w3-padding-ver-16 Padding 16px kiri dan kanan. Cobalah
w3-padding-ver-24 Padding 24px kiri dan kanan. Cobalah
w3-padding-ver-32 Padding 32px kiri dan kanan. Cobalah
w3-padding-ver-48 Padding 48px kiri dan kanan. Cobalah
w3-padding-ver-64 Padding 64px kiri dan kanan. Cobalah

Margin Kelas

Kelas mendefinisikan
w3-margin-0 Menghapus semua margin dari elemen Cobalah
w3-marjin Margin 16px Cobalah
w3-margin-top Margin atas 16px Cobalah
w3-margin-right Margin 16px tepat Cobalah
w3-margin-bottom margin bawah 16px Cobalah
w3-margin-left Margin kiri 16px Cobalah

Kelas perbatasan

Kelas mendefinisikan
w3-perbatasan Borders (atas, kanan, bawah, kiri) Cobalah
w3-border-top batas atas Cobalah
w3-border-benar batas kanan Cobalah
w3-border-bottom bawah perbatasan Cobalah
w3-perbatasan-kiri perbatasan kiri Cobalah
w3-border-0 Menghapus semua perbatasan Cobalah
warna w3-border- Menampilkan setiap perbatasan didefinisikan dalam warna tertentu (seperti merah, dll) Cobalah
w3-bottombar Menambahkan batas bawah tebal (bar) untuk elemen Cobalah
w3-leftbar Menambahkan perbatasan tebal kiri (bar) untuk elemen Cobalah
w3-rightbar Menambahkan batas kanan tebal (bar) untuk elemen Cobalah
w3-topbar Menambahkan perbatasan atas tebal (bar) untuk elemen Cobalah
w3-melayang-border- warna Warna perbatasan Hoverable Cobalah

❮ Sebelumnya Berikutnya Bab ❯