Html huruf pertama dengan warna berbeda. Huruf Pertama Kelas Pseudo atau cara menyorot huruf pertama di css
20 Desember 2015
Halo semuanya, hari ini saya memiliki informasi singkat yang akan membantu Anda membuat huruf pertama di elemen mana pun di situs menggunakan css. Pseudo-class:first-letter akan membantu kita dalam hal ini. Untuk pemula, saya menyarankan Anda untuk membaca artikel tentang apa itu pseudo-class.
huruf pertama dalam tindakan
Jadi, semuanya sangat sederhana. Katakanlah kita memiliki teks - 3 paragraf. Di paragraf pertama, Anda perlu menyorot huruf pertama, seperti yang sering dilakukan di banyak buku. Artinya, surat khusus ini perlu diberi gayanya sendiri: ukuran font, warna, dll.
Hal ini dilakukan dengan menggunakan kelas semu: first-letter , yang harus ditetapkan ke elemen di mana teks kita berada secara langsung. Namun jika kita melakukan ini:
P:huruf pertama (warna: merah)
Menurut Anda, di paragraf manakah huruf pertama akan berubah menjadi merah? Benar, di semua paragraf. Tapi kita hanya butuh yang pertama! Solusi:
— tetapkan kelas gaya pada paragraf pertama dan gunakan pemilih ini untuk mendesain surat
— pilih paragraf pertama menggunakan properti anak pertama atau anak ke-n
Solusi 1 dalam kode:
Abzac1:huruf pertama( gaya… )
Sebelum itu, kita perlu memberikan paragraf pertama kelas yang sesuai. Jika Anda tidak tahu cara melakukannya, lihat artikel ini.
Solusi 2 dalam kode:
P:anak pertama:huruf pertama( gaya… )
Seperti yang Anda lihat, kami menggunakan dua kelas semu dan memilih paragraf pertama dan huruf pertama di dalamnya. Cukup nyaman juga.
Jadi, kami menemukan 2 solusi paling sederhana. Baca blog ini untuk mempelajari hal bermanfaat lainnya.
Selamat siang, ahli pembuatan situs. Publikasi hari ini akan membahas topik mendesain konten teks. Inilah sebabnya Anda akan belajar cara mengatur huruf kapital huruf css- artinya, kenali beberapa opsi untuk membuat drop cap dan, tentu saja, Anda dapat mencoba semuanya dalam praktik. Nah, sekarang mari kita beralih ke bagian yang menyenangkan!
Mari kita ubah teksnya
Berkat cascading style sheet, Anda dapat mengubah karakter pertama blok dan keseluruhan teks. Saya akan memberi tahu Anda bagaimana Anda bisa melakukan keduanya. Selain itu, semua alat yang disebutkan dalam artikel ini didukung dalam tiga tingkat bahasa: css1, css2, css2.1 dan css3.
Saya akan mulai dengan properti menarik yang mengubah keseluruhan konten teks di dipilih. Ini transformasi teks.
Elemen bernama dapat mengubah karakter menjadi huruf besar, huruf kecil, dan juga mengatur setiap karakter pertama sebuah kata menjadi huruf kapital. Saya menulis lebih banyak tentang nilai-nilai di tabel.
Sekarang, untuk memperkuat materi teori, lihatlah sebuah contoh.
Perhatian!
!Besok ada diskon untuk semua produk kosmetik!
Promosi ini berlaku di seluruh cabang yang berada di kota Anda.
Membuat topi drop
Jika Anda belum mengetahui apa yang dimaksud dengan istilah "drop cap", maka sekaranglah saatnya untuk mencari tahu, karena terkait langsung dengan topik yang sedang hangat dibicarakan.
Huruf kapital (atau kadang disebut inisial) adalah huruf pertama suatu bab, yang berbeda dari huruf lainnya ukuran besar, warna dan dalam beberapa kasus bahkan desain font. Dalam kehidupan nyata, contoh surat semacam itu dapat ditemukan pada manuskrip dan buku kuno.
Ada beberapa cara untuk membuat inisial. Seringkali simbol tersebut disorot dengan tag bahasa markup dan kemudian properti tertentu ditentukan dalam gaya yang memodifikasinya. Namun ini adalah cara yang bagus publikasi ini berbicara tentang mekanisme css (yang menurut saya memang demikian dalam hal ini Jauh lebih logis dan nyaman untuk digunakan).
Untuk mengatasi masalah ini, Anda dapat menggunakan alat seperti.
Jadi, dalam hal ini kita menggunakan:huruf pertama. Seperti semua elemen semu, elemen ini ditugaskan ke pemilih menggunakan titik dua. Setelah semua aturan style sheet, properti ditunjukkan. Namun, Anda hanya dapat menerapkan properti yang berhubungan dengan pengeditan font, indentasi, warna, latar belakang, bidang dan perbatasan.
Saya sarankan Anda mempertimbangkannya contoh konkrit. Implementasi yang disajikan program kecil, Saya memutuskan untuk membuat bukan hanya huruf awal berwarna, tetapi mengisinya dengan bunga. Untuk melakukan ini, Anda perlu menggunakan beberapa trik rumit dengan mengatur warna font menjadi transparan dan mengisi surat dengan gambar yang dipilih.
Paragraf ini berisi kalimat dengan isi yang sangat menarik.
Ayo lanjutkan cerita yang menarik dan di paragraf berikutnya.
Hasil yang dihasilkan terlihat sangat menarik dan tidak biasa, yang merupakan solusi ideal.
Seperti yang Anda lihat, topik ini sangat sederhana. Dibawa oleh saya kode program Anda dapat dengan mudah menggunakannya untuk sumber daya web Anda, memodifikasi dan menyesuaikannya agar sesuai dengan gaya Anda.
Jika materi yang disampaikan bermanfaat bagi anda, maka berlanggananlah update blog saya dan jangan lupa untuk membagikan ilmu yang anda peroleh (dan tentunya link ke blog saya) kepada teman-teman anda. Saya harap Anda beruntung!
Sampai jumpa!
Hormat kami, Roman Chueshov
Setelah membaca artikel ini, secara otomatis Anda dapat menampilkan huruf pertama artikel tersebut di website Anda ukuran besar, seperti yang mereka lakukan di surat kabar dan majalah.
Jika masih belum jelas, dibawah ini adalah gambar beserta contohnya. Saya akan mengatakan bahwa pengetahuan yang diperoleh akan memungkinkan Anda membuat huruf kapital serupa untuk semua paragraf artikel, meskipun secara manual.
Saya mengusulkan untuk melakukan ini dengan dua cara: menggunakan CSS3 dan kombinasi CSS+HTML klasik (lintas-browser).
Mari kita coba membuat sesuatu yang serupa sekarang. Mulai secara otomatis menggunakan CSS3.
Cara membuat huruf kapital secara otomatis
DI DALAM metode ini Dengan menggunakan beberapa parameter CSS3, kami mengotomatiskan proses penggunaan huruf besar pada huruf pertama artikel. Yang kita butuhkan hanyalah menambahkan baris berikut ke file style (style.css):
p:anak pertama:huruf pertama ( float: kiri; warna: #0078BF; ukuran font: 75px; tinggi garis: 60px; padding-atas: 4px; padding-kanan: 8px; padding-kiri: 3px; font -keluarga: Georgia;
p:anak-pertama:huruf pertama ( float : kiri ; warna : #0078BF ; ukuran font : 75px ; tinggi garis : 60px ; padding-atas : 4px ; padding-kanan : 8px ; padding-kiri : 3px ; font -keluarga: Georgia;
Izinkan saya menjelaskan sedikit: surat bahasa inggris P(yang pertama) adalah sebuah tag
Menunjuk paragraf (mirip dengan menekan tombol Enter saat mengetik artikel). Struktur artikel Anda berisi tag-tag ini ketika Anda memulai paragraf baru. Di sini kami menetapkan parameter yang diperlukan untuk itu.
Apa yang muncul pada kode yang disajikan setelah surat ini P, yaitu first-child:first-letter, memungkinkan Anda menghitung huruf pertama dalam sebuah artikel secara otomatis.
Namun, kode yang diusulkan tidak akan cukup karena Anda perlu mengetahui nama kelas tempat paragraf ini berada. Ini juga dilakukan dengan dua cara, yang saya jelaskan di video podcast berikut:
Ada juga sisi negatifnya penggantian otomatis menggunakan CSS3 - browser lama tidak mendukung teknologi ini. Sama untuk semi-browser Penjelajah Internet tidak ada dukungan fungsi serupa. Saya berharap sebagian besar pengguna Internet akan segera beralih ke browser normal yang memungkinkan Anda menerapkan hal-hal yang sebelumnya tidak dapat diakses.
Membuat huruf kapital lintas browser secara manual
Pada cara ini, Anda harus menentukan secara manual setiap huruf yang ingin dijadikan kapital. Plus metode ini adalah Anda tidak hanya dapat membuat huruf pertama menjadi besar, tetapi juga huruf apa pun dalam teks. Bahkan, Anda bisa membuat setiap paragraf dengan huruf kapital- tidak memakan banyak waktu.
Untuk mengimplementasikan ini, Anda perlu menulis nama kelas apa pun dengan atribut dari contoh di atas di file style.css. Ini akan terlihat seperti ini (saya datang dengan kelas bigletter):
Bigletter ( float: kiri; warna: #0078BF; ukuran font: 75px; tinggi garis: 60px; padding-atas: 4px; padding-kanan: 8px; padding-kiri: 3px; font-family: Georgia; )
Bigletter ( float : kiri ; warna : #0078BF ; ukuran font : 75px ; tinggi garis : 60px ; padding-atas : 4px ; padding-kanan : 8px ; padding-kiri : 3px ; font-family : Georgia ; )
Di sini kita memiliki semua atribut yang sama, hanya pada awalnya sedikit yang berubah: Saya menulis kelas baru dan tidak menggunakan tag P. Mengapa demikian - lebih lanjut tentang ini nanti.
Elemen semu huruf pertama dimaksudkan untuk mendesain huruf pertama suatu elemen. Tanda baca sebelumnya harus diformat bersama dengan huruf pertama. Sedikit lebih awal, sebelumnya versi CSS 2.1:huruf pertama hanya dapat digunakan dengan elemen blok. Dan sejak spesifikasi CSS 2.1, cakupannya telah diperluas, dan sekarang: huruf pertama tersedia untuk elemen apa pun.
Hanya gaya yang terkait dengan desain teks, batas, margin, dan warna yang dapat diterapkan ke elemen semu ini.