CSS alapjai Dr Nehz Kroly egyetemi adjunktus Miskolci
- Slides: 11
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: CSS 1, CSS 2, CSS 3 • 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. w 3. 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> <ul> <font color="blue"><li>Első sor</font></li> <font color="blue"><li>Második sor</font></li> </ul> <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: 28 px } </style> </head> <body> <ul> <li>Első sor</li> <li>Második sor</li> </ul> <p>Új bekezdés</p> <ul> <li>Első sor</li> <li>Második sor</li> </ul> <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, H 1 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, hogyan akarjuk formázni (pl. fehér - white).
CSS elemek LI {color: blue} paraméter szelektor deklaráció érték A példában a LI lesz a szelektor (ami a HTMLben 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).
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=Style. Sheet 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: 15 px; }
A class szelektor <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> <h 2 class="kek">Sőt, még ez is</h 2> </body> </html>
