Rubriky
HTML

HTML – Piškvorky 2 – formátování

  1. Nyní obsah stránky zkusíme naformátovat, vycentrovat a obarvit. V mé představě to vypadá takto:

Přidejte do sekce <head> kaskádový styl: 

<style>
	.obsah {
		max-width: 350px;
		margin: auto;
		background: white;
	}
</style>

Třída obsah zajistí, že obsah sekce je uprostřed, má maximální šířku a bílý podklad. Poté přidejte tag <div> hned za <body> a ukončete před </body>. Mělo by to vypadat asi takto. 

<body>
    <div class="obsah">

		....existující kód....

    </div>
</body>
  1. Nyní vytvořte styl pro body a vložte do něj oblíbenou barvu pozadí pomocí: background. Pokud si nevíte rady, podívejte se zde: https://www.w3schools.com/css/tryit.asp?filename=trycss_background-color_body
  2. Naformátujte odstavec <p> pomocí stylu tak, aby:
    • text má větší velikost (font-size: large;)
    • text je zarovnán do bloku (text-align: justify;)
    • mezera kolem odstavce (padding: 10px;)

Styl s větším textem může vypadat např. takto:

p {
    text-align: justify;
}
  1. Naformátujte odkazy jako tlačítka.

Ukázka formátování odkazu:

        a:link, a:visited {
            color: white;
            padding: 20px 0px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            width: 350px;
        }

Zkuste u každé vlastnosi stylu zjistit, co dělá, případně si ji upravit podle svého vkusu.

Ukázka formátování odkazu po najetí myší:

        a:hover, a:active {
            background-color: rgb(255, 0, 0);
        }

Jednotlivým tlačítku zkuste přidat třídu (class):

<a href="pravidla.html" class="pravidla">Pravidla</a>

Pro třídu poté můžete změnit např. barvu pozadí.

        a.pravidla {
            background-color: rgb(55, 0, 255);
        }