CSS - Kutipan: Menambah Personalitas ke Teks Anda
Halo teman-teman desainer web yang sedang belajar! Hari ini, kita akan mendalami properti CSS yang sering diabaikan tapi menarik: kutipan. Sebagai guru komputer tetangga yang ramah, saya sangat gembira untuk membagikan permata kecil ini kepada Anda. Percayalah, pada akhir panduan ini, Anda akan mengetik kutipan seperti seorang profesional!
Apa Itu Kutipan CSS?
Sebelum kita masuk ke detil, mari kita mengerti apa itu kutipan dalam CSS. Kutipan tidak hanya untuk menekankan ucapan atau mengutip sumber; dalam CSS, kutipan adalah alat yang kuat untuk secara otomatis menambah tanda kutipan ke konten Anda. Itu seperti memiliki robot kecil yang mengikuti teks Anda, menambah tanda kutipan kecil tersebut dimana Anda memerintahkan!
Nilai Yang Mungkin
mari kita mulai dengan nilai yang berbeda yang dapat kita gunakan dengan properti quotes. Ini adalah tabel ringkas untuk menyummarisakan:
| Nilai | Deskripsi |
|---|---|
| none | Tidak ada kutipan yang digunakan |
<string> |
Menentukan kutipan yang digunakan |
| initial | Mengatur ke nilai default |
| inherit | Mewarisi dari elemen induk |
| auto | Browser menentukan berdasarkan bahasa |
Sekarang, mari kitauraikan ini satu per satu.
Terapkan Pada
Sebelum kita mendalami lebih jauh, penting untuk dicatat bahwa properti quotes diterapkan ke semua elemen. Namun, hal ini paling sering digunakan dengan elemen <q> dan <blockquote>. Pergunakanlah ini seperti rempah universal - Anda bisa menambahkannya ke setiap elemen, tapi rasanya terbaik dengan makanan tertentu!
Sintaks
Sintaks dasar untuk menggunakan kutipan adalah mudah:
selector {
quotes: value;
}Mudah, kan? Sekarang, mari kita lihat nilai masing-masing secara detil.
CSS quotes - nilai none
Ketika Anda mengatur quotes: none, Anda secara esensial memberitahu CSS, "Tidak ada kutipan, tolong!" Ini berguna ketika Anda ingin menimpa tanda kutipan default. mari kita lihat contoh:
q {
quotes: none;
}<p>Dia mengatakan <q>Hello, world!</q></p>Dalam kasus ini, teks dalam tag <q> tidak akan memiliki tanda kutipan. Itu seperti bisik tanpa benar-benar menurunkan suara Anda!
CSS quotes - nilai <string>
Ini adalah dimana kesenangan dimulai! Anda dapat menentukan secara tepat karakter apa yang Anda inginkan untuk kutipan Anda. Sintaksnya seperti ini:
selector {
quotes: "open-quote1" "close-quote1" "open-quote2" "close-quote2";
}mari kita coba contoh:
q {
quotes: "<<" ">>" "(" ")";
}<p>Dia menjerit <q>What a <q>wonderful</q> day!</q></p>Ini akan ditampilkan sebagai: She exclaimed <<What a (wonderful) day!>>
Apakah itu menarik? Itu seperti memberikan teks Anda facelift!
CSS quotes - nilai initial
Nilai initial mengatur properti ke nilai defaultnya. Itu seperti menekan tombol reset pada kutipan Anda. Untuk sebagian besar browser, ini setara dengan:
q {
quotes: '"' '"' "'" "'";
}Ini memberikan Anda tanda kutipan standar Bahasa Inggris: kutipan ganda untuk tingkat luar, kutipan tunggal untuk tingkat dalam.
CSS quotes - nilai auto
Nilai auto adalah seperti asisten cerdas untuk kutipan Anda. Itu memilih tanda kutipan yang sesuai berdasarkan bahasa dokumen Anda. Sebagai contoh:
:root {
quotes: auto;
}Sekarang, jika HTML Anda memiliki lang="fr", itu mungkin menggunakan "guillemets" untuk teks Prancis. Itu seperti memiliki ahli kutipan multibahasa di tim Anda!
CSS quotes - Menggunakan pseudo-class :lang
Ini adalah dimana kita bisa menjadi sangat keren. Pseudo-class :lang memungkinkan kita untuk menentukan kutipan yang berbeda untuk bahasa yang berbeda. mari kita cek ini:
:root { quotes: auto; }
:lang(en) q { quotes: '"' '"' "'" "'"; }
:lang(fr) q { quotes: "«" "»" "‹" "›"; }
:lang(de) q { quotes: "„" """ "‚" "'"; }Ini menetapkan gaya kutipan yang berbeda untuk Bahasa Inggris, Prancis, dan Jerman. Itu seperti mengajarkan situs web Anda untuk berbicara dalam bahasa-bahasa yang berbeda!
Menggabungkan Semua
mari kita buat contoh yang lebih kompleks untuk melihat bagaimana semua ini bekerja bersama:
<p lang="en">Dia mengatakan, <q>Saya cinta <q>CSS</q>!</q></p>
<p lang="fr">Elle a dit, <q>J'adore <q>CSS</q> !</q></p>
<p lang="de">Sie sagte, <q>Ich liebe <q>CSS</q>!</q></p>:root { quotes: auto; }
:lang(en) q { quotes: '"' '"' "'" "'"; }
:lang(fr) q { quotes: "«" "»" "‹" "›"; }
:lang(de) q { quotes: "„" """ "‚" "'"; }
q::before { content: open-quote; }
q::after { content: close-quote; }Ini akan menampilkan setiap kalimat dengan tanda kutipan sesuai bahasa. Itu seperti memiliki setypeset poliglot yang bekerja di situs web Anda!
Kesimpulan
Dan itu adalah semua, teman-teman! Kita telah melakukan perjalanan melalui dunia kutipan CSS, dari yang sederhana ke yang kompleks. Ingat, kutipan tidak hanya tentang tanda baca; mereka tentang menambah personalitas dan kontekst budaya ke teks Anda. Mereka adalah rempah dalam masakan teks Anda!
Sekarang, saat Anda melanjutkan perjalanan desain web Anda, jangan lupa untuk eksperimen dengan kutipan. Cobalah gaya yang berbeda, campurkan bahasa, dan lihat apa yang terbaik untuk situs Anda. Siapa tahu? Anda mungkin saja mengetik kutipan Anda ke stardom desain web!
Hati-hati mengetik, dan may kutipan Anda selalu tepat!
Credits: Image by storyset