CSS tutoriál

DOMŮ CSS Úvod do CSS Syntaxe CSS Selektory CSS CSS Jak na to Komentáře CSS CSS barvy CSS pozadí Hranice CSS Okraje CSS CSS padding Výška/šířka CSS CSS Box Model obrys CSS Text CSS CSS písma Ikony CSS CSS odkazy CSS seznamy CSS tabulky Zobrazení CSS CSS Max-šířka Pozice CSS CSS Z-index Přetečení CSS CSS Float CSS Inline-block CSS zarovnat CSS kombinátory Pseudotřída CSS Pseudoprvek CSS Neprůhlednost CSS Navigační lišta CSS Rozbalovací seznamy CSS Galerie obrázků CSS CSS obrázkoví skřítci CSS Attr Selectory CSS formuláře Počítadla CSS Rozvržení webu CSS Jednotky CSS Specifičnost CSS CSS !důležité Matematické funkce CSS

Pokročilé CSS

CSS zaoblené rohy Obrázky ohraničení CSS CSS pozadí CSS barvy Klíčová slova barev CSS Přechody CSS CSS Shadows Textové efekty CSS Webová písma CSS CSS 2D transformace CSS 3D transformace Přechody CSS CSS animace CSS Tooltips Obrázky ve stylu CSS CSS obrazový odraz Přizpůsobení objektu CSS CSS objekt-pozice CSS maskování Tlačítka CSS Stránkování CSS Více sloupců CSS Uživatelské rozhraní CSS CSS proměnné Velikost CSS boxu CSS mediální dotazy Příklady CSS MQ CSS Flexbox

CSS responzivní

Úvod RWD Výhled RWD Zobrazení mřížky RWD Dotazy na média RWD Obrázky RWD Videa RWD Rámce RWD Šablony RWD

CSS mřížka

Úvod do mřížky Mřížkový kontejner Položka mřížky

CSS SASS

Výukový program SASS

Příklady CSS

CSS šablony Příklady CSS css kvíz Cvičení CSS CSS certifikát

CSS reference

Reference CSS Selektory CSS Funkce CSS CSS Reference Aural Webová bezpečná písma CSS CSS animovatelné Jednotky CSS Převodník CSS PX-EM CSS barvy Hodnoty barev CSS Výchozí hodnoty CSS Podpora prohlížeče CSS

CSS písma Google


Písma Google

Pokud nechcete používat žádné ze standardních písem v HTML, můžete použít Google Fonts.

Písma Google jsou k použití zdarma a můžete si vybrat z více než 1000 písem.


Jak používat písma Google

Stačí přidat speciální odkaz na šablonu stylů v sekci <head> a poté se odkázat na písmo v CSS.

Příklad

Zde chceme použít písmo s názvem „Sofia“ z Google Fonts:

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  font-family: "Sofia", sans-serif;
}
</style>
</head>

Výsledek:

Sofia Font

Lorem ipsum dolor sit amet.

123456790

Příklad

Zde chceme použít písmo s názvem „Trirong“ z Google Fonts:

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
  font-family: "Trirong", serif;
}
</style>
</head>

Výsledek:

Trirong Font

Lorem ipsum dolor sit amet.

123456790

Příklad

Zde chceme použít písmo s názvem „Audiowide“ od Google Fonts:

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
  font-family: "Audiowide", sans-serif;
}
</style>
</head>

Výsledek:

Audiowide Font

Lorem ipsum dolor sit amet.

123456790

Poznámka: Při zadávání písma v CSS vždy uveďte alespoň jedno záložní písmo (abyste předešli neočekávanému chování). Takže i zde byste měli přidat obecnou rodinu písem (jako patka nebo bezpatka) na konec seznamu.

Seznam všech dostupných písem Google najdete v našem Návodu – výukovém programu písem Google .


Použijte více písem Google

Chcete-li použít více písem Google, stačí oddělit názvy písem svislým znakem ( |), jako je tento:

Příklad

Žádost o více písem:

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Sofia", sans-serif;}
h1.c {font-family: "Trirong", serif;}
</style>
</head>

Výsledek:

Audiowide Font

Sofia Font

Trirong Font

Poznámka: Vyžádání více písem může zpomalit vaše webové stránky! Tak na to pozor.



Stylování písem Google

Samozřejmě můžete stylovat písma Google, jak chcete, pomocí CSS!

Příklad

Upravte styl písma "Sofia":

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  font-family: "Sofia", sans-serif;
  font-size: 30px;
  text-shadow: 3px 3px 3px #ababab;
}
</style>
</head>

Výsledek:

Sofia Font

Lorem ipsum dolor sit amet.

123456790


Povolení efektů písma

Google také povolil různé efekty písem, které můžete použít.

Nejprve přidejte do Google API a poté přidejte speciální název třídy k prvku, který bude používat speciální efekt. Název třídy vždy začíná a končí na .effect=effectnamefont-effect-effectname

Příklad

Přidejte efekt ohně do písma „Sofia“:

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<style>
body {
  font-family: "Sofia", sans-serif;
  font-size: 30px;
}
</style>
</head>
<body>

<h1 class="font-effect-fire">Sofia on Fire</h1>

</body>

Výsledek:

Sofia on Fire

Chcete-li požádat o více efektů písem, stačí oddělit názvy efektů svislým znakem ( |), jako je tento:

Příklad

Přidejte více efektů do písma "Sofia":

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
body {
  font-family: "Sofia", sans-serif;
  font-size: 30px;
}
</style>
</head>
<body>

<h1 class="font-effect-neon">Neon Effect</h1>
<h1 class="font-effect-outline">Outline Effect</h1>
<h1 class="font-effect-emboss">Emboss Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple Shadow Effect</h1>

</body>

Výsledek:

Neon Effect

Outline Effect

Emboss Effect

Multiple Shadow Effect