Agħmel l-Intestaturi Fancy ma 'CSS

Uża Fonts, Fruntieri, u Stampi Dekorati Punti Ewlenin

L-intestaturi huma komuni fil-biċċa l-kbira tal-paġni tal-web Fil-fatt, pjuttost kull dokument ta 'test għandu t-tendenza li jkollu mill-inqas intestatura waħda sabiex tkun taf it-titlu ta' dak li qed taqra. Dawn l-aħbarijiet huma kkodifikati bl-użu tal-elementi tal-intestatura HTML - h1, h2, h3, h4, h5 u h6.

F'xi siti, tista 'ssib li l-aħbarijiet huma kodifikati mingħajr l-użu ta' dawn l-elementi. Minflok, l-aħbarijiet jistgħu jużaw paragrafi b'attributi speċifiċi tal-klassi miżjuda magħhom, jew diviżjonijiet b'elementi tal-klassi. Ir-raġuni ta 'spiss nisma dwar din il-prattika żbaljata hija li d-disinjatur "ma jħobbx il-mod kif jidhru l-intestaturi". B'mod awtomatiku, l-intestaturi huma murija b'tipa grassa u huma ikbar fid-daqs, speċjalment l-elementi h1 u h2 li jidhru f'tipa ta 'daqs ferm ikbar mill-bqija tat-test ta' paġna. Iżomm f'moħħu li dan huwa biss il-ħarsa default ta 'dawn l-elementi! Ma 'CSS, tista' tagħmel intestatura tidher kemm trid! Tista 'tbiddel id-daqs tal-font, neħħi l-grassett, u ħafna aktar. L-intestaturi huma l-mod xieraq kif jiġu kklassifikati l-aħbarijiet ta 'paġna. Hawn huma xi raġunijiet għaliex.

Għaliex Użu Intestatura Tags Minflok DIVs u Styling

Magni ta 'Tiftix Bħall-Intestaturi tat-Titoli


Din hija l-aħjar raġuni biex tuża l-intestaturi, u tużahom fl-ordni korretta (ie h1, allura h2, allura h3, eċċ.). Il-magni ta 'riċerka jagħtu l-ogħla piż għat-test inklużi fit-titli ta' l-intestatura minħabba li hemm valur semantiku għal dak it-test. Fi kliem ieħor, billi tikkettja t-titlu tal-paġna tiegħek H1, tgħid lit-spider tal-magna tat-tiftix li dak huwa l-punt fokali # 1 tal-paġna. L-intestaturi H2 għandhom enfasi # 2, u l-bqija.

M'għandekx tiftakar liema Klassijiet Int Użati biex Tiddefinixxi Punti Ewlenin Tiegħek

Meta tkun taf li l-paġni kollha tal-Web tiegħek ser ikollhom H1 li huwa b'tipa grassa, 2em, u isfar, allura inti tista 'tiddefinixxi li darba fil-folja tal-istil tiegħek u jsir. 6 xhur wara, meta tkun qed iżżid paġna oħra, inti biss żid tabella H1 mal-quċċata tal-paġna tiegħek, m'għandekx tmur lura għal paġni oħra biex issib liema ID jew klassi tal-istil int użajt biex tiddefinixxi l-isem ewlieni headline u sub-heads.

Jipprovdu Skema qawwija ta 'Paġna

Id-deskrizzjonijiet jagħmlu t-test aktar faċli biex jinqara. Huwa għalhekk li ħafna mill-iskejjel Amerikani mgħallma lill-istudenti biex jiktbu kontorn qabel ma jiktbu l-karta Meta tuża tags ta 'l-intestatura f'format ta' kontorn, it-test tiegħek għandu struttura ċara li ssir evidenti malajr ħafna. Barra minn hekk, hemm għodod li jistgħu jirrevedu l-kontorn tal-paġna biex jipprovdu sinopsi, u dawn jiddependu fuq intestaturi ta 'intestatura għall-istruttura tal-qosor.

Il-Paġna Tiegħek tagħmel sens anke bl-istili mitfugħa

Mhux kulħadd jista 'jara jew juża folji tal-istil (u dan jidħol lura f'numru # - magni tat-tiftix jaraw il-kontenut (test) tal-paġna tiegħek, mhux il-folji tal-istil). Jekk tuża tags tal-intestatura, qed tagħmel il-paġni tiegħek aktar aċċessibbli minħabba li l-aħbarijiet jipprovdu informazzjoni li tabella DIV ma tkunx.

Jgħin għall-qarrejja tal-iskrin u l-aċċessibbiltà tal-websajt

L-użu xieraq tal-intestaturi joħloq struttura loġika għal dokument. Dan huwa dak li l-qarrejja tal-iskrin jużaw biex "jaqraw" sit lil utent b'indeboliment tal-vista, biex is-sit tiegħek ikun aċċessibbli għal persuni b'diżabilità.

Agħti t-Test u l-Fajl tal-Punti Ewlenin tiegħek

