Jieun fancy lulugu mibanda CSS

Paké fon, wates, jeung Gambar jeung Ngahias headline

Headline nu umum dina kaca web paling. Kanyataanna, lumayan loba wae dokumen tulisan condong mibanda sahanteuna hiji headline kitu nu nyaho judul naon nu nuju maca. headline ieu disandi ngagunakeun HTML pos elemen - h1, H2, h3, h4, h5, sarta h6.

Dina sababaraha situs, Anjeun bisa manggihan yén headline nu disandi tanpa ngagunakeun elemen ieu. Gantina, headline bisa make ayat kalawan atribut husus kelas ditambahkeun kana éta hal, atawa babagian nu mibanda elemen kelas. Alesan Kuring mindeng ngadéngé ngeunaan prakték lepat ieu téh yén desainer "teu resep cara lulugu kasampak". Sacara standar, lulugu dipintonkeun dina kandel sarta aranjeunna gedé dina ukuranana, hususna elemen h1 na H2 nu nembongkeun di ukuranana font loba nu leuwih gede ti sesa téks kaca urang. Terus di pikiran ieu mung katingal standar unsur ieu! Kalawan CSS, anjeun tiasa ngadamel pos katingal kumaha ogé rék! Anjeun tiasa ngarobah ukuran font, nyabut kandel, sarta jadi leuwih. Lulugu nu cara ditangtoskeun pikeun kode headline kaca urang. Di dieu aya sababaraha alesan naha.

Naha Paké pos Tags Tinimbang DIVs jeung styling

Pilarian mesin Kawas pos Tags


Ieu alesan pangalusna ngagunakeun lulugu, jeung dipake ku maranehna di urutan anu bener (ie. H1, teras H2, teras h3, jsb). mesin pencari méré weighting pangluhurna pikeun téks kaasup di jero pos tag sabab aya hiji nilai semantik keur téks éta. Dina basa sejen, ku panyiri kaca judul H1, anjeun nyaritakeun lancah search engine nu éta teh # 1 fokus kaca. lulugu H2 boga # 2 tekenan, jeung saterusna.

Anjeun ngadon & # 39; t kudu Inget kelas Naon maneh dipake keur ngartikeun headline anjeun

Lamun anjeun nyaho yén sakabéh kaca Wéb anjeun bade gaduh hiji H1 nu geus kandel, 2em, sarta konéng, teras anjeun tiasa nangtukeun yen sakali dina stylesheet anjeun sarta dipigawé. 6 bulan ka hareup, nalika nu nuju nambahkeun kaca séjén, anjeun ngan nambahan hiji tag H1 kana luhureun kaca anjeun, anjeun teu kudu balik deui ka kaca séjén pikeun manggihan naon gaya ID atanapi kelas anjeun dipake keur ngartikeun utama headline na sub-huluna.

Aranjeunna Nyadiakeun A Page Outline Strong

Outlines nyieun téks gampang maca. Éta naha paling sakola AS diajar siswa nulis hiji outline saméméh maranéhna nulis kertas. Lamun anjeun maké pos tag dina format outline, teks anjeun boga struktur jelas anu janten katempo kacida gancangna. Tambah, aya parabot nu bisa marios kaca outline nyadiakeun synopsis, sarta ieu ngandelkeun pos tag pikeun struktur outline.

Page Anjeun Badé Jieun Rasa Komo jeung Styles dipareuman

Teu sadaya jelema bisa nempo atawa make gaya cadar (jeung ieu asalna deui # 1 - mesin pencari nempo eusi (tulisan) kaca anjeun, sanes gaya cadar). Lamun make pos tag, nu nuju nyieun kaca anjeun beuki diaksés sabab headline nyadiakeun informasi nu tag DIV moal ngalakukeunana.

Éta nyaéta mantuan Pikeun Screen Pamiarsa Jeung Aksesibilitas Website

pamakéan ditangtoskeun tina lulugu nyiptakeun struktur logis mun dokumen a. Ieu naon pamiarsa layar bakal make kana "baca" loka pikeun hiji pamaké kalawan impairment visi, nyieun situs anjeun diaksés nepi jalma kalawan disabilities.

Gaya nu téks jeung Font of headline anjeun

Cara panggampangna pikeun mindahkeun jauh ti "badag, kandel, sarta awon" masalah pos tag anu keur gaya tulisan nu cara nu rek aranjeunna kasampak. Kanyataanna, nalika Kuring digawé dina ramatloka anyar, kuring ilaharna nulis paragraf, h1, H2, sarta gaya h3 hal munggaran. Kuring biasana lengket kalayan ngan font kulawarga sarta ukuranana / beurat. Contona, ieu bisa jadi hiji lambar gaya awal pikeun situs anyar (ieu ngan sabagian conto gaya anu bisa dipaké):

awak, html {margin: 0; padding: 0; } P {font: 1em Arial, Jenéwa, Helvetica, sans-serif; } H1 {font: kandel 2em "Times New Roman", Times, serif; } H2 {font: kandel 1.5em "Times New Roman", Times, serif; } H3 {font: kandel 1.2em Arial, Jenéwa, Helvetica, sans-serif; }

Anjeun tiasa ngarubah fon of headline Anjeun atawa ngarobah gaya tulisan atawa malah warna téks . Sakabéh ieu bakal ngahurungkeun anjeun "awon" headline kana hal nu leuwih vibrant na di ngajaga kalayan design Anjeun.

h1 {font: kandel 2em italic / 1em "Times New Roman", "MS Serif", "New York", serif; margin: 0; padding: 0; Warna: # e7ce00; }

Wates Dupi Baju Up headline

Wates nu cara hébat pikeun ngaronjatkeun headline Anjeun. Sarta wates anu gampang pikeun nambahkeun. Tapi ulah poho kana ékspérimén kalawan wates - anjeun teu butuh wates dina unggal sisi headline Anjeun. Tur anjeun tiasa nganggo leuwih ti wates ngan polos pikaboseneun.

h1 {font: kandel 2em italic / 1em "Times New Roman", "MS Serif", "New York", serif; margin: 0; padding: 0; Warna: # e7ce00; Wates-luhur: padet # e7ce00 sedeng; Wates-handap: dotted # e7ce00 ipis; lebar: 600px; }

Kuring ditambahkeun wates luhur jeung handap ka judul sampel kuring pikeun ngawanohkeun sababaraha gaya visual metot. Anjeun bisa nambahkeun wates sagala cara nu hayang ngahontal Desain ala rék.

Tambahkeun Gambar Latar kana headline anjeun Pikeun Komo deui Pizazz

Loba loka Ramat boga bagian header di luhur kaca nu ngawengku hiji headline - ilaharna judul situs na grafis hiji. Paling désainer pikir ieu salaku dua elemen misah, tapi anjeun teu kudu. Mun grafis nu aya ngan pikeun ngahias headline, teras naha henteu nambahan eta kana gaya judul?

h1 {font: kandel 3em italic / 1em "Times New Roman", "MS Serif", "New York", serif; latar: #fff url ( "fancyheadline.jpg") ngulang-x handap; padding: 0.5em 0 90px 0; téks-align: puseur; margin: 0; Wates-handap: padet # e7ce00 0.25em; Warna: # e7ce00; }

The trik ka judul ieu nu kuring nyaho gambar abdi 90 piksel jangkung. Ku kituna kuring ditambahkeun padding ka handapeun headline ngeunaan 90px (padding: 0,5 0 90px 0p;). Anjeun tiasa maén jeung margins, garis-jangkungna, jeung padding pikeun meunangkeun teks headline pikeun nembongkeun kahayang dimana rék eta.

Hiji hal inget nalika maké gambar éta lamun boga ramatloka responsif (nu kedah) sareng perenah nu robah dumasar kana ukuran layar tur alat eta, Anjeun headline moal salawasna jadi ukuran anu sarua. Lamun perlu headline anjeun jadi ukuranana pasti, ieu bisa ngabalukarkeun masalah. Ieu salah sahiji alesan kunaon kuring umum ulah Gambar tukang dina judul, sabab tiis sakumaha maranéhna kadangkala bisa ngungkaban.

Gambar ngagantian dina headline

Ieu téhnik séjén populér pikeun désainer Web sabab ngidinan Anjeun pikeun nyieun hiji headline grafis jeung ngaganti téks ti tag judul jeung gambar éta. Ieu truthfully hiji prakték antiqued ti web désainer tadi aksés ka pisan sababaraha fon na hayang make fon leuwih aheng dina karya maranéhanana. Kebangkitan fon web geus bener dirobah kumaha désainer kaanggo loka. Headline tiasa ayeuna atur dina rupa-rupa fon na Gambar jeung pamadegan fon study anu henteu panjang diperlukeun. Salaku misalna, anjeun ngan bakal manggihan CSS Gambar ngagantian pikeun headline dina loka heubeul nu can diropéa mun lila-beuki modern.

Aslina artikel ku Jennifer Krynin. Diédit ku Jeremy Girard on 9/6/17