Alkalmazott Informatikai Tanszék CSS alapjai Dr. Nehéz Károly egyetemi adjunktus Miskolci Egyetem Alkalmazott Informatikai Tanszék
CSS (Cascading Style Sheet) CSS segítségével a HTML lapok formázására nyílik mód. A formázás és a megjelenített adatok függetlenné válhatnak. A nyelv specifikációja 1996 óta létezik. Ismert változatai: CSS1, CSS2, CSS3 A CSS alkalmas arra, hogy a dokumentum stílusát a megjelenítési módszer függvényében adja meg, így elkülöníthető a dokumentum formája a képernyőn, nyomtatási lapon ‘braille’ eszközön megjelenítve. A szabványt a www konzurcium felügyeli. World Wide Web Consortium (http://www.w3.org/) Forrás: http://www.prog.hu/cikkek/907/Bevezetes+a+CSS+alapjaiba.html
<html> <head> <title>Minta HTML</title> </head> <body> <ul> <font color="blue"><li>Első sor</font></li> <font color="blue"><li>Második sor</font></li> </ul> <font color="blue"><p><font size="6">Új bekezdés</font></p> <p><font size="6">Második bekezdés</font></p> </body> </html>
<html> <head> <title>Minta HTML</title> <style type ="text/css"> li { color: blue } p { font-size: 28px } </style> </head> <body> <ul> <li>Első sor</li> <li>Második sor</li> </ul> <p>Új bekezdés</p> <p>Második bekezdés</p> </body> </html>
CSS elemek Minden CSS utasításnak 2 fő része van: a szelektor, és a deklaráció. A szelektor azt a HTML elemcsoportot jelöli ki, amit formázni szeretnénk (pl. P, UL, H1 stb.) A deklaráció írja le a szelektorban megadott HTML jelölők (tag) formázását. Ennek általában több része van (paraméter, érték), ugyanis meg kell adni, hogy mit akarunk a szelektorban formázni (pl. szín - color), utána pedig azt, hogy hogyan akarjuk formázni (pl. fehér - white).
CSS elemek LI {color: blue} deklaráció paraméter érték A példában a LI lesz a szelektor (ami a HTML-ben a felsorolás eleme (list item)). A deklarációt mindig kapcsos-zárójelek közé tesszük. Itt a deklaráció paramétere a color (szín), és az értéke blue (kék). szelektor
HTML és CSS kapcsolata Egy adott HTML-hez három módon lehet CSS-t kapcsolni: <link> tag, melynek segítségével külső, .css kiterjesztésű fájlokat rendelhetünk a dokumentumhoz. (pl. <link rel=StyleSheet type= "text/css" href=”valami.css” title="cím"> ). <style type="text/css"> valamint </style> tagek között helyezzük el a CSS utasításokat, a HTML <head> részében. style attribútum használata egy adott HTML tag esetén. Ezek a stílusmegadások lokálisak. (pl. <p style=" color:red">A szöveg színe ‘red’ …</p> )
Feladat Készítsünk egy bekezdést, melyben a betűszín kék legyen, a félkövérré alakított szöveg pedig 15 pixel nagyságú. Ezután készítsünk még egy sort, de az ne új bekezdés legyen, hanem sortörés. <html> <head> <title>Példa a CSS alapokra</title> <style type="text/css"> P { color : blue } /* a bekezdés szövege kék színű lesz */ B { font-size : 15 px } /* a félkövér szöveg mérete 15 pixel lesz */ </style> </head> <body> <P>Ez a szöveg kék <B>ez félkövér, kék és 15 pixel nagyságú</B></P> <BR>Ez a szöveg fekete és normál méretű<B>, de ez már félkövér 15 pixel nagyságú!</B> </body> </html>
Öröklődés <html> <head> <title>Öröklődés</title> <style type="text/css"> P { color: blue } </style> </head> <body> <p>Ez a rész kék,<em> de ez is, az öröklődés miatt...</em></p> </body> <html> Az <em> kiemelés színe öröklődik. Az öröklés nem minden attribútum esetében történik meg automatikusan. Azt, hogy melyik attribútumok öröklődnek és melyek nem, a CSS specifikációban vannak definiálva.
Csoportosítás Szelektorok csoportosítása: P, UL, EM {color: white} Deklarációk csoportosítása P {color: blue; font-size: 15px;}
A class szelektor <head> <style type="text/css"> <html> <head> <style type="text/css"> P.kek {color: blue} </style> </head> <body> <p class="kek">Ez a bekezdés kék színű.</p> <p>Ez már nem kék színű, mivel nincs hozzárendelve a Class.</p> </body> </html> <head> <style type="text/css"> .kek {color: blue} </style> </head> <body> <p class="kek">Ez kék lesz</p> <b class="kek">Ez is kék lesz</b> <h2 class="kek">Sőt, még ez is</h2> </body> </html>