Informatika1-2015/Gyakorlat5
(→A CSS fájl tartalma) |
|||
1. sor: | 1. sor: | ||
− | |||
− | |||
== CSS == | == CSS == | ||
A [https://hu.wikipedia.org/wiki/Cascading_Style_Sheets CSS] a [https://hu.wikipedia.org/wiki/HTML 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 [https://hu.wikipedia.org/wiki/Cascading_Style_Sheets CSS] a [https://hu.wikipedia.org/wiki/HTML HTML]-hez tartozó formázási lehetőség. Segítségével szebb honlapokat lehet csinálni, mint kizárólag HTML-el. | ||
62. sor: | 60. sor: | ||
|italic, bold | |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: | ||
+ | <pre> | ||
+ | <body> | ||
+ | <div>Első sor</div> | ||
+ | <div>Második sor</div> | ||
+ | <div>Harmadik sor</div> | ||
+ | </body> | ||
+ | </pre> | ||
+ | Csak a második sort rózsaszínnel akarom szedni: | ||
+ | <pre> | ||
+ | <body> | ||
+ | <div>Első sor</div> | ||
+ | <div class="my_pink_style">Második sor</div> | ||
+ | <div>Harmadik sor</div> | ||
+ | </body> | ||
+ | </pre> | ||
+ | Ezzel együtt a css fájlban: | ||
+ | div.my_pink_style{ | ||
+ | color: pink; | ||
+ | } | ||
+ | Különböző <tt>div</tt>-elet definiálhatunk, mindegyiknek saját formátummal, és bármilyen tag-nek lehet többfajta formátuma, <tt>class</tt>-okkal megkülönböztetve: | ||
+ | <pre> | ||
+ | <a class="kicsi_link" href="index.hu">Index</a> | ||
+ | <a class="fontos_link" href="bme.hu">BME</a> | ||
+ | </pre> | ||
+ | Ahol a css fájlban: | ||
+ | a.kicsi_link{ | ||
+ | color: blue; | ||
+ | font-size: small; | ||
+ | } | ||
+ | a.fontos_link{ | ||
+ | color: red; | ||
+ | font-size: large; | ||
+ | } | ||
[[Informatika1-2015/Gyakorlat4|Előző gyakorlat]] - [[Informatika1-2015#Gyakorlatok|Fel]] - [[Informatika1-2015/Gyakorlat6|Következő gyakorlat]] | [[Informatika1-2015/Gyakorlat4|Előző gyakorlat]] - [[Informatika1-2015#Gyakorlatok|Fel]] - [[Informatika1-2015/Gyakorlat6|Következő gyakorlat]] |
A lap 2015. október 5., 20:23-kori változata
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.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; }