HTML/CSS 2: prepojenie HTML a CSS

TEÓRIA: zápis farieb v html

Niečo o farebnej teórii ste už mali, tu si iba vymenujeme aké farebné zápisy sa v HTML/CSS používajú. V zásade máte tri možnosti:

  1. farby v zápise RGB
  2. farby v zápise HSL
  3. preddefinované farby

Pri modeli RGB si farbu namiešavate z červenej, zelenej a modrej zložky, pričom pre každú z nich máte na výber z 2^8 farieb. Dá sa to dvoma spôsobmi: hexadecimálne a cez rgb funkciu.

RGB: Hexadecimálny formát

#RRGGBB

V tomto formáte RR (red), GG (green) a BB (blue) sú dvojciferné čísla v šestnástkovej sústave. Čiže hexadecimálne dvojciferné číslo AB má vlastne hodnotu A*161 + B*160 = 16A + B.

Keďže v našej (desiatkovej) sústave máme iba 10 rôznych cifier a na šestnástkovú ich potrebujeme 16, na ďalšie cifry sa používajú písmenká zo začiatku abecedy. Takže všetky cifry sú:

0 1 2 3 4 5 6 7 8 9 a b c d e f

kde odpovedajúce hodnoty v desiatkovej sústave sú: a=10, b=11, c=12, d=13, e=14, f=15.

Napríklad farba #0abab5 má hodnoty jednotlivých zložiek prevedených do desiatkovej sústavy:

Čiže veľmi málo červenej a stredne veľa zelenej a modrej. Takže budeme očakávať takú nejakú tlmenú tyrkysovú.

#0abab5

Môže byť. A ako v tomto zápise vyzerajú základné farby? Ak dáme všetky zložky na 0, dajú nám čiernu, ak dáme všetky zložky naplno, dajú nám bielu.

#000000#ffffff

Ak dáme jednu zložku naplno a ostatné na 0, dostaneme práve základné farby red, green a blue. Ak dáme dve zložky naplno a jednu na 0, dostaneme farby cyan, magenta a yellow.

#ff0000 #00ff00 #0000ff #00ffff #ff00ff #ffff00

Ak chceme nejakú sivú, treba dať všetky tri hodnoty rovnaké (alebo blízko seba). Napríklad

#cccccc #333333

Z týmto sa už dá trochu hrajkať. Ak chcete tmavú sivú, ale v studenšom odtieni, proste trochu pridajte modrej.

#333347

Mimochodom, prečo zrovna šestnástková sústava? Nezabúdajte, že počítače ľúbia mocniny dvojky, pretože si v konečnom dôsledku všetko zapisujú iba ako jednotky a nuly (čiže v dvojkovej sústave). Ak si vezme číslo v šestnástkovej sústave, ľahko si ho premení do dvojkovej.

RGB: rgb() + rgba() zápis

rgb(red, green, blue)

Pri rgb() zápise každý z týchto parametrov predstavuje celé číslo v intervale 0-255. Sú to vlastne tie isté hodnoty ako v hexadecimálnom zápise, len písané v desiatkovej sústave. Napríklad tú istú tlmenú tyrkysovú ako minule zapíšeme ako

rgb(10, 186, 181)

V zásade je jedno, či využijete hexadecimálny, alebo rgb() zápis. Počítaču je to jedno, vyberte si, čo je vám sympatickejšie. Zápis rgba() má tvar

rgb(red, green, blue, alpha)

Je to rovnaký zápis ako rgb(), ale má navyše hodnotu alpha, čo je priesvitnosť. Alpha je parameter medzi 0 a 1, kde 0 = úplne priesvitná farba, 1= plná farba.

rgb(10, 186, 181, 0.1) rgb(10, 186, 181, 0.3)

rgb(10, 186, 181, 0.6) rgb(10, 186, 181, 1)

HSL: hsl() a hsla() zápis

Farby v zápise HSL sú na webe menej používané, význam majú skôr pri programovaní (napríklad ak chcete plynule meniť farby po dúhe, alebo stmavovať a podobne). Preto sa im budeme venovať menej. Syntax je nasledovná:

hsl(hue, saturation, lightness)

Naša tlmená tyrkysová by mala hodnoty

hsl(178.3, 89.8%, 38.4%)

K hsl() existuje aj verzia hsla() = hsl(hue, saturation, lightness, alpha), kde alpha je znova hodnota medzi 0 a 1 a predstavuje priesvitnosť.

Preddefinované farby

Pre html a css máme asi 140 preddefinovaných farieb s vlastnými názvami. Sú to názvy ako red, black, coral, lime, atď… Naša naša tlmená tyrkysová medzi ne nepatrí, mohli by sme si ju aproximovať napríklad farbami

