Styly odkazů

Odkazy mají přednastavenu modrou barvu písma a podtržení (což vyplývá z historie počátků webu). První, co tedy uděláme je, že odstraníme podtržení a změníme barvu. Podtržení můžeme ponechat odkazům, které jsou přímo součástí textu, pro jejich větší zřetelnost. Odkazy v navigačním menu nastylujeme jako jednoduchý text (jednotlivé odkazy od sebe oddělené dostatečnými mezerami) nebo jako tlačítka (dostatečně velká, zejména na mobilu pro kliknutí prstem).

Kontextuální definice stylů odkazů

Jak v css souboru odlišíme odkazy v navigačním menu od odkazů, které jsou přímo v textu?

Odkazy specifikujeme na základě jejich umístění. Použijeme kontextuální definici stylu, podobně jako když jsme stylovali h1 uvnitř headeru a h1 uvnitř article.

V definici stylu uvedeme nejprve značku, ve které jsou odkazy vloženy a poté značku vlastního odkazu.

a {	/* styl pro všechny odkazy */
	text-decoration: none;
	font-weight: bold;
}
nav a { /* odkazy v navigačním bloku nav */
	color: #870000;
	padding: 5px 15px;
}
article a { /* odkazy v článku article */
	color: #660000;
}
p a {	/* odkazy v odstavci */
	text-decoration: underline;
}

Třídy stylů

Chceme-li konkrétní odkaz odlišit od ostatních odkazů (např. odkaz na stránku, v níž právě jsme), vytvoříme si třídu stylu.

Třídu stylu v css souboru zapíšeme s tečkou a názvem bez diakritiky. Příslušnému odkazu ji přiřadíme pomocí parametru class.

.aktualni { /* styl pro aktivní odkaz - odkaz na stránku, v níž právě jsme */
   color: #CC0000;
   font-weight: bold;
}

<nav>
  <a href="index.htm" class="aktualni">7 divů</a>
  <a href="technika.htm">Technika</a>
  <a href="architektura.htm">Architektura</a>
</nav>

<nav>
  <a href="index.htm">7 divů</a>
  <a href="technika.htm" class="aktualni">Technika</a>
  <a href="architektura.htm">Architektura</a>
</nav>

Obrázek s ukázkou použití třídy stylů v menu

Pseudotřídy stylů

Chceme-li odlišit první, poslední nebo n-tý prvek, můžeme použít pseudotřídu:

• :first-child
• :last-child
• :nth-child(n)

Ukázka použití pseudotřídy v menu

nav a {
  padding: 0px 15px;
  border-right: 2px solid #987535;
}
nav a:last-child {border-right: none;}

CSS pro zajištění responzivity

Vždy vytváříme nejprve jednoduché css styly pro mobily, pak přidáváme tzv. Media Queries (podmíněné styly, které zajistí změnu css vlastností odkazů a dalších prvků na zařízení od určité šířky). Pro tablet či počítač budou tedy platit styly zapsané pro mobil a přidají se styly zapsané v @media.

Můžeme také vytvořit samostatné Media Queries pro tablety a pro počítače:

Pro správné fungování Media Queries je potřeba do hlavičky (head) responzivních stránek přidat meta značku viewport:

<meta name="viewport" content="width=device-width, initial-scale=1">

Vytvoříme základní jednoduchý layout pro mobily (mobile-first) a pomocí @media přidáváme styly pro větší zařízení - tablety a počítače:

• základní layout bez @media
• @media (min-width: 700px)

Styly navigačního menu pro mobily

V následujících ukázkách jsou příklady různých stylů hlavičky s navigačním menu. Html struktura stránky je ve všech příkladech stejná - viz předchozí kapitola Návrh stránky.

Ukázka 1 - odkazy bez barvy pozadí umístěné v dolní části headeru

V této ukázce jsou prosté textové odkazy, pro lepší čitelnost posunuté na tmavou část obrázku.

