Saņemiet faktus ar šiem padomiem
Visās tīmekļa pārlūkprogrammās ir ietverts tas, kas ir zināms kā "neatbilstoši stili". Tie ir stili, kas nosaka HTML elementu izskatu, ja nav cita veida informācijas par stilu. Piemēram, gandrīz katrā pārlūkprogrammā noklusējuma hipersaites izskats ir spilgti zila krāsa ar pasvītrojumu. Tieši tāpēc šīs saites izskatās, ja vien jūs viņiem nerunāties citādā veidā.
Noklusējuma pārlūkprogrammas stili var būt noderīgi, taču daudzos gadījumos tīmekļa dizaineri vēlas noņemt šos stilus, lai viņi varētu sākt svaigus ar stiliem, kurus viņi 100% kontrolē. Tas tiek darīts, izmantojot to, ko sauc par "galveno stilu tabulu".
Galvenā stilu tabula ir pirmā stilu lapa, kuru jūs zvanāt visos savos dokumentos. Jūs izmantojat galveno stilu tabulu, lai noņemtu noklusējuma pārlūka iestatījumus, kas var radīt problēmas pārrobežu pārlūka Web dizains. Kad esat izdzēš stilu ar galveno stilu tabulu, jūsu dizains sākas no vienas un tās pašas vietas visās pārlūkprogrammās - tāpat kā tīru audekls krāsošanai.
Globālie noklusējumi
Jūsu galveno stilu tabulai vajadzētu sākt, noapaļojot lapas malas, virsmas un robežas . Daži tīmekļa pārlūkprogrammas noklusējuma dokumenta pamatteksts ir 1 vai 2 pikseļi, kas ir noņemti no pārlūka rūts malām. Tas nodrošina to, ka visi šie vienumi ir vienādi:
html, body {margin: 0px; polsterējums: 0 pikseļi; robeža: 0px; }Jūs arī vēlaties padarīt fontu konsekventu. Noteikti arī jānosaka fonta lielums līdz 100 procentiem vai 1em, lai jūsu lapa būtu pieejama, taču izmērs joprojām atbilst. Un noteikti iekļaujiet līnijas augstumu.
ķermenis {font: 1em / 1.25 Arial, Helvetica, sans-serif; }Virsraksta formatēšana
Virsraksta vai galvenes tagi (H1, H2, H3 utt.) Parasti ir treknrakstā ar lielu malu vai polsterējumu ap tiem. Iztīrot svērumu, maržas un polsterējumu, jūs nodrošināsiet, ka šie tagi joprojām ir lielāki (vai mazāki) nekā ap tiem saturošs teksts bez papildu stila:
h1, h2, h3, h4, h5, h6 {margin: 0; polsterējums: 0; fonta svars: normāls; fonta ģimene: Arial, Helvetica, sans-serif; }Iespējams, vēlēsities ieslēgt īpašus izmērus, burtu atstarpes un spilvenus jūsu virsraksta tagiem, taču tas patiešām ir atkarīgs no jūsu izstrādātās vietnes stila un jāizslēdz no galvenā stila lapas. Jūs varat pievienot šīm virsrakstiem vairāk stilu, kā tas ir nepieciešams jūsu konkrētajam dizainam.
Vienkārša teksta formatēšana
Papildus virsrakstos ir arī citi teksta tagi, kas jums noteikti jāpārliecinās. Viens komplekts, ko cilvēki bieži aizmirst, ir galda šūnu tagi (TH un TD) un veidlapu tagi (SELECT, TEXTAREA un INPUT). Ja neesat iestatījis tos pašus izmērus kā ķermeņa un rindkopas tekstu, jums var būt nepatīkami pārsteigts, kā pārlūkprogrammas tos pārveido.
p, th, td, li, dd, dt, ul, ol, blockquote, q, akronīms, abbr, a, input, select, textarea (margin: 0; polsterējums: 0; fonts: parasts normāls parasts 1em / 1,25 Arial, Helvetica, sans-serif; }Ir arī patīkami dot jūsu citātus (BLOCKQUOTE un Q), akronīmus un saīsinājumus nedaudz papildu stilu, lai tie izceltu nedaudz vairāk:
blokshēma {margin: 1.25em; polsterējums: 1.25em} q {font-style: italic; } akronīms, abbr (kursors: palīdzība; robeža-apakšā: 1px punktiņi; }Saites un attēli
Saites ir viegli pārvaldāmas un mainās no iepriekšminētā spilgti zilā pasvītrotā teksta. Es gribētu, lai vienmēr manas saites paliek pasvītras, bet, ja vēlaties to atšķirīgi, jūs varat iestatīt šīs opcijas atsevišķi. Es arī neiekļauj krāsas maģistra stila lapā, jo tas ir atkarīgs no dizaina.
a, a: saite, a: apmeklēja, a: aktīvs, a: peles kursors {text-decoration: underline; }Ar attēliem ir svarīgi izslēgt robežas. Lai gan lielākā daļa pārlūkprogrammu nerada robežu ap vienkāršu attēlu, kad attēls ir saistīts, pārlūkprogrammas ieslēdz robežu. Lai to novērstu:
img {robeža: nav; }Tabulas
Kamēr tabulas vairs netiek izmantotas izkārtojuma nolūkos, vietne joprojām tos var izmantot faktiskajiem tabluāra datiem. Šī ir laba HTML tabulu izmantošana. Mēs jau esam pārliecinājušies, ka noklusējuma teksta lielums ir vienāds ar tabulas šūnām, taču ir daži citi stili, kas jānosaka tā, lai jūsu tabulas nemainītos:
tabula {margin: 0; polsterējums: 0; robeža: nav; }Veidlapas
Tāpat kā citiem elementiem, jums vajadzētu iztīrīt malas un spilvenus ap veidlapām. Vēl viena lieta, ko es gribētu darīt, ir pārrakstīt formas tagu kā " inline ", lai tas neradītu papildu vietu, kur kodu ievietojat tagu. Tāpat kā ar citiem teksta elementiem, es definē fontu informāciju izvēlētajai teksta lapai un augšupvērstajai ieejai, lai tā būtu tāda pati kā pārējā manā tekstā.
forma {margin: 0; polsterējums: 0; displejs: inline; }Tāpat ir ieteicams mainīt etiķetes kursoru. Tas palīdz cilvēkiem redzēt, ka etiķete kaut ko darīs, kad uzklikšķinās uz tā.
etiķete (kursors: rādītājs; }Kopīgas klases
Šai galvenās stilu lapas daļai jums vajadzētu definēt klases, kas jums ir jēgas. Šīs ir dažas no klasēm, kuras es visbiežāk lietoju. Ņemiet vērā, ka tiem nav iestatīts neviens konkrēts elements, tāpēc jūs varat piešķirt tiem visu, kas jums nepieciešams:
Skaidrs {skaidrs: abi; } .floatLeft {peldēt: pa kreisi; } .floatRight (peldēt: pa labi; } .textLeft {text-align: left; } .textRight {text-align: labais; }. textCenter {text-align: centrs; } .textJustify {text-align: justify; } .blockCenter {display: block; margin-left: auto; margin-right: auto; } / * neaizmirstiet iestatīt platumu * / .bold {font-weight: bold; } .italic {font-style: italic; } .underline {text-decoration: underline; } .noindent (margin-left: 0; polsterējums pa kreisi: 0; }. nomargin {margin: 0; } .nopadding {padding: 0; } .nobullet {list-style: nav; list-style-image: neviens; }Atcerieties, ka, jo šīs klases ir rakstītas pirms jebkura cita stila, un tās ir tikai klases, tās var viegli ignorēt ar specifiskākiem stila rekvizītiem, kas vēlāk tiek parādīti kaskādē . Ja konstatējat, ka elementā ir iestatīta kopīga klase, un tas nestājas spēkā, jums jāpārliecinās, vai kādā no vēlākajām stilu lapām, kas ietekmē to pašu elementu, nav kāda cita stila.
Visu galveno stilu tabula
/ * Vispārējie noklusējumi * / html, ķermenis (margin: 0px; polsterējums: 0 pikseļi; robeža: 0px; } ķermenis {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Virsraksti * / h1, h2, h3, h4, h5, h6 {margin: 0; polsterējums: 0; fonta svars: normāls; fonta ģimene: Arial, Helvetica, sans-serif; } / * Teksta stili * / p, th, td, li, dd, dt, ul, ol, blockquote, q, akronīms, abbr, a, ievadi, select, textarea {margin: 0; polsterējums: 0; fonts: parasts normāls parasts 1em / 1,25 Arial, Helvetica, sans-serif; } blockquote {margin: 1.25em; polsterējums: 1.25em} q {font-style: italic; } akronīms, abbr (kursors: palīdzība; robeža-apakšā: 1px punktiņi; } mazs {font-size: .85em; } liels {font-size: 1.2em; } / * Saites un attēli * / a, a: saite, a: apmeklēts, a: aktīvs, a: hover {text-decoration: underline; } img {robeža: nav; } / * Tabulas * / tabula {margin: 0; polsterējums: 0; robeža: nav; } / * Veidlapas * / form {margin: 0; polsterējums: 0; displejs: inline; } etiķete {kursors: rādītājs; } / * Kopējās klases * / .clear {clear: both; } .floatLeft {peldēt: pa kreisi; } .floatRight (peldēt: pa labi; } .textLeft {text-align: left; } .textRight {text-align: labais; }. textCenter {text-align: centrs; } .textJustify {text-align: justify; } .blockCenter {display: block; margin-left: auto; margin-right: auto; } / * neaizmirstiet iestatīt platumu * / .bold {font-weight: bold; } .italic {font-style: italic; } .underline {text-decoration: underline; } .noindent (margin-left: 0; polsterējums pa kreisi: 0; }. nomargin {margin: 0; } .nopadding {padding: 0; } .nobullet {list-style: nav; list-style-image: neviens; }Jennifera Krīnina oriģinālais raksts. Rediģējis Džeremijs Girards no 10/6/17