Přehled kaskádových stylů se vzorkem listu stylů
Když vytvoříte web od začátku, je to chytré začít se základními definovanými styly. Je to jako začínat čistým plátnem a čerstvými kartáči. Jeden z prvních problémů, s nimiž se weboví návrháři potýkají, je, že webové prohlížeče se liší. Výchozí velikost písma se liší od platformy k platformě, výchozí rodina písma je odlišná, některé prohlížeče definují okraje a polstrování na značce těla, zatímco ostatní ne, a tak dále. Obraťte se na tyto nesrovnalosti definováním výchozích stylů pro vaše webové stránky.
CSS a sadu znaků
Nejdříve nejprve nastavte sadu znaků CSS na utf-8 . I když je pravděpodobné, že většina stránek, které navrhujete, jsou napsána v angličtině, některé mohou být lokalizovány - přizpůsobeny pro různé jazykové a kulturní souvislosti. Když jsou, utf-8 zjednodušuje proces. Nastavení znakové sady ve vnějším stylu nebude mít přednost před hlavičkou HTTP , ale ve všech ostatních situacích to bude.
Sadu znaků můžete snadno nastavit. Pro první řádek dokumentu CSS napište:
@charset "utf-8";Tímto způsobem, pokud používáte mezinárodní znaky ve vlastnostech obsahu nebo jako jména třídy a ID, list stylů bude fungovat správně.
Styling Body Page
Další věc, kterou potřebuje výchozí stylový list, jsou styly, které mají nulové okraje, polstrování a hranice. Tím zajistíte, že všechny prohlížeče umístí obsah na stejné místo a mezi prohlížečem a obsahem nejsou žádné skryté mezery. Pro většinu webových stránek je to příliš blízko okraji textu, ale je důležité začít tam, aby byly obrázky pozadí a rozložení rozložení správně seřazeny.
html, tělo {margin: 0px; polstrování: 0px; hranice: 0px; }}Nastavte výchozí barvu popředí nebo písma na černé a výchozí barvu pozadí na bílou. Zatímco to bude pravděpodobně změnit pro většinu návrhů webových stránek, mít tyto standardní barvy nastavené na těle a tag HTML nejprve dělá stránku snadnější číst a pracovat s.
html, tělo {barva: # 000; pozadí: #fff; }}Výchozí styly písma
Velikost písma a rodina písem jsou něco, co se nevyhnutelně změní, jakmile se návrh počítá, ale začíná s výchozí velikostí písma 1 em a výchozí písma rodiny Arial, Ženeva nebo nějaké jiné písmo sans serif. Použití ems udržuje stránku co nejvíce přístupnou a písmo sans serif je čitelnější na obrazovce.
html, body, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; }}Mohou existovat další místa, kde byste mohli najít text, ale p , th , td , li , dd a dt jsou dobrý začátek pro definování základního písma. Zahrňte kód HTML a tělo jen pro případ, ale mnoho prohlížečů převádí volby písma, pokud definujete pouze písma pro HTML nebo tělo.
Nadpisy
Hlavy ve formátu HTML jsou důležité k tomu, aby pomohly vaší stránce načrtnout a nechaly vyhledávače dostat se hlouběji do vašeho webu. Bez stylů jsou všechny poměrně ošklivé, proto nastavují všechny výchozí styly a definují rodinu fontů a velikost písma pro každý z nich.
h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; } h1 {velikost písma: 2em; } h2 {velikost písma: 1.5; } h3 {velikost písma: 1.2m; } h4 {velikost písma: 1.0em; } h5 {velikost písma: 0,9; } h6 {velikost písma: 0,8; }}Nezapomeňte na odkazy
Styling barvy odkazů je téměř vždy kritickou součástí návrhu, ale pokud je nedefinujete ve výchozím stylu, pravděpodobně zapomenete alespoň na jednu z pseudotříd. Definujte je modrými modifikovanými malými modifikacemi a poté je změňte, jakmile budete mít paletu barev pro definované místo.
Chcete-li nastavit odkazy v odstínech modré, nastavte:
- odkazy jako modré
- navštívené odkazy jako tmavě modré
- odkazy jako světle modré
- aktivní odkazy jako ještě bleději modré
jak je ukázáno v tomto příkladu:
a: odkaz {barva: # 00f; } a: navštíveno {barva: # 009; } a: podržte {color: # 06f; } a: aktivní {color: # 0cf; } Vytvořením vazeb s poměrně neškodnou barevnou schémou zajistí, že nezapomenu na žádnou třídu a také je činí o něco méně hlasitým než standardní modrá, červená a fialová.Plný stylový list
Zde je úplný stylový list:
@charset "utf-8"; html, tělo {margin: 0px; polstrování: 0px; hranice: 0px; barva: # 000; pozadí: #fff; } html, body, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; } h1 {velikost písma: 2em; } h2 {velikost písma: 1.5; } h3 {velikost písma: 1.2m; } h4 {velikost písma: 1.0em; } h5 {velikost písma: 0,9; } h6 {velikost písma: 0,8; } a: odkaz {barva: # 00f; } a: navštíveno {barva: # 009; } a: podržte {color: # 06f; } a: aktivní {color: # 0cf; }}