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