Prehľad kaskádových štýlov so štítkom vzorového štýlu
Keď vytvárate webové stránky od začiatku, je šikovný začať so základnými definovanými štýlmi. Je to ako začať čistým plátnom a čerstvými kefami. Jeden z prvých problémov, s ktorými sa web dizajnéri stretávajú, je, že webové prehliadače sú úplne odlišné. Predvolená veľkosť písma sa líši od platformy k platforme, predvolená rodina písma je iná, niektoré prehliadače definujú okraje a polstrovanie na značke tela, zatiaľ čo iné nie a tak ďalej. Objavte tieto nekonzistentnosti definovaním predvolených štýlov pre vaše webové stránky.
CSS a sadu znakov
Najprv najprv nastavte znakovú sadu vašich CSS dokumentov na utf-8 . Aj keď je pravdepodobné, že väčšina stránok, ktoré navrhujete, sú napísané v angličtine, niektoré môžu byť lokalizované - prispôsobené rôznym jazykovým a kultúrnym kontextom. Keď sú, utf-8 zjednodušuje proces. Nastavenie znakovej sady v externom šablóne štýlu nebude mať prednosť pred hlavičkou HTTP , ale vo všetkých ostatných situáciách to bude.
Je jednoduché nastaviť znakovú sadu. V prvom riadku dokumentu CSS napíšte:
@scharset "utf-8";Týmto spôsobom, ak používate medzinárodné znaky vo vlastnostiach obsahu alebo ako názvy triedy a ID, list štýlov bude stále fungovať správne.
Styling Body Page
Ďalšia vec, ktorú potrebuje predvolený štýl, sú štýly, ktoré majú nulové okraje, polstrovanie a okraje. Tým sa zabezpečí, že všetky prehliadače umiestnia obsah na rovnaké miesto a medzi prehliadačom a obsahom nie sú žiadne skryté medzery. Pre väčšinu webových stránok je to príliš blízko okraja pre text, ale je dôležité, aby ste tam začali, aby boli obrázky na pozadí a rozdelenia rozloženia správne zoradené.
html, body {margin: 0px; polstrovanie: 0px; okraj: 0px; }Nastavte predvolenú farbu popredia alebo farby na čiernu a predvolenú farbu pozadia na bielu. Zatiaľ čo to bude s najväčšou pravdepodobnosťou meniť väčšinu návrhov webových stránok, pretože tieto štandardné farby sú nastavené na tele a značka HTML najprv uľahčuje čítanie a prácu s touto stránkou.
html, telo {farba: # 000; pozadie: #fff; }Predvolené štýly písma
Veľkosť písma a rodina písma sa niekedy nevyhnutne zmenia, keď sa dizajn zmení, ale začne s predvolenou veľkosťou písma 1 em a predvolenou rodinou fontov Arial, Ženeva alebo niektorého iného písma sans serif. Použitie ems udržuje stránku čo najprístupnejšiu a sans serif písmo je čitateľnejšie na obrazovke.
html, body, p, t, td, li, dd, dt {font: 1m Arial, Helvetica, sans-serif; }Môže existovať aj iné miesto, kde by ste mohli nájsť text, ale p , th , td , li , dd a dt sú dobrým štartom pre definovanie základného písma. Zahrňte HTML a textové body len v prípade, ale mnoho prehliadačov prepíše voľby písma, ak definujete len písma pre HTML alebo telo.
titulky
Hlavičky HTML sú dôležité na to, aby pomohli vašim stránkam obrys a nechali vyhľadávače hlbšie do vašej stránky. Bez štýlov sú všetky pomerne škaredé, takže nastavte predvolené štýly na všetky z nich a definujte rodinu fontov a veľkosti písma pre každého.
h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; } h1 {veľkosť písma: 2m; } h2 {veľkosť písma: 1.5; } h3 {veľkosť písma: 1.2; } h4 {veľkosť písma: 1.0; } h5 {veľkosť písma: 0,9; } h6 {veľkosť písma: 0,8; }Nezabudnite na odkazy
Stýlovanie farieb odkazov je takmer vždy kritickou súčasťou návrhu, ale ak ich nedefinujete v predvolených štýloch, je pravdepodobné, že zabudnete aspoň jednu z pseudotried. Definujte ich s niektorými malými variantmi na modrej farbe a potom ich zmeňte, akonáhle máte paletu farieb pre danú lokalitu.
Ak chcete nastaviť odkazy v odtieňoch modrej, nastavte:
- odkazy ako modré
- navštívené odkazy ako tmavo modré
- umiestnite odkazy ako svetlo modré
- aktívne odkazy ako ešte bledšie modré
ako je uvedené v tomto príklade:
a: odkaz {farba: # 00f; } a: navštívil {farba: # 009; } a: vznášať {color: # 06f; } a: aktívna {farba: # 0cf; } Styčením liniek s pomerne neškodnou farebnou schémou zabezpečuje, že nezabudnem na žiadnu triedu, a taktiež ich robí o niečo menej hlasným ako štandardné modré, červené a fialové.Plný štýl listu
Tu je úplný štýl štýlu:
@scharset "utf-8"; html, body {margin: 0px; polstrovanie: 0px; okraj: 0px; farba: # 000; pozadie: #fff; } html, body, p, t, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; } h1 {veľkosť písma: 2m; } h2 {veľkosť písma: 1.5; } h3 {veľkosť písma: 1.2; } h4 {veľkosť písma: 1.0; } h5 {veľkosť písma: 0,9; } h6 {veľkosť písma: 0,8; } a: odkaz {farba: # 00f; } a: navštívil {farba: # 009; } a: vznášať {color: # 06f; } a: aktívna {farba: # 0cf; }