Informatika1-2015/Gyakorlat5
A MathWikiből
(Változatok közti eltérés)
(→A CSS fájl tartalma) |
|||
44. sor: | 44. sor: | ||
!lehetséges értékek | !lehetséges értékek | ||
|- | |- | ||
− | |font-size | + | !color |
− | |200% | + | |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 | ||
|} | |} | ||
[[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:39-kori változata
Előző gyakorlat - Fel - Következő gyakorlat
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 |