CSS3 Properties - dummies

Bagian dari CSS3 For Dummies Cheat Sheet

Beberapa properti CSS3 adalah jarang digunakan; Banyak yang lain sering digunakan sehingga pengembang harus tahu tentang mereka. Properti dan nilai yang terkait membentuk basis format yang Anda lakukan menggunakan CSS3. Berikut adalah daftar properti yang paling sering Anda gunakan saat bekerja dengan CSS3:

• background: Mendefinisikan konten untuk latar belakang elemen. Nilai untuk properti ini seringkali merupakan fungsi, seperti linear-gradient ().

• background-attachment : Menentukan bagaimana gambar berinteraksi dengan elemen lainnya. Anda menggunakan kata kunci berikut untuk mengkonfigurasi properti ini: gulir, tetap, dan lokal.

• background-color : Menentukan warna latar belakang entitas, seperti warna halaman yang mendasari. Anda dapat menggunakan salah satu teknik ini untuk menentukan warna latar belakang: fungsi heksadesimal, fungsi warna, fungsi rgb (), fungsi rgba (), fungsi hsl (), atau hsla ().

• background-image : Menyediakan lokasi sumber daya untuk digunakan sebagai grafik untuk latar belakang elemen. Anda menggunakan fungsi url () untuk menentukan lokasi.

• background-repeat : Memungkinkan gambar latar untuk diulang atau tidak diulang (menggunakan kata kunci no-repeat) sesuai kebutuhan. Anda juga dapat memilih untuk mengulang gambar hanya arah horizontal (repeat-x) atau vertikal (repeat-y).

• background-size : Menentukan ukuran gambar latar sebagai nilai absolut atau persentase.

• border : Mendefinisikan jenis border yang akan dibuat dengan menentukan salah satu dari kata kunci berikut: tidak ada, tersembunyi, burik, dashed, solid, double, groove, ridge, inset, awal, atau mewarisi. Ini juga memungkinkan untuk mengubah gaya masing-masing sisi perbatasan dengan menggunakan gaya border-bottom-style, border-left-style, border-right-style, dan border-top-style.

• border-color : Menentukan warna perbatasan yang mengelilingi entitas. Anda dapat menggunakan salah satu teknik ini untuk menentukan warna latar belakang: fungsi heksadesimal, fungsi warna, fungsi rgb (), fungsi rgba (), fungsi hsl (), atau hsla ().

• border-image : Mendefinisikan gambar yang akan digunakan untuk konten perbatasan, bukan tipe garis. Anda biasanya menggunakan fungsi url () untuk menentukan nilai properti ini.

• border-radius : Menentukan apakah sudut-sudut perbatasan dibulatkan dan jumlah pembulatannya. Saat membuat pojok yang membulat, Anda menentukan jumlah pembulatan. Untuk menghapus sudut yang membulat, gunakan kata kunci yang tidak ada sama sekali.

• border width : Tentukan ketebalan batas yang mengelilingi elemen. Anda dapat menentukan lebar perbatasan menggunakan kata kunci (menengah, tebal, atau tipis) atau pengukuran sebenarnya.

• kolom-count : Menentukan jumlah kolom yang akan dibuat. Lebar kolom secara otomatis berfluktuasi saat pengguna mengubah ukuran jendela browser (atau browser menampilkan scrollbar horizontal untuk memungkinkan penggulir melintasi kolom bila lebar tertentu diatur juga).

• column-fill : Menentukan bagaimana browser mengisi kolom (baik mengisi satu kolom pada satu waktu atau mengisi semua kolom bersamaan dengan jumlah konten yang sama).

• kolom-gap : Membuat celah antar kolom untuk memudahkan menentukan di mana satu kolom berakhir dan yang lainnya dimulai.

• column-rule : Membuat aturan di antara kolom sehingga pengguna dapat melihat pemisah fisik. Properti ini terdiri dari warna, gaya, dan lebar.

• column-rule-color : Tentukan dengan warna aturan yang digunakan di antara kolom.

• column-rule-style : Tentukan gaya aturan yang digunakan di antara kolom.

• column-rule-width : Tentukan lebar aturan yang digunakan di antara kolom.

• kolom-span : Menentukan jumlah kolom yang bisa dibentang sebuah objek.

• lebar kolom : Tentukan lebar kolom.

• kolom : Menyediakan metode singkatan untuk menentukan properti kolom-hitungan dan lebar kolom.

• color : Menentukan warna foreground suatu entitas, seperti teks. Anda dapat menggunakan salah satu teknik ini untuk menentukan warna: fungsi heksadesimal, fungsi warna, fungsi rgb (), fungsi rgba (), fungsi hsl (), atau hsla ().

• content : Keluarkan teks atau sumber daya lain yang ditentukan sebagai bagian dari presentasi elemen. Properti ini sering digunakan untuk melakukan tugas seperti menambahkan panah ke elemen visual. Anda menentukan nilai menggunakan fungsi url (), karakter Unicode yang didahului oleh garis miring terbalik (seperti 27A8), atau kata kunci.

