Kaskádové štýly
Kaskádové štýly alebo CSS (skratka z angl. Cascading Style Sheets) je všeobecné rozšírenie (X)HTML. Konzorcium W3C[1] označuje CSS ako jednoduchý mechanizmus na vizuálne formátovanie internetových dokumentov.
Štýly umožnili oddeliť štruktúru HTML alebo XHTML od vzhľadu.
História
[upraviť | upraviť zdroj]Prvá verzia CSS (CSS level 1) vznikla už v roku 1996 a umožňovala prácu s písmami, okrajmi a farbami. V roku 1998 bola doplnená o nové možnosti a vznikol CSS level 2. V súčasnosti je podporovaná vo všetkých novších verziách prehliadačov (Internet Explorer, Opera, Mozilla, Netscape, Safari). Aktuálna verzia je CSS level 3.
Použitie
[upraviť | upraviť zdroj]Pomocou kaskádových štýlov sa vytvárajú štruktúrované dokumenty, teda oddeľuje sa obsah dokumentu (HTML) od jeho vzhľadu (CSS). Získa sa tým prehľadný a jednoduchý kód. CSS je možné presunúť do externých súborov, zmenší sa tým dátová veľkosť a dá sa jedným súborom zmeniť celý štýl stránky. Cieľom každého webdesignera je vytvoriť stránku tak, aby vyzerala čo najviac podobne v najpoužívanejších prehliadačoch. CSS nezaručuje rovnaké vykresľovanie vo všetkých prehliadačoch. Vzhľadom k rôznym interpretáciam css rôznymi prehliadačmi je nemožné aby stránka vyzerala na pixel rovnako. Najväčší problém v interpretácii css má internet explorer. V súčasnosti sa stránky optimalizujú pre IE verzie 7 a vyššie.
Príklad
[upraviť | upraviť zdroj]Príklad CSS štýlu
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE>Skúšobná www stránka</TITLE> <META http-equiv="Content-Type" content="text/html; charset="utf-8"> <STYLE type="text/css"> BODY { font-family: 'Arial'; /* Na celej stránke bude font Arial */ color: blue; /* Text bude modrý */ font-size: 12px; /* Veľkosť textu bude 12 pixelov */ } H1 { color: red; /* všetky veľké nadpisy budú červené */ } </STYLE> </HEAD> <BODY> <!-- Aktivuje sa štýl pre BODY--> <H1>Používam CSS</H1> <!-- Aj keď pre BODY mám modrú farbu, prekryje to najneskôr použité (H1), takže bude červený--> <P>Text</P> <!-- Tento text bude modrý (červená sa ukončila /H1)--> </BODY> </HTML> Animované tlačidlo CSS [2]
- Kód vytvorí tlačidlo, ktoré sa po umiestnení kurzora nad neho rozbalí
<!DOCTYPE HTML> <HTML> <HEAD> <TITLE>CSS</TITLE> <META http-equiv="Content-Type" content="text/html; charset="utf-8"> <STYLE type="text/css"> .button { width: 300px; height: 50px; background-color: grey; color: white; } .button:hover { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); animation-duration: 1s; transition-duration: 1s; transition-property: 1s; } </STYLE> </HEAD> <BODY> <p> Po umiestnení kurzora na tlačidlo sa rozbalí </p> </BODY> </HTML>
Referencie
[upraviť | upraviť zdroj]- ↑ http://www.w3c.org
- ↑ Button Animations CSS Code Free [online]. buttonanimations.github.io, [cit. 2020-02-11]. Dostupné online.
Externé odkazy
[upraviť | upraviť zdroj]- Český tutoriál
- Stránky W3C (po anglicky)
- Pracujeme so štýlmi Archivované 2007-07-01 na Wayback Machine
- Všetko o CSS3
- Instant CSS Code Archivované 2010-10-31 na Wayback Machine
Literatúra
[upraviť | upraviť zdroj]- Lednár, Matej.: Príručka programátora - Prehľadný sprievodca jazykmi XHTML 1.1, CSS 2.1 a JavaScript 1.5+ s úvodom do DOM. Bratislava: MLD Group, 2009, s.776. ISBN 978-80-89448-00-5
- Lednár, Matej.: Príručka programátora - Aplikujeme DOM s jazykmi XHTML, CSS a JavaScript. Bratislava: MLD Group, 2009, s. 207. ISBN 978-80-89448-01-2
- Lednár, Matej.: Príručka programátora - Prehľadný sprievodca jazykom CSS 2.1. Bratislava: MLD Group, 2009, s.148. ISBN 978-80-89448-03-6