Krij de feiten mei dizze tips
Alle webbrowsers binne ûnder oaren wat is bekend as "ûnfolsleine stilen". Dit binne stilen dy't it look en fiele fan HTML-eleminten te tekenjen yn 'e ôfwêzich fan oare styl-ynformaasje. Bygelyks, yn hast alle browser is de standertkaai fan hyperlinks in ljochte blauwe kleur mei in ûnderline. Dit is hoe't dizze keppelings sjogge as jo har fertelle om op in oare manier te sjen.
Standert blêderstilen kinne helpe, mar yn in soad gefallen wolle web-ûntwerpers dizze stilen ferwiderje, sadat se frisse mei stilen begjinne kinne dat se 100% yn kontrôle binne. Dit wurdt dien troch wat bekend is as in "master stylblêd".
In master stylblêd moat it earste stylblêd wêze dat jo jo al jo dokuminten oanroppe. Jo brûke in master-stylblêd om de standert blêderynstellings te heljen dy't problemen yn it web-design fan cross-browser beheare kinne. As jo de stilen mei in master stylblêd wiske hawwe, begjint jo ûntwerp fan deselde plak yn alle browsers - lykas in skjinne lein foar skilderjen.
Global standings
Jo masterstylblêd moat begjinne mei it nuljen fan de rânen, paddings en grinzen op 'e side. Guon webbrowsers standert it lichem fan it dokumint fan 1 oant 2 pixels fan 'e blêder fan' e browser. Dit makket derfoar dat se allegear itselde sjen litte:
html, body {margin: 0px; padding: 0px; border: 0px; }Jo wolle it skrift ek konsekwint meitsje. Soargje ek de lettertypegrutte op 100 prosint of 1em te setten, sadat jo side tagonklik is, mar de grutte is noch konsekwint. En moatte der wis fan wêze dat de line-hichte is.
lichem {font: 1em / 1.25 Arial, Helvetica, sans-serif; }Headline Formatting
Headline of header tags (H1, H2, H3, ensfh.) Typysk standert foar fette tekst mei grutte marten of padding om harren hinne. Troch it gewicht fan 'e gewicht, rânen en padding te garandearjen, soargje jo derfoar dat dizze tags noch grutter bliuwe (of lytser) as de tekst om harren hinne sûnder ekstra stilen:
h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; font-weight: normal; font-family: Arial, Helvetica, sans-serif; }Jo kinne graach beskôgje dat jo spesifike maatregels, letter-ôfstannen en paddings oan jo haadtriemmen oanpasse, mar dat echt hinget fan 'e styl fan' e side dy't jo ûntwerpe hawwe en moatte út 'e masterstylblêd bliuwe. Jo kinne mear stilen foar dizze headings taheakje as jo nedich binne foar jo spesifike ûntwerp.
Plain Text Formatting
Beyond headlines, binne der oare teksttags dy't jo soargje moatte om te drukken. Men set dat minsken faak ferjitte binne de tabelzelleteken (TH en TD) en foarmje tags (SELEKTE, TEXTAREA en INPUT). As jo dizze net op deselde grutte sette as jo lichems- en paragraaf-tekst, kinne jo miskien ferrast wurde oer hoe't de browsers har jaan.
p, th, td, li, dd, dt, ul, ol, blockquote, q, akronym, abbr, a, input, select, textarea {margin: 0; padding: 0; font: normal normal normal 1em / 1.25 Arial, Helvetica, sans-serif; }It is ek aardich om jo quotaasjes te jaan (BLOCKQUOTE en Q), akronyms en ôfkoartingen in bytsje ekstra styl, sadat se in bytsje mear stean:
blockquote {margin: 1.25em; padding: 1.25em} q {font-style: italic; } acronym, abbr {cursor: help; border-bottom: 1px dashed; }Links en Images
Ferwizings binne maklik te beheinen en te wizigjen fan dat eardere ljochte blauwe ûnderline tekst. Ik leaver altyd oan myn keppelings ûnderline bliuwe, mar as jo it foarkar leaver in oare manier kinne jo dizze opsjes apart meitsje. Ik jouwe ek kleuren yn 'e masterstylblêd, om't dat hinget fan it ûntwerp.
a, a: link, a: besocht, a: aktyf, a: hover {text-decoration: underline; }Mei bylden is it wichtich om de grinzen ôf te setten. Wylst de measte browsers gjin rânom om in flakte byld sjen, as it byld keppele is, ferpleatse de browsers op 'e grins. Om dit te beheinen:
img {border: none; }Tabeltsjes
Wylst tabellen net mear brûkt wurde foar plankjes, kinne jo side noch gebrûk meitsje foar aktuele tablêdgegevens. Dit is in dreech gebrûk fan HTML-tabellen. Wy hawwe der wis fan dat de standert tekstgrutte foar jo tabel-sellen itselde is, mar der binne in pear oare stilen dy't jo soene moatte sette dat jo tabellen itselde bliuwe:
table {margin: 0; padding: 0; grins: gjin; }Formulieren
Lykas mei oare eleminten, moatte jo de rânen en paddings om jo formulieren dúdlik meitsje. In oar ding dat ik dwaan wol, is it formulier as " ynliny " werklikke , sadat it net ekstra romte taheakje sil wêr't jo de tag in de koade plakken. As mei oare tekst eleminten beskied ik de lettertypen foar selektearjen, tekstarea en ynfier op boppe, sadat it itselde is as de rest fan myn tekst.
form {margin: 0; padding: 0; display: inline; }It is ek in goede idee om de rinnerke te feroarjen foar jo etiketten. Dit helpt de minsken om te sjen dat it label wat docht as se klikke.
label {cursor: pointer; }Gemeenterie
Foar dit diel fan 'e master stylblêd moatte jo klassen definiearje dy't jo betsjutte foar jo. Dit binne guon fan 'e klassen dy't ik meast brûke. Tink derom dat se net in bepaald elemint set wurde, dus kinne jo se oanjaan oan wat jo nedich binne:
.clear {dúdlik: beide; } .floatLeft {float: left; } .floatRight {float: right; }. tekstLeft {text-align: left; } .textRight {text-align: right; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {display: block; margin-left: auto; margin-right: auto; } / * ûnthâlde ombreedte * / .bold {font-weight: fett; } .italic {font-style: italic; } .underline {text-decoration: underline; } .noindent {margin-left: 0; padding-left: 0; } .nomargin {margin: 0; } .nopadding {padding: 0; } .nobullet {list style: none; list-style-image: gjin; }Tink derom dat dizze lessen skreaun binne foar elke oare stylen en se binne gewoan klassen, se binne maklik om mear spesifike styl-eigenskippen te oerwinnen dy't letter yn 'e kaskade komme . As jo fine dat jo in mienskiplike klasse op elke elemint sette, en it net effekt hat, moatte jo kontrolearje om derfoar te soargjen dat der net in oare styl is yn ien fan jo letter stylesheets dy't itselde elemint beynfloedet.
De Entire Master Stylesheet
/ * Globale standerts * / html, body {margin: 0px; padding: 0px; border: 0px; } body {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Headlines * / h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; font-weight: normal; font-family: Arial, Helvetica, sans-serif; } / * Tekststilen * / p, th, td, li, dd, dt, ul, ol, blockquote, q, akronym, abbr, a, input, select, textarea {margin: 0; padding: 0; font: normal normal normal 1em / 1.25 Arial, Helvetica, sans-serif; } blockquote {margin: 1.25em; padding: 1.25em} q {font-style: italic; } acronym, abbr {cursor: help; border-bottom: 1px dashed; } small {font-size: .85em; } grutte {font-size: 1.2em; } / * Links en ôfbyldings * / a, a: link, a: besocht, a: aktyf, a: hover {text-decoration: underline; } img {border: none; } / * Tabellen * / tafel {margin: 0; padding: 0; grins: gjin; } / * Forms * / form {margin: 0; padding: 0; display: inline; } label {cursor: pointer; } / * Gemeenterie * / .klear {dúdlik: beide; } .floatLeft {float: left; } .floatRight {float: right; }. tekstLeft {text-align: left; } .textRight {text-align: right; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {display: block; margin-left: auto; margin-right: auto; } / * ûnthâlde ombreedte * / .bold {font-weight: fett; } .italic {font-style: italic; } .underline {text-decoration: underline; } .noindent {margin-left: 0; padding-left: 0; } .nomargin {margin: 0; } .nopadding {padding: 0; } .nobullet {list style: none; list-style-image: gjin; }Oarspronklik artikel fan Jennifer Krynin. Edited by Jeremy Girard on 10/6/17