Kaskádové štýly alebo CSS (skratka z ) je všeobecné rozšírenie (X)HTML. Konzorcium W3Chttp://www.w3c.org 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 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 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 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

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

Iné projekty

Externé odkazy Český tutoriál Stránky W3C Pracujeme so štýlmi Všetko o CSS3 Instant CSS Code

Literatúra 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

Kategória:W3C štandardy Kategória:Značkovacie jazyky Kategória:Typografia