LightSeaGreen DarkCyan

Zoznam týchto farieb nájdete napríklad tu. K farbám existuje milóntisíc stránok, ktoré sami urobia konverziu medzi jednotlivými modelmi. K tomu vám ponúknu príbuzné odtiene, rôzne farebné schémy a ešte vám aj uvaria kávu. Treba proste veľa googliť.

PRAX: Prepojenie HTML a CSS

Atribút style

Ako takéto farby zakomponovať do stránky? Najprimitívnejšia metóda je pomocou atribútu style. Vytvorte si novú stránku so všetkými základnými komponentami. Pridajte si tam jeden nadpis. Stránku si uložte ako index.html a otvorte v nejakom browseri.

Tagu h1 pridáme atribút style:

<h1 style="color: red">Ja som nadpis</h1>

Skúste su to refreshnúť. Nadpis sa vám zmení na červený.

Do style sa dajú pridať ľubovoľné iné vizuálne parametre. Veľkosť písma, podčiarknutie, odsadenie, a podobne. Tento prístup má dve veľké nevýhody. Za prvé, ak budete mať na stránke 10 nadpisov, budete to musieť pridávať do každého jedného samostatne, čo je dosť oštara. Za druhé, bežným elementom budeme pridávať niekedy aj 10 vlastností (okrem farby) z čoho by bol kód veľmi neprehľadný.

Z tohto dôvodu sa atribút style už nepoužíva. Treba o ňom vedieť, lebo sem-tam na vás niekde ešte vykukne, ale je to zastaralá technológia. Atribút style bol (už veľmi dávno) nahradený CSS.

CSS = Cascading Style Sheet

CSS je krajší zápis všetkého, čo by ste si zapisovali do atribútu style. Väčšinou sa vytvára ako externý súbor, aj keď teoreticky ho môžete dať aj do html súboru.

  1. CSS priamo v HTML súbore:

    Píše sa do tagu style, ale toto na cvičeniach nebudeme používať.

  2. Import z externého súboru:

    Atribút style si zmažte. Vytvorte si nový súbor a nazvite ho style.css (slovo style nie je dôležité, príponu ale musí mať css). Uložte si ho do rovnakého priečinku ako váš index.html (aby sa navzájom našli).

    Váš CSS súbor si do HTML prilinkujete pomocou tagu

    <link rel="stylesheet" href="style.css">

    ktorý treba dať do časti head.

    Väčšina HTML/CSS editorov má možnosť otvoriť si na pracovnej ploche viac okien, takže môžete vidieť naraz aj váš html aj css súbor.

Teraz si môžeme vyskúšať, či nám to ide. Syntax v CSS vyzerá nasledovne:

objekt{
	vlastnosť1: hodnota1;
	vlastnosť2: hodnota2;
	vlastnosť3: hodnota3;
}

Odsadenia nie sú dôležité, tie tam máme iba kvôli zvýšeniu prehľadnosti. Takže teraz si dajme červenú farbu pre náš nadpis h1:

h1{
	color: red;
}

Skúste si, či vám to funguje. Ak nie, skontrolujte si, či:

  1. máte html a css súbor naozaj v tom istom priečinku
  2. html AJ css súbor máte uložený aktuálny (skratka pre save: ctrl+s). Browser vždy číta najnovší uložený súbor, neuložené zmeny neprečíta.
  3. stránka je naozaj refreshnutá. Niekedy treba miesto F5 použiť Ctrl+F5 (to je taký brutálnejší refresh)

Výhoda je, že teraz sa to pravidlo aplikuje na všetky nadpisy typu h1, takže to nemusíme písať do každého jedného ako takí somárikovia. (uvedomte si, že na stránke máte častokrát aj desiatky nadpisov). Vyskúšajme si to.

Miesto color:red môžete využiť ľubovoľný z typov zápisov, čo sme si vysvetľovali, čiže ekvivalentne môžete dať:

color: #ff0000;
color: rgb(255,0,0);
color: rgba(255,0,0,1);
color: hsl(0,100%,50%);
color: hsla(0,100%,50%,1);

Všetky tieto možnosti vám dajú rovnaký výsledok.

CSS a fonty

Urobte si pod tým paragraph s nejakým textom. Ako zmeniť font?

Za prvé, existuje skupina tzv. web-safe fontov, ktoré vám zvládne každý browser. Napríklad Arial:

p{
    font-family: "Arial", sans-serif;
}

Font meníme vo vlastnosti Font-family. Najprv ide (v úvodzovkách) názov fontu, potom (bez úvodzoviek) typ písma. Typ je určený na to, že ak browser daný font nenájde, nahradí ho základným daného typu (generic family). Momentálne sú to:

