Přehled kaskádových stylů (CSS) se vzorkem

click fraud protection

Když vás vytvořit nový web od nuly, je chytré začít s definovanými základními styly. Je to jako začít s čistým plátnem a čerstvými štětci. Jedním z prvních problémů, kterým weboví designéři čelí, je to internetové prohlížeče jsou různé. Výchozí velikost písma se liší od platformy na platformu, výchozí rodina písem se liší, některé prohlížeče definují okraje a odsazení na těle značky, zatímco jiné nikoli, atd. Tyto nesrovnalosti můžete obejít definováním výchozích stylů pro vaše webové stránky.

CSS a znaková sada

Nejprve nejdříve nastavte znakovou sadu svých dokumentů CSS utf-8. I když je pravděpodobné, že většina stránek, které navrhujete, je napsána v angličtině, některé mohou být lokalizovány - upravené pro různé jazykové a kulturní souvislosti. Když jsou, utf-8 zjednodušuje postup. Nastavení znakové sady v souboru externí styl nebude mít přednost před HTTP záhlaví, ale ve všech ostatních situacích ano.

Nastavit znakovou sadu je snadné. Na první řádek dokumentu CSS napište:

@charset "utf-8";
instagram viewer

Tímto způsobem, pokud používáte mezinárodní znaky ve vlastnosti obsahu nebo jako názvy tříd a ID, šablona stylů bude i nadále fungovat správně.

Styling těla stránky

Další věc, kterou výchozí list stylů potřebuje, jsou styly nulové okraje, odsazení a ohraničení. Tím zajistíte, že všechny prohlížeče umístí obsah na stejné místo a mezi prohlížečem a obsahem nebudou žádné skryté mezery. U většiny webových stránek je to příliš blízko okraje pro text, ale je důležité začít tam, aby obrázky na pozadí a rozdělení byly správně seřazené.

html, tělo {
okraj: 0px;
výplň: 0px;
ohraničení: 0px;
}

Nastavte výchozí barvu popředí nebo písma na černou a výchozí barvu pozadí na bílou. I když se to s největší pravděpodobností změní u většiny návrhů webových stránek, které mají tyto standardní barvy nastavené na těle a Značka HTML Nejprve se stránka snáze čte a pracuje se s ní.

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 design uchytí, ale začněte s výchozí velikostí písma 1 em a výchozí rodina písem z Arialu, Ženevy nebo jiných bezpatkové písmo. Použití ems udržuje stránku co nejpřístupnější a bezpatkové písmo je na obrazovce čitelnější.

html, body, p, th, td, li, dd, dt {
písmo: 1em Arial, Helvetica, sans-serif;
}

Mohou existovat i jiná místa, kde byste mohli najít text, ale str, th, td, li, dd, a dt jsou dobrým začátkem pro definování základního písma. Zahrnout HTML a tělo pouze pro případ, ale mnoho prohlížečů přepíše volby písma pokud definujete pouze písma pro HTML nebo tělo.

Nadpisy

Nadpisy HTML je důležité použít, abyste pomohli obrysům vašeho webu a umožnili vyhledávačům dostat se hlouběji do vašeho webu. Bez stylů jsou všechny docela ošklivé, takže u všech nastavte výchozí styly a definujte rodinu písem a velikosti písma pro každý z nich.

h1, h2, h3, h4, h5, h6 {
rodina fontů: Arial, Helvetica, sans-serif;
}
h1 {font-size: 2em; }
h2 {font-size: 1.5em; }
h3 {font-size: 1.2em; }
h4 {font-size: 1.0em; }
h5 {font-size: 0,9em; }
h6 {velikost písma: 0,8em; }

Nezapomeňte na odkazy

Stylování barev odkazů je téměř vždy důležitou součástí designu, ale pokud je nedefinujete ve výchozích stylech, je pravděpodobné, že zapomenete alespoň na jednu z pseudotříd. Definujte je s malou modrou variaci a poté je změňte, až budete mít definovanou paletu barev pro web.

Chcete-li nastavit Odkazy v odstínech modré, sada:

  • Odkazy jako modrá
  • navštívené odkazy jako tmavě modrá
  • hover links jako světle modrá
  • aktivní odkazy jako ještě bledší modrá

Jak ukazuje tento příklad:

a: link {color: # 00f; }
a: navštívil {color: # 009; }
a: hover {color: # 06f; }
a: aktivní {color: # 0cf; }

Stylováním odkazů s poměrně neškodným barevným schématem zajišťuje, že nezapomenete na žádnou ze tříd, a také je činí o něco méně hlasitými než výchozí modrá, červená a fialová.

Celý stylový list

Tady je celý seznam stylů:

@charset "utf-8";
html, tělo {
okraj: 0px;
výplň: 0px;
ohraničení: 0px;
barva: # 000;
pozadí: #fff;
}
html, body, p, th, td, li, dd, dt {
písmo: 1em Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
rodina fontů: Arial, Helvetica, sans-serif;
}
h1 {font-size: 2em; }
h2 {font-size: 1.5em; }
h3 {font-size: 1.2em; }
h4 {font-size: 1.0em; }
h5 {font-size: 0,9em; }
h6 {velikost písma: 0,8em; }
a: link {color: # 00f; }
a: navštívil {color: # 009; }
a: hover {color: # 06f; }
a: aktivní {color: # 0cf; }
instagram story viewer