Informatika1-2015/Gyakorlat5
a |
a (→class-ok) |
||
82. sor: | 82. sor: | ||
</pre> | </pre> | ||
Ezzel együtt a css fájlban: | Ezzel együtt a css fájlban: | ||
+ | div{ | ||
+ | color: black; | ||
+ | } | ||
div.my_pink_style{ | div.my_pink_style{ | ||
color: pink; | color: pink; |
A lap 2015. október 5., 21:26-kori változata
Előző gyakorlat - Fel - Következő gyakorlat
Tartalomjegyzék |
CSS
A CSS a HTML-hez tartozó formázási lehetőség. Segítségével szebb honlapokat lehet csinálni, mint kizárólag HTML-el.
A CSS létrehozása
Egy CSS honlapnak tartalmaznia kell egy hivatkozást egy másik (.css kiterjesztésű) fájlra, ahol a formázási elemek vannak. Például:
public_html | +- index.html | +- style.css
Ahol az index.html tartalma:
<!DOCTYPE html> <html> <head> <title>...</title> <link type="text/css" rel="stylesheet" href="style.css"> </head> <body> ... </body> </html>
Nézzük meg például a
http://math.bme.hu/~borbely/minta_css
honlapot és a hozzá tartozó
http://math.bme.hu/~borbely/stilus.css
fájlt!
A CSS fájl tartalma
A CSS fájl olyan szintaxisú, hogy minden html tag-nek beállíthatunk attribútumokat, pl:
html{ background: white; }
Ez azt jelenti, hogy az index.html fájlnak a <html> tag-jének a tartalmára a background: white attribútum vonatkozik. Vagyis a honlap háttere fehér lesz.
a{ color: blue; }
Ennek hatására a honlap összes a tagje (linkek) kék lesz.
Néhány attribútum:
attribútum | lehetséges értékek |
---|---|
color | black, red, #E0E0E0 |
backround-color | black, red, #E0E0E0 |
font-size | small, large, 12px, 200% |
text-align | center, left, right |
font | Roman, Latin |
font-style | italic, bold |
class-ok
Mi van akkor, ha egy konkrét sort akarunk megformázni, nem ledig az összes linket/címsort vagy paragrafust? Például ezen a honlaprészleten:
<body> <div>Első sor</div> <div>Második sor</div> <div>Harmadik sor</div> </body>
Csak a második sort rózsaszínnel akarom szedni:
<body> <div>Első sor</div> <div class="my_pink_style">Második sor</div> <div>Harmadik sor</div> </body>
Ezzel együtt a css fájlban:
div{ color: black; } div.my_pink_style{ color: pink; }
Különböző div-elet definiálhatunk, mindegyiknek saját formátummal, és bármilyen tag-nek lehet többfajta formátuma, class-okkal megkülönböztetve:
<a class="kicsi_link" href="index.hu">Index</a> <a class="fontos_link" href="bme.hu">BME</a>
Ahol a css fájlban:
a.kicsi_link{ color: blue; font-size: small; } a.fontos_link{ color: red; font-size: large; }