Informatika1-2015/Gyakorlat5
a (→class-ok) |
a (→class-ok) |
||
119. sor: | 119. sor: | ||
} | } | ||
Ha class-ként adjuk meg a stílust, akkor a <tt>div class="xyz"</tt> tag-ből több is lehet, mind a <tt>div.xyz</tt>-nek megfelelő stílusban. | Ha class-ként adjuk meg a stílust, akkor a <tt>div class="xyz"</tt> tag-ből több is lehet, mind a <tt>div.xyz</tt>-nek megfelelő stílusban. | ||
− | Míg az <tt>id</tt> egyedi, ez esetben csak | + | Míg az <tt>id</tt> egyedi, ez esetben csak az adott tag-et formázzuk vele. |
=== Táblázatok === | === Táblázatok === |
A lap 2015. október 5., 22:44-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 pedig 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; }
Erre egy másik módszer, ha elnevezzük a tag-eket és azokkal hivatkozunk rájuk a css-ben:
<div>Első sor</div> <div id="first_pink">Második sor</div> <a id="pink_link" href="#valami">egy link</a>
és a css fájlban:
#pink_link{ color: pink; text-decoration: underline; } #first_pink{ color: pink; font-size: large; }
Ha class-ként adjuk meg a stílust, akkor a div class="xyz" tag-ből több is lehet, mind a div.xyz-nek megfelelő stílusban. Míg az id egyedi, ez esetben csak az adott tag-et formázzuk vele.
Táblázatok
Nézzünk egy alap táblázatot html-ben:
<table> <tr><th>Ez az 1. oszlop</th><th>Ez meg a 2. oszlop</th></tr> <tr><td>a</td><td>b</td></tr> <tr><td colspan="2"2 széles példa elem</td> </tr> <tr><td rowspan="2">c</td><td>d</td></tr> <tr> <td>d</td></tr> </table>
Selector
Egy link többéle képen nézhet ki, más ha "friss" a link, vagy ha már egyszer rákattintottunk, vagy ha éppen rajta áll a kurzor. Ezt a következő képen formázhatjuk:
a {text-decoration: underline;} a:active {color: red;} a:visited { color: grey;} a:link {color: blue;} a:hover {text-decoration: line-through;}
Ekkor minden link alá lesz húzva, de azon belül több féle színű lehet és ha rajta van az egér, akkor át lesz húzva.
segíts magadon
- Nézzük meg a többi hallgató vagy tanár oldalát, ha tetszik valamelyiknek a kinézete, akkor próbáljuk meg az oldal forrása alapján lemásolni.
- leírás css-ről
- css validator