/* CSS Document Divy světa - styly 1 */
@import url('https://fonts.googleapis.com/
css?family=Roboto|Shojumaru&display=swap');
body {
  margin: 0px;
  font-family: 'Roboto', sans-serif;
}
header {
  background-image: url(pozadi-mobil.jpg);
  background-size: cover;
  background-position: center top;
  padding-top: 60%;
  padding-bottom: 25px;
}
header div {
  padding-left: 5%;
  padding-right: 5%;
}
header h1 {
  color: white;
  font-family: 'Shojumaru', cursive;
  font-size: 2.5em;
  margin: 15px 10px;
}
nav a {
  color: white;
  text-decoration: none;
  padding: 2px 10px;
  font-size: 1.4em;
}

Ukázka 2 - odkazy s poloprůhlednou barvou pozadí

Tento příklad ukazuje tlačítkový styl odkazů s poloprůhlednou barvou pozadí zvolenou tak, aby byl alespoň částečně zřetelný obrázek na pozadí.

/* CSS Document Divy světa - styly 2 */
@import url('https://fonts.googleapis.com/
css?family=Roboto|Shojumaru&display=swap');
body {
  margin: 0px;
  font-family: 'Roboto', sans-serif;
}
header {
  background-image: url(pozadi-mobil.jpg);
  background-size: cover;
  background-position: center top;
  padding-top: 17%;
  padding-bottom: 20px;
}
header div {
  padding-left: 5%;
  padding-right: 5%;
}
header h1 {
  color: white;
  font-family: 'Shojumaru', cursive;
  font-size: 2.5em;
  margin: 30px 15px 20px 15px;
}
nav a {
  color: white;
  text-decoration: none;
  padding: 15px 20px;
  margin: 7px 0px ;
  font-size: 1.5em;
  display: block;   /* pod sebou */
  background-color: rgba(242,153,12,0.75);
  border-radius: 1px;
}

Ukázka 3 - odkazy s neprůhlednou barvou pozadí pod obrázkem headeru

Pro dobrou čitelnost je lepší blok s odkazy vytvořit s neprůhledným pozadím a umístit nad nebo pod obrázek. Respektive obrázek na pozadí headeru umístit tak, aby nebyl zakryt blokem menu.

/* CSS Document Divy světa - styly 3 */
@import url('https://fonts.googleapis.com/
css?family=Roboto|Shojumaru&display=swap');
body {
  margin: 0px;
  font-family: 'Roboto', sans-serif;
}
header {
  background-image: url(pozadi-mobil.jpg);
  background-size: 100% auto;
/* nevyplní celý hedear, jen na šířku */
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #030400;
/* barva pod obrázkem */
  padding-top: 43%;
  padding-bottom: 20px;
}
header div {
  padding-left: 5%;
  padding-right: 5%;
}
header h1 {
  font-family: 'Shojumaru', cursive;
  color: white;
  font-size: 2.5em;
  margin: 30px 15px 30px 35px;
}
nav a {
  color: white;
  text-decoration: none;
  padding: 12px 40px;
  margin: 10px 0px ;
  font-size: 1.6em;
  display: block;
  background-color: #E6910B;
  border-radius: 1px;
}

Ukázka 4 - odkazy skryté v hamburger menu

Připravuje se

Navigační menu pro počítače

Na širších monitorech je zpravidla menu umístěno vpravo nahoře a název webu vlevo nahoře.

Styly pro vzhled a uspořádání menu zapíšeme do @media. Šířku, při níž má dojít ke změně stylů určíme podle konkrétní velikosti názvu a menu, tzn. najdeme šířku, kdy se už název a menu vejdou vedle sebe.

Ukázka menu pro počítač

Použijeme-li styly pro mobil z předchozí ukázky 3, pak v css souboru bude:

/* CSS Document Divy světa - styly 3 */
@import url('https://fonts.googleapis.com/
css?family=Roboto|Shojumaru&display=swap');
body {
  margin: 0px;
  font-family: 'Roboto', sans-serif;
}
header {
  background-image: url(pozadi-mobil.jpg);
  background-size: 100% auto;
/* nevyplní celý hedear, jen na šířku */
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #030400;
/* barva pod obrázkem */
  padding-top: 43%;
  padding-bottom: 20px;
}
header div {
  padding-left: 5%;
  padding-right: 5%;
}
header h1 {
  font-family: 'Shojumaru', cursive;
  color: white;
  font-size: 2.5em;
  margin: 30px 15px 30px 35px;
}
nav a {
  color: white;
  text-decoration: none;
  padding: 12px 40px;
  margin: 10px 0px ;
  font-size: 1.6em;
  display: block;
  background-color: #E6910B;
  border-radius: 1px;
}

@media (min-width:700px) {
header {
  background-image: url(pozadi-pc.jpg);
  background-position: 0px 70px;
/* posunutí obrázku o 70px níž */
  padding-top: 0%;
  padding-bottom: 52%;
}
header div {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 20px;
  padding-bottom: 15px;
  background-color: #120F02;
}
header h1 {
  margin: 0px;
}
nav a {
  display: inline-block;
  padding: 4px 20px;
  margin-left: 5px;
  font-size: 1.3em;
  background-color: transparent;
  padding: 4px 5px ;
}
nav a:hover, nav a.aktualni {
  color: #DF8001;
}
}

Blok div s názvem a menu můžeme nahoře ukotvit. Do @media pro header div přidáme tyto styly:

header div {
  position: fixed;  /* ukotvení */
  box-sizing: border-box; /* šířka včetně paddingu */
  width: 100%;
  /* bez box-sizingu bychom zadali 90% (po odečtení paddingu, tj. 100% - 5% -5%) */
}

Styly pro mobil a pro počítač můžeme různě kombinovat.

Ukázky dalších variant menu s průhlednou či poloprůhlednou barvou pozadí bloku div

Ke stylům ukázky 1 přidáme:

@media (min-width:700px) {
header {
  background-image: url(pozadi-pc.jpg);
}
header div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
nav a {
  padding: 0px 15px;
  border-right: 2px solid #987535;
}
nav a:last-child {border-right: none;}
}

Ke stylům ukázky 2 přidáme:

@media (min-width:700px) {
header {
  background-image: url(pozadi-pc.jpg);
  padding-top: 0%;
  padding-bottom: 50%;
}
header div {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 20px;
  padding-bottom: 15px;
  background-color: rgba(242,153,12,0.75);
}
header h1 {
  margin: 0px;
}
nav a {
  display: inline-block;
  padding: 4px 20px;
  margin-left: 5px;
  font-size: 1.3em;
  background-color: transparent;
  padding: 4px 5px ;
}
}

Chování odkazů při najetí myší

Při najetí myší na odkaz se automaticky mění kurzor, další změny lze určit pomocí stylu pseudotřídy :hover

Přitom by nemělo dojít k takové změně, která ovlivní velikost odkazu, aniž by došlo k jiné změně, která toto vyrovná, protože by docházelo k posunování, resp. poskakování textu.

Např. přidáme-li odkazu při najetí myší rámeček, musíme o jeho tloušťku ubrat odsazení, nebo můžeme odkazům vytvořit neviditelné rámečky a při najetí pouze změnit barvu rámečku.

Protože myš používáme pouze na počítači a ne na mobilu, zapíšeme tyto styly do příslušné Media Queries.

nav a:hover {  /* chování odkazu v bloku nav při najetí myši */
	color: orange;
}
article a:hover { /* chování odkazu v article při najetí myši */
	color: red;
	text-decoration: none;
}

header div {
  background-color: #2C1200;
  padding: 20px 5%;
}
nav a {color: white; margin-left: 20px;}
nav a:hover {color:#DF8001; transition:1s;}

nav a {
  color: white; padding: 5px 10px;
  border-bottom: 3px solid transparent;
  transition: 2s;}
nav a:hover {border-bottom-color: white;}

header div {
  background-color: transparent;
  padding: 20px 0%;}
nav {display: flex;}
nav a {
  flex:1;
  color: white; background-color: #E6910B;
  margin-left:2px; padding: 7px 20px;
  text-align: center; transition: 2s;}
nav a:hover {background-color: #2C1200;}

Základní css styly pro odkazy

Styly pro písmo, barvy, okraje a odsazení, které známe z předchozí kapitoly, využijeme i u odkazů.

Důležité styly pro odkazy:

Flexbox styly pro uspořádání menu

Blok, jemuž přiřadíme vlastnost display: flex, se stane flexboxem, tzn. boxem (pouzdrem) pro flexibilní položky v jeho vnitřku. V základním návrhu hlavičky webu tedy vytvoříme flexbox z bloku nav a z bloku div, který obsahuje název webu h1 a navigační blok nav. Nastavením vlasností flexboku určíme, jak má být uspořádán a zarovnán jeho obsah.