Kada tu kurti svetainę nuo nulio, protinga pradėti nuo apibrėžtų pagrindinių stilių. Tai tarsi pradžia nuo švarios drobės ir šviežių teptukų. Viena pirmųjų problemų, su kuria susiduria interneto dizaineriai, yra ta interneto naršyklės yra visi skirtingi. Numatytasis šrifto dydis skirtingose platformose skiriasi, numatytoji šriftų šeima yra kitokia, kai kurios naršyklės apibrėžia paraštes ir užpildą kūno žymoje, o kitos ne ir pan. Norėdami išvengti šių neatitikimų, nustatykite numatytuosius savo tinklalapių stilius.
CSS ir simbolių rinkinys
Pirmiausia nustatykite CSS dokumentų simbolių rinkinį į utf-8. Nors tikėtina, kad dauguma jūsų sukurtų puslapių yra parašyti anglų kalba, kai kurie gali būti lokalizuoti - pritaikyti skirtingam kalbiniam ir kultūriniam kontekstui. Kai jie yra, utf-8 supaprastina procesą. Simbolių rinkinio nustatymas išorinis stiliaus lapas nebus pirmenybė prieš HTTP antraštę, bet visose kitose situacijose tai bus.
Lengva nustatyti simbolių rinkinį. Pirmoje CSS dokumento eilutėje parašykite:
@charset "utf-8";
Tokiu būdu, jei turinio nuosavybėje arba kaip naudojate tarptautinius simbolius klasės ir asmens vardai, stiliaus lapas vis tiek veiks teisingai.
Puslapio kūno stilius
Kitas dalykas, kurio reikia numatytam stiliaus lapui, yra stiliai nulio maržos, užpildas ir kraštai. Tai užtikrina, kad visos naršyklės įdėtų turinį į tą pačią vietą ir tarp naršyklės ir turinio nebūtų jokių paslėptų tarpų. Daugumai tinklalapių tai yra per arti teksto krašto, tačiau svarbu pradėti nuo to, kad fono paveikslėliai ir išdėstymo padalijimai būtų išdėstyti teisingai.
HTML, body {
paraštė: 0px;
užpildymas: 0px;
kraštinė: 0 taškų;
}
Numatytąją priekinio arba šrifto spalvą nustatykite į juodą, o numatytąją fono spalvą - į baltą. Nors tai greičiausiai pasikeis daugeliui tinklalapių dizainų, turint šias standartines spalvas ant kūno ir HTML žyma iš pradžių puslapį lengviau skaityti ir dirbti.
HTML, body {
spalva: # 000;
fonas: #fff;
}
Numatytieji šriftų stiliai
Šrifto dydis ir šriftų šeima neišvengiamai pasikeis, kai dizainas įsigalios, bet prasideda numatytuoju šrifto dydžiu 1 em ir numatytasis šrifto šeima Arialo, Ženevos ar kitų sans-serifas. Naudojant ems, puslapis yra kuo prieinamesnis, o „sans-serif“ šriftas yra geriau įskaitomas ekrane.
HTML, body, p, th, td, li, dd, dt {
šriftas: 1em Arial, Helvetica, sans-serif;
}
Gali būti ir kitų vietų, kuriose galite rasti teksto, bet p, tūkst, td, li, ddir dt yra gera pradžia apibrėžiant pagrindinį šriftą. Įtraukti HTML ir kūnas tik tuo atveju, bet daugelis naršyklių nepaiso šrifto pasirinkimas jei apibrėžiate tik HTML ar teksto šriftus.
Antraštės
HTML antraštės yra svarbu naudoti siekiant padėti jūsų svetainei apibūdinti ir leisti paieškos sistemoms gilintis į jūsų svetainę. Be stilių, jie visi yra gana negraži, todėl nustatykite jiems visus numatytuosius stilius ir kiekvienam nustatykite šriftų šeimą ir šriftų dydžius.
h1, h2, h3, h4, h5, h6 {
šriftų šeima: Arialas, Helvetica, sans-serifas;
}
h1 {šrifto dydis: 2em; }
h2 {šrifto dydis: 1,5em; }
h3 {šrifto dydis: 1,2em; }
h4 {šrifto dydis: 1,0em; }
h5 {šrifto dydis: 0,9em; }
h6 {šrifto dydis: 0,8em; }
Nepamirškite nuorodų
Nuorodų spalvų stilius beveik visada yra kritinė dizaino dalis, tačiau jei jų neapibrėžiate pagal numatytuosius stilius, yra tikimybė, kad pamiršite bent vieną iš pseudoklasių. Apibrėžkite juos su nedideliais mėlynos spalvos variantais ir pakeiskite juos, kai tik nustatysite svetainės spalvų paletę.
Norėdami nustatyti nuorodos mėlynos spalvos atspalviais, rinkinys:
- nuorodos kaip mėlyna
- aplankytos nuorodos kaip tamsiai mėlyna
- užveskite nuorodas kaip šviesiai mėlyna
- aktyvios nuorodos kaip dar blankesnė mėlyna
Kaip parodyta šiame pavyzdyje:
a: nuoroda {spalva: # 00f; }
a: aplankyta {color: # 009; }
a: užveskite pelės žymeklį {color: # 06f; }
a: aktyvus {spalva: # 0cf; }
Sukurdamas nuorodas gana nekenksminga spalvų schema, tai užtikrina, kad nepamiršite nė vienos klasės, taip pat jas paverčia šiek tiek mažiau garsiomis nei numatytoji mėlyna, raudona ir violetinė.
Visas stiliaus lapas
Čia yra visas stiliaus lapas:
@charset "utf-8";
HTML, body {
paraštė: 0px;
užpildymas: 0px;
kraštinė: 0 taškų;
spalva: # 000;
fonas: #fff;
}
HTML, body, p, th, td, li, dd, dt {
šriftas: 1em Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
šriftų šeima: Arialas, Helvetica, sans-serifas;
}
h1 {šrifto dydis: 2em; }
h2 {šrifto dydis: 1,5em; }
h3 {šrifto dydis: 1,2em; }
h4 {šrifto dydis: 1,0em; }
h5 {šrifto dydis: 0,9em; }
h6 {šrifto dydis: 0,8em; }
a: nuoroda {spalva: # 00f; }
a: aplankyta {color: # 009; }
a: užveskite pelės žymeklį {color: # 06f; }
a: aktyvus {spalva: # 0cf; }