Menggunakan Harta Teknis-Inden dan Pengikut Sibling yang Bersebelahan
Reka bentuk web yang baik sering mengenai tipografi yang baik. Memandangkan begitu banyak kandungan laman web dipaparkan sebagai teks, dapat gaya bahawa teks menjadi menarik dan berkesan adalah kemahiran penting untuk memiliki sebagai pereka web. Malangnya, kami tidak mempunyai tahap kawalan tipografi dalam talian yang kami cetak. Ini bermakna bahawa kita tidak boleh selalu gaya gaya teks di laman web dengan cara yang sama yang boleh kita lakukan dalam bahagian yang dicetak.
Satu gaya perenggan biasa yang sering anda lihat dalam cetakan (dan yang kita boleh mencipta semula dalam talian) adalah di mana baris pertama perenggan itu diindentikasi satu ruang tab . Ini membolehkan pembaca melihat mana satu perenggan bermula dan satu lagi berakhir.
Anda tidak melihat gaya visual ini seperti di halaman web kerana pelayar, secara lalai, memaparkan perenggan dengan ruang di bawahnya sebagai cara untuk menunjukkan di mana satu berakhir dan yang lain bermula, tetapi jika anda ingin gaya halaman untuk mencetak- gaya indent terinspirasi pada perenggan, anda boleh berbuat demikian dengan sifat gaya indent teks .
Sintaks bagi harta ini adalah mudah. Berikut ialah cara anda menambah teks kepada semua perenggan dalam dokumen.
p {text-indent: 2em; }Menyesuaikan Inden
Salah satu cara yang anda boleh menentukan tepat perenggan untuk indent, anda boleh menambah kelas kepada perenggan yang anda mahu diinden, tetapi itu memerlukan anda mengedit setiap perenggan untuk menambahkan kelas kepadanya. Itu tidak cekap dan tidak mengikuti amalan terbaik kod HTML .
Sebaliknya, anda harus mempertimbangkan apabila anda memasuki perenggan. Anda indent paragraf yang terus mengikuti perenggan lain. Untuk melakukan ini, anda boleh menggunakan pemilih saudara yang bersebelahan. Dengan pemilih ini, anda memilih setiap perenggan yang segera didahului oleh perenggan lain.
p + p {teks-indent: 2em; }Memandangkan anda indentari baris pertama, anda juga harus memastikan bahawa perenggan anda tidak mempunyai ruang tambahan antara mereka (yang merupakan lalai penyemak imbas). Secara gaya, anda harus mempunyai ruang antara perenggan atau indent baris pertama, tetapi tidak kedua-duanya.
p {margin-bottom: 0; padding-bottom: 0; } p + p {margin-top: 0; padding-top: 0; }Inden Negatif
Anda juga boleh menggunakan harta indent teks , bersama-sama dengan nilai negatif, untuk menyebabkan permulaan garis untuk pergi ke kiri berbanding dengan hak seperti inden normal. Anda boleh melakukan ini jika garis bermula dengan tanda petikan supaya aksara petikan muncul di margin kecil di sebelah kiri perenggan dan huruf itu sendiri masih membentuk penjajaran kiri yang baik.
Katakanlah, contohnya, bahawa anda mempunyai perenggan yang merupakan keturunan blockquote dan anda mahu ia diindentifikasi secara negatif. Anda boleh menulis CSS ini:
blockquote p {text-indent: -.5em; }Ini akan memberi permulaan perenggan, yang mungkin termasuk watak kutipan pembukaan, untuk sedikit berpindah ke kiri untuk membuat bantalan yang menggantung.
Mengenai Margin dan Padding
Sering kali dalam reka bentuk web, anda menggunakan nilai margin atau padding untuk memindahkan elemen dan membuat ruang putih. Walau bagaimanapun, sifat tersebut tidak berfungsi untuk mencapai kesan perenggan yang diandaikan. Sekiranya anda memohon sama ada nilai-nilai ini kepada perenggan, keseluruhan teks ayat itu, termasuk setiap baris, akan dijarakkan bukan hanya baris pertama.