Základný štýl pre webstránku

V tejto lekcii si vytvoríme nový css súbor, do ktorého budeme písať všetok kód potrebný na zmenu a úpravu dizajnu našej webstránky.

Úloha

  1. Naviguj sa cez terminál (konzolu) do priečinku htmlkurz2016, ak sa v ňom práve nenachádzaš
  2. Naviguj sa do priečinka css o úroveň nižšie
  3. Uisti sa, že sa nachádzaš v priečinku css
  4. Vytvor nový súbor s názvom custom.css
  5. Vyjdi z priečinka css o úroveň vyššie späť do priečinka htmlkurz2016
  6. Otvor css súbor v našom otvorenom projekte htmlkurz v editore (Atom alebo Sublime Text 3)

Priradenie súboru v HTML

V prvom kroku musíme náš css súbor priradiť v HTML súbore, u nás konkrétne v súbore index.html.

Úloha

  1. Do <head></head> sekcie v index.html súbore vlož nasledujúci kód <link rel="stylesheet" href="css/custom.css" type="text/css">
  2. Ulož súbor index.html

Upozornenie: Je dôležité aby sa súbor custom.css nachádzal až pod súborom, kde máme vložené naše CSS pre Twitter Bootstrap z toho dôvodu, že častokrát budeme preddefinované štýly Bootstrapu prepisovať.

Základný štýl

Na začiatku je dôležité definovať si základný štýl a dizajn pre spoločné elementy na webstránke z dôvodu zachovania jednotnosti celého webu.

Nastavenie písma

Na webstránke je možné používať preddefinované písmo Bootstrapu, alebo vložiť písmo vlastné. Medzi najpoužívanejšie a dobre vyzerajúce písma na webe patria napríklad: Open Sans, Proxima Nova, Roboto, Helvetica, a iné.

Upozornenie: Pri písmach, rovnako ako pri obrázkoch je dôležité myslieť na licenciu. Na google fonts sú písmá dostupné zadarmo, no niektoré aj na iných stránkach sú spoplatnené a viaže sa na ne licencia.

Vloženie písma

Naviguj sa na stránku Google Fonts pre písmo Open Sans, kde úplne naspodku vyber možnosť Open Open Sans in Google Fonts.

Na ďalšej obrazovke si vyberieme štýly písma, ktoré budeme v projekte potrebovať. Na webstránke využijeme Normal, Semibold a bold verziu písma. Ostatné položky ostanú nezaškrtnuté.

Výber potvrdíme pomocou tlačítka Use.

Nižšie zvolíme požadovanú znakovú sadu. Preddefinovane je vybraná znaková sada Latin. My zaškrtneme ešte možnosť Latin Extended (latin ext), vďaka čomu bude písmo dostupné aj v českých a slovenských znakoch.

Následne písmo vložíme do <head></head> v súbore index.html. Z webu v kroku tri alebo priamo stadeto nakopíruj kód <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> do hlavičky webstránky.

Výber farieb

Výber farieb je rovnako dôležitý ako výber vhodného písma. Je dobré si na začiatku definovať farby pre hlavné nadpisy, texty, linky a pozadia sekcií z dôvodu zachovania jednotnosti.

Zoznam webových farieb je dostupný napríklad na stránkach FlatUIColors alebo MaterialPalette, kde je možné si vybrať viaceré farebné kombinácie.

