Kad jūs izveidojiet vietni no nulles, ir gudri sākt ar definētajiem pamata stiliem. Tas ir tāpat kā sākt ar tīru audeklu un svaigām sukām. Viena no pirmajām problēmām, ar ko saskaras tīmekļa dizaineri, ir tā tīmekļa pārlūkprogrammas visi ir atšķirīgi. Fontu noklusējuma lielums dažādās platformās ir atšķirīgs, noklusējuma fontu saime ir atšķirīga, dažas pārlūkprogrammas ķermeņa marķējumā nosaka piemales un pildījumu, bet citas ne utt. Pārvariet šīs neatbilstības, nosakot savu tīmekļa lapu noklusējuma stilus.
CSS un rakstzīmju kopa
Pirmkārt, vispirms iestatiet CSS dokumentu rakstzīmju kopu utf-8. Lai gan ir iespējams, ka lielākā daļa jūsu izstrādāto lapu ir rakstītas angļu valodā, dažas no tām var būt lokalizētas - pielāgotas dažādiem valodas un kultūras kontekstiem. Kad tie ir, utf-8 vienkāršo procesu. Rakstzīmju kopas iestatīšana ārējā stila lapa nebūs prioritāte pār HTTP galveni, bet visās pārējās situācijās tā būs.
Rakstzīmju kopu ir viegli iestatīt. CSS dokumenta pirmajai rindai ierakstiet:
@charset "utf-8";
Tādā veidā, ja satura īpašumā vai kā izmantojat starptautiskas rakstzīmes klases un ID nosaukumi, stila lapa joprojām darbosies pareizi.
Lapas ķermeņa veidošana
Nākamā lieta, kas nepieciešama noklusējuma stila lapai, ir stili nulles malas, polsterējumu un apmales. Tas nodrošina, ka visas pārlūkprogrammas ievieto saturu vienā un tajā pašā vietā un starp pārlūkprogrammu un saturu nav slēptu atstarpju. Lielākajai daļai tīmekļa lapu tas ir pārāk tuvu teksta malai, taču ir svarīgi sākt ar to, lai fona attēli un izkārtojuma sadalījumi būtu pareizi ierindoti.
html, body {
piemale: 0px;
polsterējums: 0px;
apmale: 0px;
}
Iestatiet noklusējuma priekšplāna vai fonta krāsu uz melnu un noklusējuma fona krāsu uz baltu. Lai gan tas, visticamāk, mainīsies lielākajai daļai tīmekļa lapu dizaina, kam šīs standarta krāsas ir iestatītas uz ķermeņa un HTML tags Sākumā lapu ir vieglāk lasīt un strādāt.
html, body {
krāsa: # 000;
fons: #fff;
}
Noklusētie fontu stili
Fonta lielums un fontu saime ir tas, kas neizbēgami mainīsies, kad dizains būs spēkā, bet sākas ar noklusējuma fonta lielumu 1 em un noklusējums fontu saime Arial, Ženēvas vai kāda cita sans-serif fonts. Izmantojot ems, lapa tiek saglabāta pēc iespējas pieejamāka, un sans-serif fonts ir labāk salasāms ekrānā.
html, body, p, th, td, li, dd, dt {
fonts: 1em Arial, Helvetica, sans-serif;
}
Var būt arī citas vietas, kur jūs varat atrast tekstu, bet lpp, th, td, li, dd, un dt ir labs sākums pamata fonta noteikšanai. Iekļaut HTML un ķermeņa katram gadījumam, taču daudzas pārlūkprogrammas ignorē fontu izvēle ja definējat tikai HTML vai pamatteksta fontus.
Virsraksti
HTML virsraksti ir svarīgi izmantot, lai palīdzētu jūsu vietnei ieskicēt un ļaut meklētājprogrammām iedziļināties jūsu vietnē. Bez stiliem tie visi ir diezgan neglīti, tāpēc iestatiet visiem noklusējuma stilus un katram definējiet fontu saimi un fontu lielumus.
h1, h2, h3, h4, h5, h6 {
fontu saime: Arial, Helvetica, sans-serif;
}
h1 {font-size: 2em; }
h2 {fonta lielums: 1,5em; }
h3 {font-size: 1.2em; }
h4 {font-size: 1.0em; }
h5 {font-size: 0.9em; }
h6 {font-size: 0.8em; }
Neaizmirstiet saites
Saites krāsu veidošana gandrīz vienmēr ir kritiska dizaina sastāvdaļa, taču, ja jūs tās nedefinējat noklusējuma stilos, iespējams, ka aizmirstat vismaz vienu no pseidoklasēm. Definējiet tos ar nelielām zilās variācijām un pēc tam mainiet tos, kad vietnei ir noteikta krāsu palete.
Lai iestatītu saites zilos toņos, iestatiet:
- saites kā zils
- apmeklētās saites kā tumši zils
- virziet saites kā gaiši zils
- aktīvās saites kā vēl bālāka zila
Kā parādīts šajā piemērā:
a: saite {color: # 00f; }
a: apmeklēja {color: # 009; }
a: virziet kursoru {color: # 06f; }
a: aktīvs {color: # 0cf; }
Veidojot saites ar diezgan nekaitīgu krāsu shēmu, tas nodrošina, ka neaizmirsīsit nevienu no klasēm, kā arī padara tos nedaudz mazāk skaļus nekā noklusējuma zilā, sarkanā un violetā krāsā.
Pilna stila lapa
Šeit ir pilna stila lapa:
@charset "utf-8";
html, body {
piemale: 0px;
polsterējums: 0px;
apmale: 0px;
krāsa: # 000;
fons: #fff;
}
html, body, p, th, td, li, dd, dt {
fonts: 1em Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
fontu saime: Arial, Helvetica, sans-serif;
}
h1 {font-size: 2em; }
h2 {fonta lielums: 1,5em; }
h3 {font-size: 1.2em; }
h4 {font-size: 1.0em; }
h5 {font-size: 0.9em; }
h6 {font-size: 0.8em; }
a: saite {color: # 00f; }
a: apmeklēja {color: # 009; }
a: virziet kursoru {color: # 06f; }
a: aktīvs {color: # 0cf; }