Kaskádové štýly

z Wikipédie, slobodnej encyklopédie
Prejsť na: navigácia, hľadanie

Kaskádové štýly alebo CSS (skratka z ang. 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). Konzorcium W3 práve pracuje na špecifikácií 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>

Referencie[upraviť | upraviť zdroj]

  1. http://www.w3c.org

Externé odkazy[upraviť | upraviť zdroj]

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