Referensi CSS

Cascading Style Sheets, atau CSS, mengontrol gaya dan tata letak situs dan aplikasi. Di App Maker, Anda dapat menggunakan CSS untuk menentukan warna, font, dan batas widget untuk menyesuaikan tampilan aplikasi.

Tambahkan CSS di tab Gaya, di menu sebelah kanan editor Halaman. Misalnya, untuk mengubah warna tombol Button1 menjadi oranye, Anda dapat memilih tombol di halaman Anda, dan menambahkan kode berikut di tab Gaya:

.app-NewPage-Button1 {
  background-color: orange;
}

CSS dasar

Font

Efek CSS/Gaya Asli Dengan gaya yang diterapkan Nilai yang memungkinkan
Tebal font-weight: bold; teks sampel teks sampel normal, bold
Miring font-style:italic; teks sampel teks sampel normal, italic
Coret text-decoration: line-through; teks sampel teks sampel underline, line-through, overline
Warna teks color: red;
color: #ff0000;
teks sampel teks sampel Nama warna atau kode warna HTML
Ukuran teks font-size:20px; teks sampel teks sampel ukuran piksel atau unit em
Perataan teks text-align: right; teks sampel teks sampel left, center, right

Panel, tombol, dll.

Batas

Efek CSS/Gaya Asli Dengan gaya yang diterapkan
Menambahkan atau mengubah batas border: 1px red solid;
Menghapus batas border: none;

Batas membulat

Efek CSS/Gaya Asli Dengan gaya yang diterapkan
Membulatkan semua sudut border-radius:5px;
Membulatkan sudut satu per satu border-top-right-radius: 0px;
border-top-left-radius: 5px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 15px;
teks sampel
teks sampel

Warna latar belakang

Efek CSS/Gaya Asli Dengan gaya yang diterapkan
**Menambahkan atau mengubah warna** background-color: lightgreen;
Menghapus warna background: none;

Kursor

Efek CSS/Gaya Asli Dengan gaya yang diterapkan
Pointer (elemen yang dapat diklik) cursor: pointer; teks sampel teks sampel
Panah (elemen yang tidak dapat diklik) cursor: default; link sampel link sampel

Menangani konten yang berlebih

Terkadang konten aplikasi Anda terlalu besar untuk container-nya. Entah teksnya yang terlalu panjang untuk widget label, atau sekelompok widget yang tidak cukup dalam panel, CSS dapat menentukan respons aplikasi ketika konten melebihi container-nya.

Menyembunyikan konten yang berlebih

Efek CSS/Gaya Asli Dengan gaya yang diterapkan
Memotong konten yang berlebih
overflow: hidden;
CSS KEREN
CSS KEREN
Mengaktifkan scrolling
overflow: auto;
CSS KEREN
CSS KEREN
Memotong konten yang terlalu lebar
overflow-x: hidden;
CSS KEREN
CSS KEREN
Mengaktifkan scrolling untuk konten yang terlalu panjang
overflow-y: auto;
CSS KEREN
CSS KEREN

Menggunakan elipsis untuk teks yang berlebih

Efek CSS/Gaya Asli Dengan gaya yang diterapkan
Elipsis overflow: hidden;
text-overflow: ellipsis;
Internasionalisasi
Internasionalisasi

Mengubah efek browser standar

Browser memiliki cara standar untuk menampilkan sebagian besar elemen interaktif. Misalnya, link yang sudah dikunjungi biasanya bergaris bawah dan berwarna ungu. Anda dapat menentukan ulang gaya tersebut menggunakan selektor pseudo CSS.

Hovering (mengarahkan kursor)

Mengarahkan mouse ke suatu elemen disebut hovering. Tombol dan link memiliki efek hover bawaan, tetapi Anda dapat menambahkan efek hover ke widget pembuat aplikasi apa pun, termasuk panel dan kolom input.

CSS/Gaya Asli Dengan gaya yang diterapkan
.blueButton {background-color: blue;}
.blueButton:hover {background-color: pink;}
.testClass {}
.testClass:hover {background-color: #FFA500;}
teks sampel
teks sampel

Penetapan fokus dan pengubah !important

Berinteraksi dengan suatu elemen membuatnya menjadi terfokus. Misalnya, ketika Anda mengklik kotak input, kursor teks akan muncul. Terfokus berarti semua input dari keyboard langsung tertuju pada elemen yang difokuskan.

Terkadang, gaya Anda bentrok dengan gaya yang ditentukan oleh browser atau tema App Maker. Jika CSS gagal dirender, coba tambahkan pengubah !important pada gaya untuk memastikannya tidak diganti oleh browser atau gaya tema. Cobalah untuk tidak menerapkan pengubah terlalu banyak; yang mungkin dapat mengganti gaya bawaan yang penting.

CSS/Gaya Asli Dengan gaya yang diterapkan
.inputClass {}
.inputClass:focus {border:1px solid red;}
.inputClass1 {}
.inputClass1:focus {border:1px solid red !important;}

Langkah berikutnya