Hankige need näpunäited faktidega
Kõik veebibrauserid sisaldavad seda, mida teatakse kui "vaikimisi stiile". Need on stiilid, mis määravad HTML-elementide ilme ja tunde, kui puuduvad muud stiilide andmed. Näiteks peaaegu igas brauseris on hüperlinkide vaikeväljastus heledat sinist värvi, millel on allrükk. Nii näevad need lingid välja, kui te ei ütle neile, et nad kuvataks teisiti.
Vaikimisi brauseri stiilid võivad olla kasulikud, kuid paljudel juhtudel soovivad veebidisainerid need stiilid eemaldada, et nad saaksid värskelt alustada stiilidega, mida nad 100% kontrollivad. Seda tehakse, kasutades seda, mis on tuntud kui "peamine laaditabel".
Peamine laaditabel peaks olema esimene stiil tabel, mida helistate kõigis oma dokumentides. Vaikimisi brauseri seadete kustutamiseks, mis võivad põhjustada probleeme brauseri veebi disainis, saate kasutada meistriliistu tabelit. Kui olete stiilid välja võtnud koos põhilüpsilaadiga, läheb teie disain alguses kõigist brauseritest samale kohale - nagu värvimiseks mõeldud puhas lõuend.
Globaalsed vaikimisi väärtused
Teie peamine laaditabel peaks algama, tühistades lehe servad, lauad ja piirid . Mõned veebibrauserid vaikimisi dokumendi keha paika 1 kuni 2 pikslit brauseri paneeli servadega. See tagab, et kõik need on ühesugused:
html, keha {margin: 0px; padding: 0px; piiri: 0px; }Samuti soovite fonti järjepidevaks muuta. Kindlasti määrake ka fondi suuruseks 100 protsenti või 1em, nii et teie leht on ligipääsetav, kuid suurus jääb samaks. Kindlasti lisage rea kõrgus.
keha {font: 1em / 1.25 Arial, Helvetica, sans-serif; }Pealkirja vormindamine
Pealkirja- või pealkirjamärgid (H1, H2, H3 jne) on tavaliselt vaikimisi rasvased tekstid, mille ümber on suured marginaalid või polster. Kaalu, marginaalide ja polsteri eemaldamisel veenduge, et need märgendid on ikka veel suuremad (või väiksemad) kui nende tekstist ilma täiendavate stiilideta:
h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; font-mass: normaalne; font-family: Arial, Helvetica, sans-serif; }Võiksite kaaluda oma pealkirjade jaoks teatud suuruste, kirjavahetuse ja täidiste määramist, kuid see sõltub tõepoolest kavandatava saidi stiilis ja peaks olema peamise laadilehe välja jäetud. Saate lisada nende rubriikide jaoks rohkem stiile, kui see on teie konkreetse disaini jaoks vajalik.
Lihtteksti vormindamine
Pealkirjade kõrval on ka teisi tekstitüüpe, mida peaksite kindlasti kustutama. Üks komplekt, mille inimesed sageli unustavad, on laua raku sildid (TH ja TD) ja moodustavad sildid (SELECT, TEXTAREA ja INPUT). Kui te ei määra oma keha ja lõiketeksti suurust, võite olla ebameeldivalt üllatunud, kuidas brauserid neid redigeerivad.
p, th, td, li, dd, dt, ul, ol, blockquote, q, akronüüm, abbr, a, sisend, vali, textarea {margin: 0; padding: 0; font: normaalne normaalne normaalne 1em / 1.25 Arial, Helvetica, sans-serif; }Samuti on tore anda oma noteeringud (BLOCKQUOTE ja Q), akronüümid ja lühendid natuke rohkem stiili, nii et need eristavad veidi rohkem:
plokkkvoot {margin: 1.25em; padding: 1.25em} q {font-style: italic; } akronüüm, abbr {kursor: help; border-bottom: 1px graafiline; }Lingid ja pildid
Lingid on hõlpsasti hallatavad ja muutuvad ülalmainitud säravasest, allajoonitud tekstist. Ma eelistan alati, et minu lingid jääksid alla joonitud, kuid kui eelistate seda teisiti, saate neid valikuid eraldi määrata. Ma ei lisata ka värve masstandardile, sest see sõltub disainist.
a, a: link, a: külastatud, a: aktiivne, a: hover {text-decoration: underline; }Piltidega on piiride väljalülitamine oluline. Kuigi enamik brausereid ei näita tavalise kujutise piiri, siis kui pildil on lingitud, lülitavad brauserid piiri sisse. Selle parandamiseks:
img {border: puudub; }Tabelid
Kuigi tabeleid ei kasutata enam paigutuseesmärkidel, võib sait seda ikkagi kasutada tegelikel tabluarandmetel. See on hea HTML-tabelite kasutamine. Oleme juba veendunud, et vaikimisi teksti suurus on teie laual olevatele lahtritele ühesugune, kuid seal on veel mõned stiilid, mida peaksite seadistama, et teie tabelid jääksid samaks:
tabel {margin: 0; padding: 0; piir: ükski; }Vormid
Nagu teiste elementidega, peaksite oma vorme ümbritsevate marginaalide ja lahtrite tühjendama. Teine asi, mida mulle meeldib teha, on vormi sildi ümbervormimine " inline ", nii et see ei lisa täiendavat ruumi koodi sildi lisamiseks. Nagu teistegi tekstielementide puhul, määratlen ka valitud teksti, tekstivälja ja ülaltoodud kirjafailide teabe, nii et see on sama mis mu ülejäänud tekst.
vorm {margin: 0; padding: 0; kuva: inline; }Samuti on hea mõte oma siltide kursori vahetamiseks. See aitab inimestel näha, et etikett teeb midagi, kui nad selle klõpsavad.
etikett {kursor: kursor; }Tavalised klassid
Selle peamise laaditabeli selle osa jaoks peaksite määratlema klassid, mis teile on mõttekas. Need on mõned klassid, mida ma kõige sagedamini kasutavad. Pidage meeles, et neid ei määrata ühelegi konkreetsele elemendile, nii et saate neid määrata igale vajadusele:
.clear {selge: mõlemad; } .floatLeft {float: left; } .floatRight {float: parem; }. textLeft {text-align: left; }. textRight {text-align: right; }. textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {display: block; margin-left: auto; paremale paremale: auto; } / * unusta määrata laius * / .bold {font-weight: bold; }. alaline {font-style: italic; }. endermine {text-decoration: underline; }. noindent {margin-left: 0; padding-left: 0; } .nomargin {margin: 0; } .nopadding {padding: 0; } .nobullet {list-style: puudub; list-style-image: puudub; }Pidage meeles, et kuna need klassid on kirjutatud enne mis tahes teisi stiile ja on lihtsalt klassid, siis on neid hõlpsasti esile tõstetud spetsiifilisemate stiilide omadustega, mis ilmnevad kaskaadil hiljem. Kui leiate, et olete määranud elemendile ühise klassi ja see ei jõustu, peate kontrollima, et mõni teine oma stiili tabel, mis mõjutaksid sama elementi, pole veel ühtki stiili.
Kogu meistrikursi tabel
/ * Global Defaults * / html, body {margin: 0px; padding: 0px; piiri: 0px; } keha {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Pealkirjad * / h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; font-mass: normaalne; font-family: Arial, Helvetica, sans-serif; } / * Tekstitüübid * / p, th, td, li, dd, dt, ul, ol, blokeering, q, akronüüm, abbr, a, sisend, vali, textarea {margin: 0; padding: 0; font: normaalne normaalne normaalne 1em / 1.25 Arial, Helvetica, sans-serif; } plokkkvoot {margin: 1.25em; padding: 1.25em} q {font-style: italic; } akronüüm, abbr {kursor: help; border-bottom: 1px graafiline; } väike {font-size: .85em; } suur {font-size: 1.2em; } / * Lingid ja pildid * / a, a: link, a: külastatud, a: aktiivne, a: hover {text-decoration: underline; } img {border: puudub; } / * Tabelid * / tabel {margin: 0; padding: 0; piir: ükski; } / * Vormid * / form {margin: 0; padding: 0; kuva: inline; } silt {kursor: kursor; } / * Tavalised klassid * / .clear {selge: mõlemad; } .floatLeft {float: left; } .floatRight {float: parem; }. textLeft {text-align: left; }. textRight {text-align: right; }. textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {display: block; margin-left: auto; paremale paremale: auto; } / * unusta määrata laius * / .bold {font-weight: bold; }. alaline {font-style: italic; }. endermine {text-decoration: underline; }. noindent {margin-left: 0; padding-left: 0; } .nomargin {margin: 0; } .nopadding {padding: 0; } .nobullet {list-style: puudub; list-style-image: puudub; }Jennifer Krynini algne artikkel. Redigeeris Jeremy Girard'i kell 10/6/17