L-eħfef mod biex titbiegħed mill-problema "kbar, kuraġġużi u ikrah" ta 'l-intestatura hija l-istil tat-test bil-mod li tixtieq li tħares. Fil-fatt, meta qed naħdem fuq websajt ġdida, tipikament nikteb il-paragrafu, h1, h2, u h3 stili ewwel ħaġa. I normalment jeħel mal-familja u d-daqs / piż tat-tipa biss. Pereżempju, dan jista 'jkun folja ta' stil preliminari għal sit ġdid (dawn huma biss ftit stili ta 'eżempju li jistgħu jintużaw):

korp, html {marġini: 0; padding: 0; } p {font: 1em Arial, Ġinevra, Helvetica, sans-serif; } h1 {font: bold 2em "Times New Roman", Times, serif; } h2 {font: bold 1.5em "Times New Roman", Times, serif; } h3 {font: invalidu 1.2em Arial, Ġinevra, Helvetica, sans-serif; }

Tista 'timmodifika t-tipi ta' headline tiegħek jew tibdel l-istil tat-test jew saħansitra l- kulur tat - test . Dawn kollha jbiddlu l-intestatura "ikrah" tiegħek f'xi ħaġa aktar vibranti u konformi mad-disinn tiegħek.

h1 {font: korsiv qawwi 2em / 1em "Times New Roman", "MS Serif", "New York", serif; marġni: 0; padding: 0; kulur: # e7ce00; }

Il-Fruntieri jistgħu jilbsu l-Punti Ewlenin

Il-fruntieri huma mod tajjeb ħafna biex itejbu l-aħbarijiet tiegħek. U l-fruntieri huma faċli biex jiżdiedu. Imma tinsiex tesperimenta mal-fruntieri - m'għandekx bżonn fruntiera fuq kull naħa tat-titlu tiegħek. U tista 'tuża aktar minn sempliċiment fruntieri lixxi.

h1 {font: korsiv qawwi 2em / 1em "Times New Roman", "MS Serif", "New York", serif; marġni: 0; padding: 0; kulur: # e7ce00; top fuq il-fruntiera: solidu # e7ce00 medju; qiegħ tal-qiegħ: bit-tikek # e7ce00 irqaq; wisa ': 600px; }

I żied fruntiera ta 'fuq u ta' isfel mal-intestatura tal-kampjun tiegħi biex jintroduċi xi stili viżivi interessanti. Inti tista 'żżid il-fruntieri b'xi mod li ridt tilħaq l-istil tad-disinn li trid.

Żid Stampi Sfond għall-Punti Ewlenin Tiegħek Għal Anke Pizazz

Bosta siti tal-web għandhom sezzjoni header fil-quċċata tal-paġna li tinkludi headline - tipikament it-titolu tas-sit u grafika. Ħafna disinjaturi jaħsbuha bħala żewġ elementi separati, iżda m'għandekx għalfejn. Jekk il-grafika hemm biss biex iżejnu l-intestatura, allura għaliex ma żżidhiex mal-intestatura stili?

h1 {font: korsiv qawwi 3em / 1em "Times New Roman", "MS Serif", "New York", serif; isfond: #fff url ("fancyheadline.jpg") irrepeti-x qiegħ; ikkuttunar: 0.5em 0 90px 0; text-align: center; marġni: 0; qiegħ tal-qiegħ: solidu # e7ce00 0.25em; kulur: # e7ce00; }

It-trick għal dan it-titlu hu li naf immaġni tiegħi hija ta '90 pixels tall. Allura żidt ikkuttunar fil-qiegħ tal-intestatura ta '90px (ikkuttunar: 0.5 0 90px 0p;). Int tista 'tilgħab bil-marġini, l-għoli tal-linja u l-ikkuttunar biex it-test tal-intestatura juri eżattament fejn tridha.

Ħaġa waħda li għandek tiftakar meta tuża immaġni hija li jekk ikollok websajt li tirreaġixxi (li għandek) b'disinn li bidliet ibbażati fuq id-daqsijiet u l-apparati ta 'l-iskrin, it-titlu mhux dejjem ikun l-istess daqs. Jekk teħtieġ it-titlu tiegħek bħala daqs eżatt, dan jista 'jikkawża problemi. Hija waħda mir-raġunijiet għalfejn jiena ġeneralment tevita l-immaġini ta 'sfond b'titolu, bħala kessaħ daqs kemm jistgħu xi kultant jidhru.

Sostituzzjoni tal-immaġini f'Parti prinċipali

Din hija teknika oħra popolari għal disinjaturi tal-Web għaliex tħallik toħloq ċima grafika u tissostitwixxi t-test tat-titlu tal-intestatura b'dik id-dehra. Din hija verita 'prattika antikwata minn disinjaturi tal-web kellhom aċċess għal ftit fonts u riedu jużaw aktar fonts eżotiċi fix-xogħol tagħhom. Iż-żieda ta 'fonts tal- web verament inbidlet kif id-disinjaturi jersqu lejn is-siti. L-intestaturi issa jistgħu jiġu stabbiliti f'varjetà wiesgħa ta 'fonts u immaġini b'dawn il-fonts inkorporati m'għadhomx meħtieġa. Bħala tali, issib biss immaġini CSS li tissostitwixxi l-aħbarijiet f'siti antiki li għadhom ma ġewx aġġornati għal prattiki aktar moderni.

Artikolu oriġinali minn Jennifer Krynin. Editjat minn Jeremy Girard fid-9/6/17