Fonty, seznamy

Fonty

Základní font na webu je určený prohlížečem, zpravidla jde o Times New Roman. Pokud chceme mít na webu jiný font, musíme ho určit jako vlastnost <body>, nebo v kaskádových stylech. Tímto způsobem jde používat základní systémové fonty, které má v sobě každý počítač (Times, Arial, Verdana…), pokud chceme jiné fonty, musíme je připojit na web z externího umístění. Fonty můžeme nahrát na vlastní FTP, nebo je můžeme stáhnout ze služby např. Adobe TypeKit nebo Google Fonts.

Google fonty:

Tyto fonty jsou k dispozici na adrese: https://fonts.google.com

Zde je nutné font vybrat, přidat jeho varianty a web googlu poskytne kód k jeho umístění na vlastním webu.
Aby font fungoval, je nutné dát do headu (link) na knihovnu fontu na serveru googlu

např. <link href="https://fonts.googleapis.com/css?family=Sansita" rel="stylesheet">

a pak do stylu v <head> dát odkaz na samotný font

style="font-family: 'Sansita', sans-serif;"

Další varianta jak použít externí fonty je připojit je do externího souboru s kaskádovými styly. Na začátek tohoto souboru je nutné dát import fontu:

např. @import url('https://fonts.googleapis.com/css?family=Anton');

U jednotlivých tříd stylů pak stačí font nastavit:

font-family: 'Anton', sans-serif;

Zarovnání divu na střed:

  • margin: 0 auto;

Seznamy

<ol>
<li></li>
</ol>
  • <ol> – číslovaný seznam
    • vlastnost start=“cislo“ – od jakého čísla bude seznam začínat
    • můžeme si vybrat typ – čísla, písmena, římské číslice, malá písmena..atd
    • type=“1″ – čísluje položky arabskými číslicemi
    • type=“i“ – římskými číslicemi v minuskách
    • type=“I“ – římskými číslicemi ve verzálkách
    • type=“a“ – abecední seznam v minuskách
    • type=“A“ – abecední seznam ve verzálkách
    • start=“3″ – začne na čísle 3
  • <ul> – nečíslovaný seznam, jen s odrážkami
    • type=“disc“ – puntík
    • type=“circle“ – prázdná kolečka
    • type=“square“ – čtverečky
  • <li> – položka seznamu

vložený seznam – místo položky <li> vložíme další seznam

Zarovnání divu na střed:

  • margin: 0 auto;

Posted

in

by

Tags: