Keď ty vytvoriť úplne nový web, je rozumné začať so základnými definovanými štýlmi. Je to ako začať s čistým plátnom a čerstvými štetcami. Jedným z prvých problémov, s ktorými sa weboví dizajnéri stretávajú, je práve ten webové prehliadače sú všetky odlišné. Predvolená veľkosť písma sa líši od platformy k platforme, predvolená rodina písma je iná, niektoré prehľadávače definujú okraje a výplň na značke body, zatiaľ čo iné nie, atď. Tieto nezrovnalosti môžete obísť definovaním predvolených štýlov pre svoje webové stránky.
CSS a znaková sada
Najskôr je potrebné nastaviť znakovú sadu dokumentov CSS utf-8. Aj keď je pravdepodobné, že väčšina stránok, ktoré navrhujete, je napísaná v angličtine, niektoré môžu byť lokalizované - upravené pre rôzne jazykové a kultúrne súvislosti. Keď sú, utf-8 zjednodušuje postup. Nastavenie znakovej sady v externá štýlová tabuľa nebude mať prednosť pred HTTP hlavička, ale vo všetkých ostatných situáciách bude.
Nastaviť znakovú sadu je ľahké. Za prvý riadok dokumentu CSS napíš:
@charset "utf-8";
Týmto spôsobom, ak vo vlastnosti obsahu alebo ako názvy tried a ID, štýl bude stále fungovať správne.
Styling tela stránky
Ďalšia vec, ktorú predvolená šablóna štýlov potrebuje, sú štýly nulové okraje, polstrovanie a orámovanie. Takto sa zabezpečí, že všetky prehliadače umiestnia obsah na rovnaké miesto a medzi prehliadačom a obsahom nebudú žiadne skryté medzery. Pre väčšinu webových stránok je to príliš blízko k okraju textu, je však dôležité začať od toho, aby boli obrázky na pozadí a rozdelenie rozloženia správne zoradené.
html, body {
okraj: 0px;
výplň: 0px;
orámovanie: 0px;
}
Nastavte predvolenú farbu popredia alebo písma na čiernu a predvolenú farbu pozadia na bielu. Aj keď sa to s najväčšou pravdepodobnosťou zmení pre väčšinu návrhov webových stránok, ktoré majú tieto štandardné farby nastavené na tele a Značka HTML spočiatku uľahčuje čítanie a prácu so stránkou.
html, body {
farba: # 000;
pozadie: #fff;
}
Predvolené štýly písma
Veľkosť a rodina fontov sú niečo, čo sa nevyhnutne zmení, keď sa dizajn uchytí, ale začnite s predvolenou veľkosťou písma 1 em a predvolené rodina písma Arial, Ženeva alebo iné bezpätkové písmo. Vďaka použitiu ems je stránka čo najprístupnejšia a bez pätkové písmo je na obrazovke čitateľnejšie.
html, body, p, th, td, li, dd, dt {
písmo: 1em Arial, Helvetica, sans-serif;
}
Môžu existovať aj iné miesta, kde môžete nájsť text, ale p, th, td, li, dda dt sú dobrým začiatkom pri definovaní základného písma. Zahrnúť HTML a telo pre každý prípad, ale veľa prehľadávačov prepíše možnosti písma ak definujete svoje písma iba pre HTML alebo text.
Nadpisy
Nadpisy HTML sú dôležité na to, aby pomohli obrysom vášho webu a umožnili vyhľadávačom dostať sa hlbšie do vášho webu. Bez štýlov sú všetky dosť škaredé, takže na všetky z nich nastavte predvolené štýly a pre každý z nich definujte rodinu a veľkosti písma.
h1, h2, h3, h4, h5, h6 {
rodina fontov: Arial, Helvetica, sans-serif;
}
h1 {font-size: 2em; }
h2 {font-size: 1.5em; }
h3 {veľkosť písma: 1,2em; }
h4 {font-size: 1.0em; }
h5 {veľkosť písma: 0,9em; }
h6 {veľkosť písma: 0,8em; }
Nezabudnite na odkazy
Styling farieb odkazov je takmer vždy dôležitou súčasťou dizajnu, ale ak ich nedefinujete v predvolených štýloch, je pravdepodobné, že zabudnete aspoň na jednu z pseudotried. Definujte ich s malou modrou variáciou a potom ich zmeňte, až budete mať definovanú farebnú paletu pre web.
Ak chcete nastaviť odkazy v modrých odtieňoch, sada:
- odkazy ako modrá
- navštívené odkazy ako tmavomodrá
- hover links ako svetlo modrá
- aktívne odkazy ako ešte bledšia modrá
Ako je uvedené v tomto príklade:
a: link {color: # 00f; }
a: navštívil {color: # 009; }
a: hover {color: # 06f; }
a: active {color: # 0cf; }
Vďaka štylizácii odkazov s pomerne neškodnou farebnou schémou zaisťuje, že nezabudnete na žiadnu z tried, a tiež ich robí o niečo menej hlasnými ako predvolená modrá, červená a fialová.
Celý štýl
Tu je celý zoznam štýlov:
@charset "utf-8";
html, body {
okraj: 0px;
výplň: 0px;
orámovanie: 0px;
farba: # 000;
pozadie: #fff;
}
html, body, p, th, td, li, dd, dt {
písmo: 1em Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
rodina fontov: Arial, Helvetica, sans-serif;
}
h1 {font-size: 2em; }
h2 {font-size: 1.5em; }
h3 {veľkosť písma: 1,2em; }
h4 {font-size: 1.0em; }
h5 {veľkosť písma: 0,9em; }
h6 {veľkosť písma: 0,8em; }
a: link {color: # 00f; }
a: navštívil {color: # 009; }
a: hover {color: # 06f; }
a: active {color: # 0cf; }