Salah satu cara paling efektif untuk menulis CSS adalah dengan menggunakan singkatan. Menggunakan singkatan dapat membuat file CSS Anda lebih kecil dan lebih mudah dibaca. Memahami singkatan properti CSS juga merupakan salah satu keterampilan dasar insinyur pengembangan front-end. Hari ini kami secara sistematis merangkum singkatan dari properti CSS.
singkatan warna
Singkatan dari warna adalah yang paling sederhana. Jika nilai warna dalam heksadesimal, jika nilai setiap warna sama maka dapat ditulis sebagai:
| warna: #113366 |
dapat disingkat menjadi
| warna: #136 |
Singkatan dapat digunakan dimanapun nilai warna heksadesimal digunakan, seperti warna latar belakang, warna batas, bayangan teks, bayangan kotak, dll.
ukuran kotak
Ada dua atribut utama yang digunakan di sini: margin dan padding. Kami mengambil margin sebagai contoh, dan paddingnya sama. Kotak tersebut memiliki empat arah, atas, bawah, kiri, dan kanan, dan setiap arah memiliki margin:
| margin-atas:1 piksel; margin-kanan:1px; margin-botton:1px; margin-kiri:1px; |
Keempat nilai ini dapat disingkat menjadi satu:
| margin:1 piksel 1 piksel 1 piksel 1 piksel; |
Urutan singkatannya adalah atas->kanan->bawah->kiri. Arah searah jarum jam. Jika nilai sisi-sisi yang berhadapan sama, maka dapat dihilangkan:
| margin:1px;//Margin pada keempat arah sama, yang setara dengan margin:1px 1px 1px 1px; margin:1px 2px;//Margin atas dan bawah sama-sama 1px, dan margin kiri dan kanan sama-sama 2px, yang setara dengan margin:1px 2px 1px 2px margin:1px 2px 3px;//Margin kanan dan margin kiri sama, yang setara dengan margin:1px 2px 3px 2px; margin:1px 2px 1px 3px;//Perhatikan bahwa meskipun margin atas dan bawah di sini sama-sama 1px, singkatan tidak dapat digunakan di sini. |
berbatasan
Border adalah atribut yang relatif fleksibel. Ia memiliki tiga sub-atribut: border-width, border-style, dan border-color.
| lebar batas: angka + satuan; gaya perbatasan: tidak ada ||. tersembunyi ||. putus-putus ||. ganda ||. alur ||. awalan ||. warna batas: warna; |
Dapat disingkat menurut lebar, corak dan warnanya:
| batas:5px padat #369; |
Terkadang, batas dapat ditulis lebih sederhana dan beberapa nilai dapat dihilangkan, namun harap perhatikan nilai mana yang diperlukan. Anda juga dapat mengujinya:
| border:groove red; //Coba tebak berapa lebar border ini? border:solid; //Seperti apa tampilannya? perbatasan:5px; //Apakah ini oke? perbatasan:5px merah; //Apakah ini oke? ? perbatasan:merah; //Apakah ini oke? ? ? |
Seperti yang bisa Anda lihat dari kode di atas, lebar default border adalah 3px, dan warna defaultnya adalah hitam. Dalam singkatan border, diperlukan gaya border.
Anda juga dapat menggunakan singkatan untuk setiap sisi:
| perbatasan-atas:4px padat #333; perbatasan-kanan:3px solid #666; perbatasan-bawah:3px padat #666; perbatasan-kiri:4px padat #333; |
Anda juga dapat menggunakan singkatan untuk setiap atribut:
| border-width: 1px 2px 3px; //Dapat digunakan hingga empat nilai, aturan singkatannya mirip dengan singkatan ukuran kotak, sama di bawah gaya perbatasan: alur putus-putus padat; warna batas:merah biru putih hitam; |
garis besar
Outline mirip dengan border. Perbedaannya adalah border akan mempengaruhi model kotak, namun outline tidak.
| lebar garis besar: angka + satuan; gaya garis besar: tidak ada ||. putus-putus ||. ganda ||. alur ||. awalan ||. garis-warna: warna; |
Dapat disingkat menjadi:
| garis besar:1px merah pekat; |
Demikian pula dalam singkatan outline, outline-style juga diperlukan, dan dua nilai lainnya bersifat opsional.
latar belakang
Latar Belakang adalah salah satu singkatan yang paling umum digunakan dan berisi properti berikut:
| warna latar belakang: warna ||.#hex ||.RGB(% || 0-255) ||. gambar latar belakang:url(); ulangi latar belakang: ulangi ||.ulangi-x ||.ulangi-y ||. posisi latar belakang: XY ||(atas||bawah||tengah) (kiri||kanan||tengah); lampiran latar belakang: gulir ||. |
Singkatan dari background dapat sangat meningkatkan efisiensi CSS:
| latar belakang:#fff url(img.png) tanpa pengulangan 0 0; |
Singkatan latar belakang juga memiliki beberapa nilai default:
| latar belakang:transparan tidak ada ulangi gulir kiri atas; |
Nilai properti latar belakang tidak diwariskan. Anda hanya dapat mendeklarasikan salah satunya, dan defaultnya akan diterapkan ke nilai lainnya.
font
Singkatan font juga merupakan salah satu yang paling banyak digunakan, dan juga merupakan salah satu cara untuk menulis CSS yang efisien.
font berisi properti berikut:
| gaya font: normal ||. miring ||. font-variant:normal ||.huruf kecil; berat font: normal ||.tebal ||.lebih tebal ||.||.lebih ringan ||. ukuran font: (angka+satuan) ||.(xx-kecil - xx-besar); tinggi garis: normal ||.(angka+satuan); font-family:name,"lebih banyak nama"; |
Setiap atribut font juga memiliki nilai default. Penting untuk mengingat nilai default berikut:
| gaya font: normal; varian font:normal; berat font: normal; ukuran font: mewarisi; tinggi garis: normal; font-family:mewarisi; |
Faktanya, singkatan font adalah salah satu yang paling membutuhkan kehati-hatian di antara singkatan-singkatan tersebut. Sedikit kelalaian dapat menyebabkan beberapa konsekuensi yang tidak terduga. Oleh karena itu, banyak orang yang tidak setuju dengan penggunaan singkatan font.
Tapi ini panduan kecilnya, saya yakin ini akan membantu Anda lebih memahami singkatan font:
gaya daftar
Mungkin atribut daftar yang paling umum digunakan adalah:
| gaya daftar: tidak ada |
Ini menghapus semua gaya daftar default, seperti angka atau titik.
gaya daftar juga memiliki tiga atribut:
| tipe-gaya daftar: tidak ada ||.cakram ||. lingkaran ||.persegi ||. desimal ||.alfa atas || posisi-gaya-daftar: di dalam || di luar || daftar-gaya-gambar: (url) ||.tidak ada || |
Atribut default gaya daftar adalah sebagai berikut:
| gaya daftar:disc di luar tidak ada |
Perlu dicatat bahwa jika gambar didefinisikan dalam gaya daftar, prioritas gambar lebih tinggi daripada tipe gaya daftar, misalnya:
| gaya daftar:lingkaran di dalam url(../img.gif) |
Dalam contoh ini, jika img.gif ada, kumpulan simbol lingkaran sebelumnya tidak akan ditampilkan.
PS: Sebenarnya, list-style-type memiliki banyak style yang berguna. Siswa yang tertarik dapat merujuk ke: https://developer.mozilla.org/en/CSS/list-style-type
radius batas (radius sudut)
Border-radius adalah atribut baru yang ditambahkan di CSS3, digunakan untuk mengimplementasikan batas bulat. Kerugian saat ini dari atribut ini adalah setiap browser mendukungnya secara berbeda. IE belum mendukungnya. Gecko (firefox) dan webkit (safari/chrome) masing-masing perlu menggunakan awalan pribadi -moz- dan -webkit-. Yang lebih membingungkan lagi adalah jika atribut radius batas dari satu sudut ditulis lebih berbeda antara kedua browser, Anda harus menulis sejumlah besar atribut pribadi:
| -moz-perbatasan-radius-kiri bawah:6px; -moz-perbatasan-radius-kiri atas:6px; -moz-border-radius-kanan atas:6px; -webkit-perbatasan-kiri-bawah-radius:6px; -webkit-perbatasan-kiri-atas-radius:6px; -webkit-perbatasan-kanan-atas-radius:6px; batas-kiri-bawah-radius:6px; radius-batas-kiri-atas:6px; radius-batas-kanan-atas:6px; |
Uh, apakah kamu sudah terpesona? Ini hanya untuk mencapai situasi di mana sudut kiri atas tidak membulat dan tiga sudut lainnya membulat. Jadi untuk radius perbatasan, Shenfei sangat menyarankan menggunakan singkatan:
| -moz-batas-radius:0 6px 6px; -webkit-perbatasan-radius:0 6px 6px; radius batas:0 6px 6px; |
Ini jauh lebih sederhana. PS: Sayangnya Safari terbaru (4.0.5) belum mendukung singkatan ini... (terima kasih @fireyy)
Itu saja. Apakah ada atribut lain yang bisa disingkat? Semua orang dipersilakan untuk mendiskusikannya bersama.