Gunakan Font, Sempadan, dan Imej untuk Menghias Headlines
Tajuk umum adalah perkara biasa pada kebanyakan halaman web. Sebenarnya, hampir semua dokumen teks cenderung mempunyai sekurang-kurangnya satu tajuk supaya anda tahu tajuk apa yang anda baca. Tajuk-tajuk utama ini dikodkan menggunakan elemen tajuk HTML - h1, h2, h3, h4, h5, dan h6.
Di sesetengah laman web, anda mungkin mendapati tajuk utama dikodkan tanpa menggunakan unsur-unsur ini. Sebaliknya, tajuk utama boleh menggunakan perenggan dengan atribut kelas tertentu yang ditambahkan kepada mereka, atau bahagian dengan elemen kelas. Sebab saya sering mendengar tentang amalan yang salah ini ialah pereka "tidak suka cara melihat tajuk". Secara lalai, tajuk dipaparkan dengan huruf tebal dan saiznya lebih besar, terutamanya unsur h1 dan h2 yang memaparkan saiz font yang lebih besar daripada seluruh teks halaman. Perlu diingat bahawa ini hanya melihat lalai unsur-unsur ini! Dengan CSS, anda boleh melihat rupa namun anda mahu! Anda boleh menukar saiz fon, keluarkan tebal, dan sebagainya. Tajuk adalah cara yang betul untuk mengetepikan tajuk utama halaman. Berikut adalah beberapa sebab mengapa.
Kenapa Gunakan Tag Tajuk Daripada DIV dan Styling
Search Engines Like Tags Tag
Inilah alasan terbaik untuk menggunakan tajuk, dan gunakannya dalam susunan yang betul (iaitu h1, kemudian h2, kemudian h3, dan lain-lain). Enjin carian memberi bobot tertinggi kepada teks yang dimasukkan di dalam tajuk tajuk kerana terdapat nilai semantik pada teks itu. Dengan kata lain, dengan melabel tajuk halaman anda H1, anda memberitahu labah-labah enjin gelintar bahawa itu adalah tumpuan # 1 halaman. Tajuk H2 mempunyai penekanan # 2, dan sebagainya.
Anda Tidak Perlu Ingat Kelas Apa Yang Anda Digunakan Untuk Menentukan Tajuk Anda
Apabila anda tahu bahawa semua laman Web anda akan mempunyai H1 yang tebal, 2em, dan kuning, maka anda boleh menentukan sekali dalam stylesheet anda dan dilakukan. 6 bulan kemudian, apabila anda menambah halaman lain, anda hanya menambah tag H1 ke bahagian atas halaman anda, anda tidak perlu kembali ke laman lain untuk mengetahui gaya ID atau kelas yang digunakan untuk menentukan utama tajuk utama dan sub-kepala.
Mereka Memberi Garis Besar Halaman Yang Kuat
Garis besar membuat teks lebih mudah dibaca. Itulah sebabnya kebanyakan sekolah di AS mengajar pelajar menulis garis besar sebelum menulis kertas itu. Apabila anda menggunakan tag tajuk dalam format garis besar, teks anda mempunyai struktur yang jelas yang jelas dengan cepat. Selain itu, terdapat alat yang boleh menyemak garis panduan untuk menyediakan sinopsis, dan ini bergantung pada tag tajuk untuk struktur garisan.
Halaman Anda Akan Membuat Sense Bahkan Dengan Gaya Dimatikan
Bukan semua orang boleh melihat atau menggunakan helaian gaya (dan ini kembali ke # 1 - enjin carian melihat kandungan (teks) halaman anda, bukan hela gaya). Jika anda menggunakan tag tajuk, anda membuat laman anda lebih mudah kerana tajuk utama memberikan maklumat bahawa teg DIV tidak akan.
Ia Membantu Pembaca Skrin Dan Kebolehaksesan Laman Web
Penggunaan tajuk yang betul membuat struktur logik kepada dokumen. Inilah pembaca skrin yang akan digunakan untuk "membaca" tapak kepada pengguna yang mempunyai masalah penglihatan, menjadikan laman web anda dapat diakses oleh orang kurang upaya.
Gaya Teks dan Fon Tajuk Anda
Cara paling mudah untuk menjauhkan diri dari masalah tag tajuk "besar, tebal, dan hodoh" adalah dengan gaya teks cara yang anda mahu mereka lihat. Sebenarnya, ketika saya bekerja di laman web baru, saya biasanya menulis perenggan, h1, h2, dan h3 gaya perkara pertama. Saya biasanya melekat dengan keluarga font dan saiz / berat sahaja. Sebagai contoh, ini mungkin satu helaian gaya awal untuk tapak baru (ini hanya beberapa contoh gaya yang boleh digunakan):
badan, html {margin: 0; padding: 0; } p {font: 1em Arial, Geneva, Helvetica, sans-serif; } h1 {font: bold 2em "Times New Roman", Times, serif; } h2 {font: bold 1.5em "Times New Roman", Times, serif; } h3 {font: bold 1.2em Arial, Geneva, Helvetica, sans-serif; }Anda boleh mengubah fon tajuk anda atau menukar gaya teks atau warna teks . Semua ini akan mengubah tajuk "hodoh" anda menjadi sesuatu yang lebih bersemangat dan selaras dengan reka bentuk anda.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif; margin: 0; padding: 0; warna: # e7ce00; }Borders Boleh Bangun Headlines
Sempadan adalah cara terbaik untuk meningkatkan tajuk utama anda. Dan sempadan mudah ditambah. Tetapi jangan lupa untuk bereksperimen dengan sempadan - anda tidak memerlukan sempadan di setiap sisi tajuk utama anda. Dan anda boleh menggunakan lebih daripada sekadar sempadan membosankan yang jelas.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif; margin: 0; padding: 0; warna: # e7ce00; border-top: medium padat # e7ce00; sempadan bawah: bertitik # e7ce00 nipis; lebar: 600px; }Saya menambah sempadan atas dan bawah ke tajuk sampel saya untuk memperkenalkan beberapa gaya visual yang menarik. Anda boleh menambah sempadan dengan cara yang anda mahu mencapai gaya reka bentuk yang anda mahukan.
Tambah Imej Latar Belakang ke Tajuk Anda Untuk Lebih Banyak Pizazz
Banyak laman web mempunyai bahagian header di bahagian atas halaman yang merangkumi tajuk utama - biasanya tajuk tapak dan grafik. Kebanyakan pereka fikir ini sebagai dua elemen berasingan, tetapi anda tidak perlu. Jika grafik itu ada hanya untuk menghias tajuk utama, maka mengapa tidak menambahnya kepada gaya tajuk?
h1 {font: bold italic 3em / 1em "Times New Roman", "MS Serif", "New York", serif; latar belakang: #fff url ("fancyheadline.jpg") berulang-x bawah; padding: 0.5em 0 90px 0; teks-align: center; margin: 0; sempadan bawah: pepejal # e7ce00 0.25em; warna: # e7ce00; }Silap mata untuk tajuk ini ialah saya tahu imej saya adalah 90 piksel. Jadi saya menambah padding ke bahagian bawah tajuk utama 90px (padding: 0.5 0 90px 0p;). Anda boleh bermain dengan margin, ketinggian baris, dan padding untuk mendapatkan teks tajuk utama untuk memaparkan tepat di mana anda mahu.
Satu perkara yang harus diingat apabila menggunakan imej ialah jika anda mempunyai laman web yang responsif (yang sepatutnya) dengan tata letak yang berubah berdasarkan saiz skrin dan peranti, tajuk anda tidak akan selalu menjadi ukuran yang sama. Jika anda memerlukan tajuk utama anda untuk menjadi saiz yang tepat, ini boleh menyebabkan masalah. Ini adalah salah satu sebab mengapa saya pada umumnya mengelakkan imej latar belakang dalam tajuk utama, seperti yang kerap kerana mereka kadang-kadang dapat melihat.
Penggantian Imej di tajuk utama
Ini adalah satu lagi teknik popular untuk pereka Web kerana ia membolehkan anda membuat tajuk grafik dan menggantikan teks tag tajuk dengan imej itu. Ini benar-benar satu amalan antiqued dari pereka web mempunyai akses kepada fon yang sangat sedikit dan mahu menggunakan lebih banyak fon eksotik dalam kerja mereka. Kebangkitan fon web telah benar-benar berubah bagaimana pereka mendekati laman web. Headlines kini boleh ditetapkan dalam pelbagai fon dan imej dengan font yang dibenamkan tidak lagi diperlukan. Oleh itu, anda hanya akan mencari pengganti imej CSS untuk tajuk utama di tapak lama yang belum dikemas kini dengan amalan yang lebih moden.
Artikel asal oleh Jennifer Krynin. Diedit oleh Jeremy Girard pada 9/6/17