Fáðu staðreyndir með þessum ráðum
Allir vefur flettitæki innihalda það sem er þekkt sem "defauly stíll." Þetta eru stíll sem ræður útliti og tilfinningu fyrir HTML þætti í fjarveru neinna aðrar stílupplýsingar. Til dæmis, í næstum öllum vafra er sjálfgefið útlit tengla bjartblátt lit með undirliti. Þetta er hvernig þessi tenglar líta út nema þú segi þeim að sýna á annan hátt.
Sjálfgefin vafrastíll getur verið gagnlegt, en í mörgum tilfellum vill vefhönnuðir fjarlægja þessar stíll þannig að þeir geti byrjað ferskt með stílum sem þeir eru 100% stjórnandi á. Þetta er gert með því að nota það sem er þekkt sem "master stíll."
Leiðbeinandi sniðmát ætti að vera fyrsta stílskjalið sem þú hringir í öll skjölin þín. Þú notar aðalstílskrá til að hreinsa út sjálfgefnar stillingar vafrans sem geta valdið vandamálum í vefhönnun yfir vafra. Þegar þú hefur hreinsað út stíllinn með meistara stíll, byrjar hönnun þín á sama stað í öllum vöfrum - eins og hreint striga fyrir málverk.
Global vanskil
Stjórnarskráarstjórinn þinn ætti að byrja með því að núllgreina út jaðrana, paddings og landamæri á síðunni. Sumir vafrar sjálfgefna líkamann af skjalinu í 1 eða 2 punkta innspýting frá rennibrautum vafrans. Þetta tryggir að allir sýna sama:
html, líkami {margfeldi: 0px; padding: 0px; landamærin: 0px; }Þú vilt líka að gera letrið í samræmi. Vertu viss um að einnig stilla leturstærðina í 100 prósent eða 1em, þannig að síðunni sé aðgengileg, en stærðin er enn í samræmi. Og vertu viss um að innihalda línuhæðina.
líkami {font: 1em / 1.25 Arial, Helvetica, sans-serif; }Fyrirsögn Formatting
Fyrirsögn eða hausmerki (H1, H2, H3, osfrv.) Er venjulega sjálfgefið að feitletrað texta með stórum mínum eða púða í kringum þau. Með því að hreinsa þyngdina, mörkin og púða, tryggir þú að þessi merki séu enn stærri (eða minni) en textinn í kringum þá án þess að hafa auka stíl:
h1, h2, h3, h4, h5, h6 (framlegð: 0; padding: 0; font-þyngd: eðlilegt; leturgerð: Arial, Helvetica, sans-serif; }Þú gætir viljað íhuga að stilla ákveðnar stærðir, bréfaviðmót og púður til fyrirsagnarmerkjanna þína, en það fer mjög eftir stíl vefsvæðisins sem þú ert að hanna og ætti að vera skilin út úr aðalstílblöðinni. Þú getur bætt við fleiri stílum fyrir þessar fyrirsagnir eftir þörfum fyrir sérstaka hönnun.
Einföld textaformatting
Fyrirfram fyrirsagnir eru aðrar textatöflur sem þú ættir að vera viss um að hreinsa út. Eitt sett sem fólk gleymir oft er töflukóðinn (TH og TD) og formmerki (SELECT, TEXTAREA og INPUT). Ef þú stillir ekki þá sem eru í sömu stærð og líkaminn þinn og textaritun, geturðu verið óþægilega á óvart hvernig vafrar fá þær.
p, th, td, li, dd, dt, ul, ol, blockquote, q, skammstöfun, abbr, a, inntak, veldu textarea {marge: 0; padding: 0; leturgerð: eðlilegt eðlilegt eðlilegt 1em / 1,25 Arial, Helvetica, sans-serif; }Það er líka gaman að gefa tilvitnanir þínar (BLOCKQUOTE og Q), skammstafanir og skammstafanir svolítið aukalegt stíl, svo að þeir standi út aðeins meira:
blockquote {marge: 1.25em; padding: 1.25em} q {leturgerð: skáletrað; } skammstöfun, abbr {bendill: hjálp; Landamæri botn: 1px þjóta; }Tenglar og myndir
Tenglar eru auðvelt að stjórna og breyta frá fyrrnefndum björtu bláu undirstrikuðu texta. Ég vil frekar hafa sambandin mín ávallt undirstrikuð, en ef þú vilt frekar það á annan hátt getur þú stillt þessi valkosti fyrir sig. Ég felur einnig ekki í sér liti í aðalstílritinu, því það fer eftir hönnuninni.
a, a: hlekkur, a: heimsótt, a: virk, a: sveima {text-decoration: underline; }Með myndum er mikilvægt að slökkva á landamærunum. Þó að flestar vélar sýna ekki landamæri í kringum látlaus mynd, þegar myndin er tengd, snýst vafrar á landamærin. Til að laga þetta:
img {landamæri: enginn; }Töflur
Þó að töflur séu ekki lengur notaðar í skipulagi, þá getur síðuna þína ennþá notað þau fyrir raunverulegan tabluar gögn. Þetta er fínn notkun HTML tafla. Við höfum þegar gert úr skugga um að sjálfgefna textastærðin sé sú sama fyrir borðfrumur þínar, en það eru nokkrar aðrar stíll sem þú ættir að setja þannig að borðin þín séu þau sömu:
borð {framlegð: 0; padding: 0; landamæri: enginn; }Eyðublöð
Eins og með aðra þætti, ættir þú að hreinsa út jaðar og púðar í formi þínu. Annað sem mér líkar að gera er að skrifa formmerkið sem " inline " þannig að það bætir ekki við viðbótarplássi þar sem þú setur merkið í kóðann. Eins og með aðra textaþætti skilgreinir ég leturupplýsingar fyrir valið, textarea og innslátt hér að ofan, þannig að það sé það sama og restin af textanum mínum.
form {margfeldi: 0; padding: 0; sýna: inline; }Það er líka góð hugmynd að breyta bendillnum fyrir merkin þín. Þetta hjálpar fólki að sjá að merkimiðinn muni gera eitthvað þegar þeir smella á hann.
merki {bendill: bendill; }Common Classes
Fyrir þennan hluta aðalstjórnarskrárinnar ættir þú að skilgreina flokka sem skynja þig. Þetta eru nokkrar flokka sem ég nota oftast. Athugaðu að þeir eru ekki stilltar á tiltekna þætti, svo þú getur tengt þeim við það sem þú þarft:
.tækt {ljóst: bæði; } .floatLeft {flot: vinstri; } .fléttuRéttur {fljóta: hægri; } .textLeft {text-align: left; } .textRight {text-align: hægri; } .textCenter {text-align: center; } .textJustify {text-align: réttlæta; } .blockCenter {sýna: blokk; framlegð-vinstri: sjálfvirk; framlegð-hægri: sjálfvirkt; } / * Mundu að stilla breidd * / .bold {font-weight: bold; } .italic {leturgerð: skáletrun; } .underline {text-decoration: underline; } .noindent {margin-left: 0; padding-left: 0; } .nomargin {framlegð: 0; } .nopadding {padding: 0; } .nobullet {listi-stíl: none; listi-stíl-mynd: enginn; }Mundu að vegna þess að þessi flokkar eru skrifuð fyrir aðrar stíll og þeir eru bara flokkar, þá er auðvelt að hunsa þau með sértækari stíl eiginleika sem eiga sér stað síðar í kaskadanum . Ef þú kemst að því að þú setjir sameiginlega flokka á frumefni og það tekur ekki gildi ættir þú að athuga hvort ekki sé annar annar stíll í einni síðarnefndar stíll sem hefur áhrif á sama þætti.
The Allur Stíll Stíll
/ * Global sjálfgefið * / html, líkami {margfeldi: 0px; padding: 0px; landamærin: 0px; } líkami {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Fyrirsagnir * / h1, h2, h3, h4, h5, h6 (framlegð: 0; padding: 0; font-þyngd: eðlilegt; leturgerð: Arial, Helvetica, sans-serif; } / * Textasnið * / p, th, td, li, dd, dt, ul, ol, blockquote, q, skammstöfun, abbr, a, inntak, veldu textarea {marge: 0; padding: 0; leturgerð: eðlilegt eðlilegt eðlilegt 1em / 1,25 Arial, Helvetica, sans-serif; } blockquote {marge: 1.25em; padding: 1.25em} q {leturgerð: skáletrað; } skammstöfun, abbr {bendill: hjálp; Landamæri botn: 1px þjóta; } lítill {leturstærð: .85em; } stór {leturstærð: 1.2em; } / * Hlekkir og myndir * / a, a: hlekkur, a: heimsótt, a: virk, a: sveima {texti-skreyting: undirstrika; } img {landamæri: enginn; } / * Töflur * / borð {framlegð: 0; padding: 0; landamæri: enginn; } / * Eyðublöð * / form {framlegð: 0; padding: 0; sýna: inline; } merki {bendill: bendill; } / * Common Classes * / .clear {ljóst: bæði; } .floatLeft {flot: vinstri; } .fléttuRéttur {fljóta: hægri; } .textLeft {text-align: left; } .textRight {text-align: hægri; } .textCenter {text-align: center; } .textJustify {text-align: réttlæta; } .blockCenter {sýna: blokk; framlegð-vinstri: sjálfvirk; framlegð-hægri: sjálfvirkt; } / * Mundu að stilla breidd * / .bold {font-weight: bold; } .italic {leturgerð: skáletrun; } .underline {text-decoration: underline; } .noindent {margin-left: 0; padding-left: 0; } .nomargin {framlegð: 0; } .nopadding {padding: 0; } .nobullet {listi-stíl: none; listi-stíl-mynd: enginn; }Upprunaleg grein af Jennifer Krynin. Breytt af Jeremy Girard á 10/6/17