Čo ak chceme nejaký iný font? Ľahká pomoc, stačí si ho prilinkovať ako externý súbor. Na webe je kopa služieb so zdarma fontami, celkom pekne funguje google fonts, lebo vám dá rovno kúsky kódu, ktoré stačí skopírovať do html a css súboru.

Choďte na fonts.google.com, vyberte si nejaký font a skopíruje prilinkovanie (to pôjde do html súboru, pretože linkujeme nejaký externý zdroj) a priradenie (to pôjde do css súboru).

Tagy ktoré sú uložené jeden v druhom dedia svoje vlastnosti priradené cez css. Takže ak si chceme zmeniť písmo pre celú webstránku, môžeme ho dať do tagu body:

body{
   font-family: 'Raleway', sans-serif; 
}

CSS a vlastnosti pre písmo

Ukážeme si rôzne vlastnosti, ktoré menia písmo (začnem tými, čo už poznáme). Ku každému dám jeden príklad. Všimnite si, že váš editor vám aj sám ponúka vhodné hodnoty vlastností. Každú vlastnosť si vyskúšajte na nejakom vhodnom tagu.

Color = farba písma

Color: cyan;

Font-family = typ písma

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

Font-weight = hrúbka písma

Zadáva sa buď slovne (bold/normal/…), alebo číslene (100/200/…).

font-weight: bold;

Text-align = zarovnanie

Text si môžete zarovnať v rámci daného elementu. Vyskúšajte si to na nadpis h1.

text-align: center;

Pozn: tento príkaz vám nezarovná čokoľvek len tak na stred. S pozíciami a zarovnávaním je to trochu komplikovanejšie viac sa k tomu dostaneme na ďalšej hodine.

Text-decoration + text-decoration-color = ozdoby okolo textu

Ako napríklad podčiarknutie/preškrknutie/atď. Na výber máme aj hodnotu none – tá sa dá využiť na prípady, kedy nám browser niečo podčiarkne sám, ale my to nechceme. Napríklad linky.

text-decoration: underline;

Dekoráciam vieme explicitne samostatne definovať farbu pomocou text-decoration-color, ak to neurobíme, bude mať rovnakú farbu ako písmo.

text-decoration-color: blue;

:hover

Pre každý tag vieme nastaviť nejaké vlastnosti, keď si len tak sedí a iné, keď na neho ukazujeme myšou. Na ukázanie myšou sa používa privlastok :hover. Vyskúšame si to na linku. Pridajte si tag a. Ak ešte neviete, kam chcete aby váš link ukazoval, zvykne sa mu priraďovať pre atribút adresy hodnota #. Takto bude funkčný link, ale bude ukazovať tam, kde je.

Pridajte si niekam do stránky link.

<a href=#>prazdny link</a>

V css mu dáme takéto vlasntosti:

a{
	color: DarkGreen;
	text-decoration: none;
}

a:hover{
	color: LimeGreen;
	text-decoration: underline;
}

Bude fungovať tak, ako chceme - keď na neho ukážeme myšou, zmení farbu a podčiarkne sa (a pri kliku sa nič nestane).

Font-size = veľkosť písma

Hodnotu jej môžeme dať napríklad v pixeloch, na ďalších hodinách si ukážeme aj iné možnosti.

font-size: 20px;

Text-transform = veľké/malé písmená

Táto vlastnosť nám vie meniť písmo na malé písmená/kapitálky/prvé písmeno veľké/…

text-transform: uppercase;

Text-indent = odsadenie v prvom riadku

Toto má význam iba pre väčšie bloky textu, napríklad paragraph. V prvom riadku zvykne byť odsadenie zľava, tu si určíme aké.

text-indent: 50px;

List-style = typ odrážky

pre čislované a nečíslované zoznamy (ol a ul) si vieme vybrať typ odrážky z niekoľkých možných. Je to spoločná vlastnosť pre číslované aj nečíslované zoznamy, takto by ste vlastne mohli číslovanému zoznamu priradiť ako odrážky štvorčeky a opticky sa zmení na nečíslovaný (ale v hĺbke duše bude číslovaným)

list-style: circle;

CSS a pozadie elementu

Background-color = Farba pozadia.

Pozadie si vyskúšame na tagu div. Div je len také ohraničovátko skupiny tagov, sám o sebe význam nemá. Používa sa ako pomocník pri práci s css. Našemu divu dáme pevnú výšku (height)a šírku(width) na 500px;

Na stránku si pridajte prázdny párový tag div.

