Pata ukweli kwa vidokezo hivi
Vinjari vyote vya wavuti vinajumuisha kile kinachojulikana kama "mitindo ya defauly." Hizi ni mitindo ambayo inaamuru kuangalia na kujisikia kwa mambo ya HTML kwa kutokuwepo na maelezo yoyote ya mtindo. Kwa mfano, katika karibu kila kivinjari kuangalia ya default ya hyperlink ni rangi bluu mkali na mstari wa chini. Hii ndio jinsi viungo hivyo vinavyotafuta isipokuwa kuwaambia waonyeshe kwa njia tofauti.
Mitindo ya kivinjari ya kivinjari inaweza kuwa na manufaa, lakini mara nyingi wabunifu wa wavuti wanataka kuondoa mitindo hii ili waweze kuanzisha safi na mitindo ambayo ni 100% katika kudhibiti. Hii imefanywa kwa kutumia kile kinachojulikana kama "stylesheet bwana."
Stylesheet ya bwana inapaswa kuwa stylesheet ya kwanza unayoiita kwenye nyaraka zako zote. Unatumia stylesheet kuu ili kufuta mipangilio ya kivinjari ya kivinjari ambayo inaweza kusababisha matatizo katika kubuni mtandao wa kivinjari-kivinjari. Mara baada ya kufuta mitindo na stylesheet ya bwana, kubuni yako huanza kutoka mahali sawa katika vivinjari vyote - kama kanzu safi ya uchoraji.
Ufafanuzi wa Global
Mfumo wako wa stylesheet unapaswa kuanza kwa kuzunguka pembejeo, vifuniko na mipaka kwenye ukurasa. Vivinjari vingine vya wavuti hutengeneza mwili wa waraka kwa saizi 1 au 2 zilizopatikana kutoka kwenye vichwa vya kivinjari. Hii inahakikisha kwamba wote wanaonyesha sawa:
html, mwili {margin: 0px; padding: 0px; mpaka: 0px; }Pia unataka kufanya salama thabiti. Hakikisha pia kuweka ukubwa wa font kwa asilimia 100 au 1m, ili ukurasa wako uweze kupatikana, lakini ukubwa bado una thabiti. Na uhakikishe kuwa ni pamoja na urefu wa mstari.
mwili {font: 1em / 1.25 Arial, Helvetica, sans-serif; }Uwekaji wa kichwa cha kichwa
Kichwa cha kichwa cha kichwa au kichwa (H1, H2, H3, nk) kawaida huchaguliwa kwa maandishi ya ujasiri na vijiji vingi au padding karibu nao. Kwa kuondoa uzito, margin na padding, unahakikisha kuwa vitambulisho hivi vinabaki zaidi (au vidogo) kuliko maandishi karibu nao bila kuwa na mitindo ya ziada:
h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; font-uzito: kawaida; font-familia: Arial, Helvetica, sans-serif; }Unaweza kutaka kuzingatia ukubwa maalum, barua-nafasi na paddings kwenye vitambulisho vya kichwa chako, lakini kwa kweli inategemea mtindo wa tovuti unayojenga na inapaswa kushoto nje ya karatasi ya mtindo. Unaweza kuongeza mitindo zaidi ya vichwa hivi kama inahitajika kwa kubuni yako maalum.
Uwekaji Nakala ya Maandishi
Zaidi ya vichwa vya habari, kuna vitambulisho vingine vya maandishi kwamba unapaswa kuwa na uhakika wa kufuta. Kitanda kimoja ambacho watu husahau mara nyingi ni vitambulisho vya seli za kiini (TH na TD) na vitambulisho vya fomu (SELECT, TEXTAREA na INPUT). Ikiwa hutaweka wale kwa ukubwa sawa na mwili wako na maandishi ya kifungu, huenda ukawashangaa kwa kushangaza jinsi vivinjari vinavyowapa.
p, th, td, li, dd, dt, ul, ol, blockquote, q, kifupi, abbr, a, pembejeo, chagua, textarea {margin: 0; padding: 0; font: kawaida ya kawaida 1em / 1.25 Arial, Helvetica, sans-serif; }Pia ni nzuri kutoa nukuu zako (BLOCKQUOTE na Q), acronyms, na vifupisho mtindo kidogo zaidi, ili waweze kusimama kidogo zaidi:
blockquote {margin: 1.25m; padding: 1.25m} q {font-style: italic; } kichapishaji, abbr {mshale: msaada; mpaka-mpaka: 1px imeshuka; }Viungo na Picha
Viungo ni rahisi kusimamia na kubadili kutoka kwa kile kinachotajwa hapo juu bluu iliyopendekezwa ya maandishi. Ninapendelea daima kuwa na viungo vyangu bado vinasisitizwa, lakini ikiwa unapenda njia tofauti unaweza kuweka njia hizi tofauti. Mimi pia sijumuisha rangi katika karatasi ya mtindo mkuu, kwa sababu inategemea kubuni.
a, a: link, a: visited, a: active, a: hover {maandiko-mapambo: kusisitiza; }Kwa picha, ni muhimu kuzima mipaka. Wakati vivinjari vingi hazionyeshe mpakani karibu na picha ya wazi, wakati picha inavyounganishwa, vivinjari hugeuka mpaka. Ili kurekebisha hili:
img {mpaka: hakuna; }Majedwali
Wakati meza hazitumiwi tena kwa madhumuni ya mpangilio, tovuti bado hutumia kwa data halisi ya tabluar. Hii ni matumizi mazuri ya meza za HTML. Tayari tumehakikisha kuwa ukubwa wa maandishi ya kawaida ni sawa kwa seli za meza yako, lakini kuna mitindo mingine mingine unayopaswa kuweka ili mataa yako yaweze sawa:
meza {margin: 0; padding: 0; mpaka: hakuna; }Fomu
Kama ilivyo na vipengele vingine, unapaswa kufuta maridadi na paddings karibu na fomu zako. Kitu kingine nipenda kufanya ni kuandika upya fomu ya fomu kama " inline " ili iweze kuongeza nafasi ya ziada unapoweka lebo katika msimbo. Kama ilivyo na vipengele vingine vya maandiko, ninafafanua maelezo ya font kwa kuchagua, textarea na pembejeo hapo juu, ili iwe sawa na maandishi yangu yote.
fomu {margin: 0; padding: 0; kuonyesha: inline; }Pia ni wazo nzuri kubadilisha mshale kwa maandiko yako. Hii huwasaidia watu kuona kwamba studio itafanya kitu wakati wanakibofya.
studio {cursor: pointer; }Madarasa ya kawaida
Kwa sehemu hii ya stylesheet bwana, unapaswa kufafanua madarasa ambayo yana maana kwako. Hizi ni baadhi ya madarasa ambayo mimi hutumia mara nyingi. Kumbuka kwamba haziwekwa kwenye kipengele fulani, hivyo unaweza kuwapa chochote unachohitaji:
.clear {wazi: wote wawili; } .floatLeft {kuelea: kushoto; } .floatRight {kuelea: haki; } .textLeft {text-align: kushoto; } .textRight {text-align: haki; } .textCenter {text-align: kituo; } .textJustify {text-align: hakikisha; } .blockCenter {kuonyesha: kuzuia; margin-kushoto: auto; jiji-kulia: auto; } / * kumbuka kuweka upana * / .bold {font-uzito: ujasiri; } .italic {style-style: italic; } .underline {maandiko-mapambo: kusisitiza; } .kosema {margin-kushoto: 0; padding-kushoto: 0; } .naraka {margin: 0; } .napadding {padding: 0; } .nobullet {orodha ya orodha: hakuna; orodha-style-picha: hakuna; }Kumbuka kwamba kwa sababu madarasa haya yameandikwa kabla ya mitindo yoyote na ni madarasa tu, ni rahisi kupindua na mali maalum za mtindo ambazo hutokea baadaye katika msimu . Ikiwa unapata kuwa unaweka darasa la kawaida juu ya kipengele na haufanyi kazi, unapaswa kuangalia ili uhakikishe kwamba hakuna mtindo mwingine katika mojawapo ya stylesheets yako baadaye inayoathiri kipengele hicho.
Mwalimu Mzuri wa Stylesheet
/ * Global Defaults * / html, mwili {margin: 0px; padding: 0px; mpaka: 0px; } mwili {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Vichwa vya habari * / h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; font-uzito: kawaida; font-familia: Arial, Helvetica, sans-serif; } / * Nakala za Mitindo * / p, th, td, li, dd, dt, ul, ol, blockquote, q, kihistoria, abr, a, pembejeo, chagua, textarea {margin: 0; padding: 0; font: kawaida ya kawaida 1em / 1.25 Arial, Helvetica, sans-serif; } blockquote {margin: 1.25m; padding: 1.25m} q {font-style: italic; } kichapishaji, abbr {mshale: msaada; mpaka-mpaka: 1px imeshuka; } ndogo {font-size: .85em; } kubwa {font-size: 1.2m; } / * Viungo na Picha * / a, a: kiungo, a: alitembelea: a: kazi, a: hover {maandiko-mapambo: kusisitiza; } img {mpaka: hakuna; } / * Majedwali * / meza {margin: 0; padding: 0; mpaka: hakuna; } / * Fomu * / fomu {margin: 0; padding: 0; kuonyesha: inline; } lebo {cursor: pointer; } / * Darasa la kawaida * / .clear {wazi: wote wawili; } .floatLeft {kuelea: kushoto; } .floatRight {kuelea: haki; } .textLeft {text-align: kushoto; } .textRight {text-align: haki; } .textCenter {text-align: kituo; } .textJustify {text-align: hakikisha; } .blockCenter {kuonyesha: kuzuia; margin-kushoto: auto; jiji-kulia: auto; } / * kumbuka kuweka upana * / .bold {font-uzito: ujasiri; } .italic {style-style: italic; } .underline {maandiko-mapambo: kusisitiza; } .kosema {margin-kushoto: 0; padding-kushoto: 0; } .naraka {margin: 0; } .napadding {padding: 0; } .nobullet {orodha ya orodha: hakuna; orodha-style-picha: hakuna; }Makala ya awali na Jennifer Krynin. Iliyotengenezwa na Jeremy Girard mnamo 10/6/17