Akiru la faktojn kun ĉi tiuj konsiloj
Ĉiuj retumiloj inkluzivas, kio estas konata kiel "malfavoraj stiloj". Ĉi tiuj estas stiloj kiuj diktas la aspekton kaj senton de HTML-elementoj en foresto de iu ajn alia stilo de informo. Ekzemple, en preskaŭ ĉiu retumilo la defaŭlta aspekto de hipervojoj estas brila blua koloro kun subteksto. Jen kiel tiuj ligiloj aspektas, se vi ne montros ilin alimaniere.
Defaŭlta retumilo-stiloj povas esti helpema, sed en multaj kazoj TTT-projektantoj volas forigi ĉi tiujn stilojn por ke ili povu komenci freŝajn per stiloj, kiujn ili estas 100% kontrolitaj. Ĉi tio fariĝas per tio, kio estas konata kiel "majstro-stilfolio".
Majstra stilfolio devas esti la unua stilfolio, kiun vi vokas en ĉiuj viaj dokumentoj. Vi uzas majstran stilfolion por liberigi la defaŭltajn retumilajn agordojn, kiuj povas kaŭzi problemojn en retrospektiloj de dezajno retejo. Unufoje vi forigis la stilojn kun majstra stilfolio, via dezajno komenciĝas de la sama loko en ĉiuj retumiloj - kiel pura tolo por pentrarto.
Tutmonda Defaŭltoj
Via mastra stilfolio devas komenci per nuligi la randojn, paŝojn kaj limojn sur la paĝo. Iuj retumiloj implicas la korpon de la dokumento al 1 aŭ 2 rastrumeroj indentitaj de la retumilo de la retumilo. Ĉi tio certigas, ke ili ĉiuj montras la saman:
html, korpo {margin: 0px; kompletigo: 0px; limo: 0px; }Vi ankaŭ volas fari la tiparon konsekvenca. Estu certe ankaŭ agordi la tiparon al 100 procentoj aŭ 1em, tiel ke via paĝo estas alirebla, sed la grandeco ankoraŭ estas konsekvenca. Kaj certe certigu la linio-altecon.
korpo {font: 1em / 1.25 Arial, Helvetica, sans-serif; }Titulaj Formado
Titolitaj aŭ kapliniaj etikedoj (H1, H2, H3, ktp.) Tipe defaŭlte al aŭdaca teksto kun grandaj randoj aŭ kompletigo ĉirkaŭ ili. Per demetado de pezo, randoj kaj kompletigoj, vi certigas, ke ĉi tiuj etikedoj ankoraŭ restas pli grandaj (aŭ pli malgrandaj) ol la teksto ĉirkaŭ ili sen havi ekstrajn stilojn:
h1, h2, h3, h4, h5, h6 {rando: 0; Plenigado: 0; tiparo-pezo: normala; tiparo-familio: Arial, Helvetica, sans-serif; }Vi eble volas konsideri specifajn grandecojn, literpacon kaj paddings al viaj titolaj etikedoj, sed tio vere dependas de la stilo de la retejo, kiun vi desegnas kaj devas esti lasita el la ĉefa stilo. Vi povas aldoni pli da stiloj por ĉi tiuj rubrikoj kiel necesas por via specifa dezajno.
Plata Tekstformado
Pli tie titoloj, ekzistas aliaj etikedoj de teksto, ke vi certe certe forigu. Unu aro, kiun multaj homoj forgesas, estas la etikedoj de tabloj (TH kaj TD) kaj formas etikedojn (SELECT, TEXTAREA kaj INPUT). Se vi ne agordas tiujn al la sama grandeco kiel via korpo kaj alinea teksto, vi povas esti surprize surprizita pri kiel la retumiloj repagas ilin.
p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {margin: 0; Plenigado: 0; tiparo: normala normala normala 1em / 1.25 Arial, Helvetica, sans-serif; }Ankaŭ estas bela doni viajn citaĵojn (BLOCKQUOTE kaj Q), sigloj kaj mallongigoj iom pli ekstra stilo, tiel ke ili elstaras iom pli:
blockquote {rando: 1.25em; kompletigo: 1.25em} q {font-style: italic; } acrónimo, abbr {kursoro: helpo; limo-fundo: 1px malŝaltita; }Ligoj kaj Bildoj
Ligiloj estas facile administri kaj ŝanĝi de tiu menciita brila blua submetita teksto. Mi preferas ĉiam havi miajn ligilojn restarigitajn, sed se vi preferas ĝin malsame, vi povas agordi ĉi tiujn elektojn aparte. Mi ankaŭ ne inkluzivas kolorojn en la ĉefa stilo, ĉar tio dependas de la dezajno.
a, al: ligilo, al: vizitita, a: aktiva, a: ŝvebado {teksta dekoracio: subskriba; }Kun bildoj, estas grave malŝalti la limojn. Dum la plej multaj foliumiloj ne montras limon ĉirkaŭ ebena bildo, kiam la bildo estas ligita, la retumiloj turniĝas sur la limo. Por ripari ĉi tion:
img {limo: nenio; }Tabloj
Dum tabloj ne plu uzas por aranĝaj celoj, vi retejo ankoraŭ povas uzi ilin por realaj tabularaj datumoj. Ĉi tio estas bona uzo de HTML-tabloj. Ni jam certigis, ke la defaŭlta teksta grandeco estas la sama por via tablo-ĉeloj, sed ekzistas kelkaj aliaj stiloj, kiujn vi devas agordi por ke viaj tabloj estu samaj:
tablo {rando: 0; Plenigado: 0; limo: neniu; }Formoj
Same kiel kun aliaj elementoj, vi devas forigi la randojn kaj paddings ĉirkaŭ viaj formoj. Alia afero, kiun mi ŝatas fari, estas reescribi la forman etikedon kiel " inline " por ke ĝi ne aldonu ekstran spacon kie vi metas la etikedon en la kodon. Kiel kun aliaj tekstaj elementoj, mi difinas la tiparon-informon por elekti, textarea kaj enigi supre, tiel ke ĝi estas la sama kiel la resto de mia teksto.
formi {rando: 0; Plenigado: 0; montri: inline; }Ankaŭ estas bona ideo ŝanĝi la kursoron por viaj etiketoj. Ĉi tio helpas homojn vidi, ke la etikedo faros ion, kiam ili alklakos ĝin.
etikedo {kursoro: pointer; }Komunaj klasoj
Por ĉi tiu parto de la mastra stilfolio, vi devas difini klasojn, kiuj havas senton al vi. Jen kelkaj el la klasoj, kiujn mi uzas plej ofte. Rimarku, ke ili ne estas agorditaj al iu ajn aparta elemento, do vi povas atribui ilin al ĉio, kion vi bezonas:
.clear {klara: ambaŭ; } .floatLeft {flosas: maldekstre; } .floatRight {flosas: dekstra; } .textLeft {teksto-aligno: maldekstre; } .textRight {text-align: dekstra; } .textCenter {teksto-aligno: centro; } .textJustify {text-align: pravigi; } .blockCenter {montriĝo: bloko; rando-maldekstra: aŭtomobilo; rando-dekstra: aŭtomata; } / * memoru agordi larĝecon * / .bold {font-weight: bold; } .italic {font-style: italic; }. Skribu {text-decoration: subskriba; } .industria {rando-maldekstra: 0; Plenigado-maldekstra: 0; } .nomargin {rando: 0; } .nopadding {padding: 0; } .nobullet {listo-stilo: neniu; listo-stilo-bildo: nenio; }Memoru tion, ĉar ĉi tiuj klasoj estas skribitaj antaŭ iuj aliaj stiloj kaj ili estas nur klasoj, ili estas facile forĵeti kun pli specifaj stilaj proprietoj, kiuj okazas poste en la akvofalo . Se vi trovos, ke vi starigis komunan klason sur elemento kaj ĝi ne efektive efektivigas, vi devas kontroli, por certigi, ke ne ekzistas alia stilo en unu el viaj postaj stiloj influantaj tiun saman elementon.
La Tuta Majstro Stilfolio
/ * Tutmonda Defaŭltoj * / html, body {margin: 0px; kompletigo: 0px; limo: 0px; } body {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Fraplinioj * / h1, h2, h3, h4, h5, h6 {margin: 0; Plenigado: 0; tiparo-pezo: normala; tiparo-familio: Arial, Helvetica, sans-serif; } / * Tekstaj Stiloj * / p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {margin: 0; Plenigado: 0; tiparo: normala normala normala 1em / 1.25 Arial, Helvetica, sans-serif; } blockquote {rando: 1.25em; kompletigo: 1.25em} q {font-style: italic; } acrónimo, abbr {kursoro: helpo; limo-fundo: 1px malŝaltita; } malgranda {font-grandeco: .85em; } granda {font-grandeco: 1.2em; } / * Ligiloj kaj Bildoj * / a, a: ligilo, al: vizitita, a: aktiva, a: ŝvebado {tekst-ornamo: subskriba; } img {limo: nenio; } / * Tabeloj * / tablo {rando: 0; Plenigado: 0; limo: neniu; } / * Formoj * / formo {rando: 0; Plenigado: 0; montri: inline; } etikedo {kursoro: pointer; } / * Komunaj Klasoj * / .clear {klara: ambaŭ; } .floatLeft {flosas: maldekstre; } .floatRight {flosas: dekstra; } .textLeft {teksto-aligno: maldekstre; } .textRight {text-align: dekstra; } .textCenter {teksto-aligno: centro; } .textJustify {text-align: pravigi; } .blockCenter {montriĝo: bloko; rando-maldekstra: aŭtomobilo; rando-dekstra: aŭtomata; } / * memoru agordi larĝecon * / .bold {font-weight: bold; } .italic {font-style: italic; }. Skribu {text-decoration: subskriba; } .industria {rando-maldekstra: 0; Plenigado-maldekstra: 0; } .nomargin {rando: 0; } .nopadding {padding: 0; } .nobullet {listo-stilo: neniu; listo-stilo-bildo: nenio; }Originala artikolo de Jennifer Krynin. Redaktita de Jeremy Girard la 10/6/17