V css mu dáme vlastnosti. Pridáme mu aj novú vlastnosť background-color -čiže farba pozadia. Ja som zvolila nejakú náhodnú, čo mi ponúkal, pokojne si dajte nejakú inú.

div{
    width: 500px;
    height: 500px;
    background-color: coral;
}

Na stránke nám vznikne veľký prázdny štvorec danej farby.

Background-image, Background-size, Background-repeat = vlastnosti pre obrázok v pozadí

Do pozadia si vieme dať aj obrázok. Adresu zadáme hodnotou url. Vyskúšajte si to zmeniť na

div{
    width: 500px;
    height: 500px;
    background-color: coral;
    background-image: url("https://www.protexinvet.com/userfiles/image/cute-2500929_1920_(1).jpg");
}

Keďže náš obrázok má iný pomer strán ako div, dá sa to riešiť niekoľkými spôsobmi. Buď ho tam dáme viackrát, alebo ho dáme do stredu a zvyšok nejak vyfarbíme, alebo z neho urežeme. Prosím vás NIKDY to neriešte tým, že obrázok v jednom smere natiahnete, vyzerá to otrasne.

Na toto nám pomôže kombinácia background-size a background-repeat. Za background-size môžete dať buď hodnotu v pixeloch, alebo v percentách, alebo špeciálne slovné hodnoty. Skúste si kombinácie:

background-repeat: repeat;
    background-size: 50%;
background-size: contain;
    background-repeat: no-repeat;
background-size: cover;
    background-repeat: no-repeat;

Už vidíme, ako sa chovajú.

S background-repeat sa dá robiť aj nasledovný trik. Zoberieme si jeden menší obrázok a budeme ho opakovať iba v smere x. K vášmu html súboru si uložte nejaký obrázok, najlepšie s priesvitným pozadím. Ak chcete, môžete použiť ten, čo ja:

Divu priraďte do pozadia nejakú vhodnú farbu (ja som si dala modrú) a obrázok dajte do pozadia v malej veľkosti a s opakovaním v smere x.

div{
    width: 500px;
    height: 500px;
    background-color: cornflowerblue;
    background-image: url("snow.png");
    
    background-size: 50px;
    background-repeat: repeat-x;
}

Dostanete niečo takéto:

Získali sme taký fancy horný rámik. Čo ak by sme ich chceli trochu nižšie? Alebo úplne dole? Je na to vlastnosť background-position. Napríklad:

background-position: bottom;

Ak chcete presné súradnice, môžete ich zadať v pixeloch, alebo v percentách. Vyskúšajte si

background-size: 50px;
background-repeat: no-repeat;
background-position: 80px 150px;

Dostanete jednu vločku na konkrétnej pozícii (x=80, y=150. Bod [0,0] je ľavý horný bod divu).

Ak tých vločiek chceme viac, musíme pozadiu priradiť viac obrázkov. Píše sa to za sebou, s čiarkami. Vyskúšajte si:

div{
    width: 500px;
    height: 500px;
    background-color: cornflowerblue;
    background-image: url("snow.png"), url("snow.png"), url("snow2.png");  
    background-size: 50px, 65px, 80px;
    background-repeat: no-repeat;
    background-position: 80px 150px, 220px 300px, 380px 10px;
}

Ak by sme ich chceli napríklad 20 náhodne rozmiestnených, dá sa to takto manuálne, ale už by to bolo jemne otravné. Toto sú práve miesta, kedy sa skôr oplatí použiť JavaScript.

Mimochodom pozadie vieme dať ľubovoľnému elementu, nielen divu. Skúste dať nejaké pozadie napríklad nadpisu h1. Ak sa nám viacero elementov prekrýva (napríklad máte paragraph vnútri divu) a obidvom pridáte pozadie s nejakou úrovňou priesvitnosti, môžete robiť pekné transparentné efekty.

SAMOSTATNÉ CVIČENIE

Naformátujte túto stránku na takúto pomocou css. Do html môžete IBA pridať link na externé zdroje (CSS a font), inak všetky úpravy robte čisto pomocou css.

Hint: Na stránke sú (mimo obrázkov rýb) použité iba tri rôzne farby: white, aqua a #112244. Všetko ostatné je robené pomocou priesvitnosti.

Pozn: Ak netrafíte PRESNE správne hodnoty veľkostí a odsadení, nič sa nedeje, stačí to približne napodobiť. Použitý font pochádza z Google Fonts a volá sa Quicksand, ale kľudne si vyberte nejaký iný ak sa vám bude páčiť viac. Nepehliadnite to, že link mení farbu ak na neho ukážete myškou.

Úlohu mi pošlite ako .zip, v ktorom bude všetko zbalené (html,css + obrázky):