• display : Menentukan bagaimana menyajikan jenis elemen tertentu pada halaman. Anda dapat menggunakan salah satu kata kunci berikut untuk menentukan jenis tampilan: none, box (atau flex-box), blok, flex, inline, inline-block, inline-flex, inline-table, list-item, table, table- keterangan, tabel-sel, tabel-kolom, tabel-kolom-kelompok, meja-footer-kelompok, tabel-header-kelompok, tabel-baris, atau tabel-baris-kelompok.

• float : Mengizinkan gambar melayang ke arah yang ditentukan. Anda menentukan properti ini menggunakan kata kunci berikut: kiri, kanan, atau tidak sama sekali.

• font-family : Mendefinisikan nama font. Tiga adalah tiga klasifikasi font yang biasanya digunakan sebagai bagian dari CSS (dan sebagian besar halaman CSS menggunakan ketiganya kecuali Anda juga menentukan properti src): spesifik, aman untuk Web, dan generik.

• font-size : Menentukan ukuran font bila dibandingkan dengan font lain pada halaman atau menyediakan ukuran font tertentu. Anda dapat menggunakan salah satu teknik untuk menentukan ukuran font: ukuran khusus, kata kunci (seperti besar atau lebih besar), dan persentase.

• font-style : Menentukan gaya font yang dibuat browser. Browser harus mendukung gaya dan font harus menyediakan gaya agar properti ini diberlakukan. Kata kunci gaya font adalah: normal, miring, miring (biasanya miring lebih kuat), dan mewarisi.

• font-variant : Menentukan apakah font harus disajikan dalam bentuk varian. Tidak semua browser dan font mendukung fitur ini. Kata kunci untuk properti ini adalah normal, huruf kecil, dan mewarisi.

• font-weight : Menentukan kegelapan font yang relatif dan lebar goresannya. Ada dua metode untuk menentukan bobot font: numerik dan kata kunci (seperti huruf tebal).

• height : Menunjukkan ukuran vertikal elemen.

• left : Menunjukkan lokasi paling kiri dari sebuah elemen pada sebuah halaman.

• list-style : Mendefinisikan tampilan elemen daftar. Anda dapat menentukan jenis spidol yang akan digunakan, posisi penanda, dan apakah spidol benar-benar dibuat menggunakan gambar, bukan karakter standar.

• margin : Menentukan jumlah spasi di antara batas elemen dan margin elemen lainnya.

• margin-bottom : Menunjukkan lokasi bottommost dari margin elemen pada halaman.

• margin-left : Menunjukkan lokasi paling kiri dari elemen margin pada halaman.

• margin-top : Menunjukkan lokasi paling atas dari elemen margin pada halaman.

• padding : Menentukan jumlah spasi di antara batas elemen dan konten di dalam elemen.

• posisi : Menunjukkan penempatan elemen pada halaman. Anda menentukan penempatan menggunakan kata kunci berikut: statis (elemennya dialirkan), absolut (elemen muncul di lokasi tertentu, meskipun penempatan semacam itu akan menimpa elemen lain), tetap (elemen ditempatkan relatif terhadap jendela browser), atau relatif (elemen ditempatkan relatif terhadap elemen induk).

• text-align : Menentukan posisi teks pada sebuah garis. Anda menentukan pelurusan menggunakan kata kunci pembenaran, kanan, tengah, dan kiri.

• Mendefinisikan penambahan karakteristik, seperti garis bawah, overline, atau line-through ke font. Properti ini bekerja di mana-mana, jadi Anda tidak perlu khawatir apakah seseorang melihat halaman Anda di televisi atau menggunakan smartphone akan mendapatkan pesan Anda. text-overflow :

• Mendefinisikan tindakan yang akan terjadi saat teks meluap pada kotak yang digunakan untuk menahannya. Nilai yang dapat diterima adalah: klip, elips, atau nilai string yang Anda berikan. text-shadow :

• Menampilkan bayangan karakter target dengan lebar yang sama dengan karakter target. Posisi, kekuatan, dan warna bayangan ditentukan oleh properti berikut: h-shadow (menentukan posisi horizontal bayangan), v-shadow (menentukan posisi vertikal bayangan), blur (menentukan kejelasan dari bayangan) teks bayangan), dan warna (mendefinisikan warna garis besar). visibilitas :

• Menentukan tingkat keterlihatan untuk elemen. Anda menggunakan kata kunci berikut untuk mengkonfigurasi properti ini: terlihat, tersembunyi, atau macet. width :

• Menunjukkan ukuran elemen horizontal. kata-break :

• Menentukan bagaimana teks dibungkus dalam kotak yang berisi saat bekerja dengan bahasa non-CJK (bahasa China Jepang Korea). Nilai yang dapat diterima adalah: normal, break-all, dan hyphenate. word-wrap :

• Menentukan bagaimana teks rusak dan kemudian dibungkus ke baris berikutnya dalam kotak yang berisi saat bekerja dengan bahasa non-CJK. Nilai yang dapat diterima adalah: normal dan break-word.