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

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 ^[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

↑ http://www.w3c.org
↑ Button Animations CSS Code Free [online]. buttonanimations.github.io, [cit. 2020-02-11]. Dostupné online.

Externé odkazy

Č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

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

[1] ttp://www.w3c.org

[2] Button Animations CSS Code Free [online]. buttonanimations.github.io, [cit. 2020-02-11]. Dostupné online.

[1]

[2]