V tutoriály som zvolila nasledovné farby:

  1. Farba nadpisov (H1 - H6) - tmavo modrá (#455376)
  2. Farba textov (p, div, label, input,..) - slabo sivá (#798097)
  3. Farba linkov (a) - tmavo modrá (#455376)
  4. Farba aktívnych linkov (a:hover, a:focus, a:active) - ružová (#c5308a)

Ak si trúfaš zmeniť a zvoliť si vlastnú farebnú kombináciu smelo do toho. :)

Naštýlovanie tela stránky - Body

Otvor si súbor custom.css a zadaj doňho nasledujúci kód.

body {
  background: #fff;
  width: 100%;
  height: auto;
  font-size: 1.5em;
  font-family: 'Open Sans', sans-serif;
  font-weight: normal;
  color: #798097;
  line-height: 2.3rem;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
}

V ďalších krokoch si postupne prejdeme každou vlastnosťou:

  1. background - definovali sme si farbu pozadia celého webu na bielu (#fff)
  2. width - definovali sme si responzívne správanie webstránky, šírka je 100%, čo znamená celú šírka webu v prehliadači
  3. font-size - definovali sme základnú veľkosť písma na celej webstránke na 1.5em .

Poznámka: Písmo a niektoré ďalšie vlastnosti môžeme zadať v pixloch (px), emoch (em), remoch (rem). Platí, že 1.5emu reprezentuje 16px, čo je základná veľkosť písiem na webstránkach. Na prevod medzi pixlami a em/rem existuje viacero kalkulačiek.

  1. font-family - priradili sme nami vybrané Open Sans ako písmo pre všetky texty na webstránke
  2. font-weight definuje, že preddefinovane bude písmo tenké (nebude boldom, ani semiboldom).
  3. color definuje základnú farbu pre všetky texty na webstránke na slabo sivú (#798097).
  4. line-height definuje riadkovanie pre všetky texty na webstránke na výšku 2.3rem (funguje to rovnako ako riadkovanie textu vo worde).
  5. font-smoothing definuje vykreslenie písiem, ktoré nie sú definované v pixloch ako aj v našom príklade, prispôsobuje písmo čitateľnosti na bielych pozadiach, lepšej čitateľnosti na tmavých pozadiach.

Poznámka: Keďže máme viacero prehliadačov (Opera, Google Chrome, Mozilla) je potrebné niektoré vlastnosti CSS3 definovať pre každý prehliadač osobitne pomocou prefixov (webkit pre Google Chrome a Safari, moz pre Mozillu, o pre Operu).

Nastavenie hlavných nadpisov

Hlavné nadpisy, čiže h1 až h6 naštýlujeme nasledovne:

h1, h2, h3, h4, h5, h6  {
  color: #455376;
  margin-top: 6rem;
}

Novým atribútom je margin-top, ktorý nám zabezpečí, že každý nadpis bude vždy zarovnaný od vrchu 6remov.

Dodatočné nastavenia pre nadpisy

  1. Definujeme si, že všetky hlavné nadpisy h1 budú veľkými písmenami
h1 {
  text-transform: uppercase;
}
  1. Definujeme si, pre všetky hlavné nadpisy h2, ktorými sú názvy sekcií na našom webe budú rovnako ako sú odsadené zhora 6rem , odsadených o rovnakú výšku aj zdola pomocou atribútu margin-bottom a všetky nadpisy budú boldom.
h2 {
  margin-bottom: 6rem;
  font-weight: 700;
}

Práca so pseudoselektormi

Na stránke chceme pred každým nadpisom úrovne h2 zobraziť pomlčku sprava a pomlčku zľava. Toto docielime pomocou psedoselektorou ::before a ::after.

h2::before {
  content: '- ';
}

h2::after {
  content: ' -';
}

Pre nadpis úrovne h3, ktorý na našom webe prezentuje nadpisy záujmov, nastavíme odsadenie zhora aj zdola o výške 3remy.

h3 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

Skrátený zápis

Vyššie uvedený zápis sa dá napísať aj v skrátenej forme, kde 3rem definuje top aj bottom a 0 definuje right a left vlastnosť.

h3 {
  margin: 3rem 0;
}

Naštýlovanie paragrafov

Pre paragraf nastavíme nasledovné vlastnosti:

p {
  font-size: inherit;
  display: block;
}
  1. font-size vlastnosti inherit znamená, že sa vezme a zdedí nastavenie pre rodičovský element, ktorým je body
  2. display nám zarovná texty do bloku (rovnako ako vo worde).

Nastavenie linkov

Pre linky (odkazy) nastavíme nasledovné vlastnosti:

a {
  color: #455376;
  text-decoration: none;
  transition: all 0.5s ease;
}
  1. color nám definuje farbu odkazu na modrú
  2. text-decoration nám definuje, že odkaz nebude preddefinovane podčiarktnutý
  3. transition nám definuje, že na všetky linky typu a bude postupný prechod medzi normálnym a active , hover stavom v časovom limite 0.5s s efektom ease (ukážeme si na príklade).

Naštýlovanie stavu odkazu

Odkaz a môže byť v rôznych stavoch.

  1. active - je práve aktívny a je naň napríklad kliknuté
  2. hover - pri prejdení cez odkaz myšou
  3. visited - link, ktorý sme navštívili v minulosti
  4. focus - funguje rovnako ako hover, len pre mobilné zariadenia, kde prechod myšou možný nie je ale je nahradený dotykom prsta
a:hover, a:focus, a:active {
  color: #c5308a;
  text-decoration: none;
}

pre stavy elementu a sme zmenili farbu na ružovú (#c5308a) a ponechali sme preddefinované správanie - link nebude podčiarknutý.

Úloha

  1. Zmeň pri a selektore vlastnosť transition z 0.5s na 20s
  2. Ulož súbor custom.css
  3. Pozri si prechodom myši cez link napríklad v päte, čo sa stane.
  4. Po otestovaní zmeň hodnotu na pôvodnú 0.5s

Naštýlovanie sekcií

Sekcie sú bloky, v ktorých máme definované sekcie na webstránke (v našom príklade záujmy, aktualita a kontkatný formulár). Je dôležité aby sekcie boli symetricky správne zarovanné rovnako od zhora, zdola, zľava aj sprava. Preto im pridelíme nasledujúci štýl.

section {
  height: auto;
  padding-bottom: 6rem;
}
  1. height auto nám definuje automatickú výšku sekcie, bez ohľadu na to koľko obsahu sekcia obsahuje, sekcia môže mať tým pádom ľubovoľnú výšku a dynamicky sa prispôsobí obsahu
  2. padding-bottom sme nastavili na výšku 9rem z toho dôvodu, že každá sekcia začína nadpisom úrovne h2, čiže vieme, že od vrchu sekcie je pre nadpis definovaných 6 remov zhora a 6 remov zdola. Aby bol pomer vyrovnaný aj zdola, defingujeme odsadenie zdola na 6 remov.