Informatika1-2015/Gyakorlat5
| 102. sor: | 102. sor: | ||
font-size: large; | font-size: large; | ||
} | } | ||
| + | |||
| + | Erre egy másik módszer, ha elnevezzük a tag-eket és azokkal hivatkozunk rájuk a css-ben: | ||
| + | <pre> | ||
| + | <div>Első sor</div> | ||
| + | <div id="first_pink">Második sor</div> | ||
| + | <a id="pink_link" href="#valami">Harmadik sor</a> | ||
| + | </pre> | ||
| + | é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 <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 egy adott tag-et formázuuk vele. | ||
| + | |||
| + | === Táblázatok === | ||
| + | Nézzünk egy alap táblázatot html-ben: | ||
| + | <pre> | ||
| + | <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> | ||
| + | </pre> | ||
=== Selector === | === Selector === | ||
| 111. sor: | 141. sor: | ||
a:hover {text-decoration: line-through;} | 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. | 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. | ||
| + | * [http://www.w3schools.com/css/default.asp leírás css-ről] | ||
| + | * [http://jigsaw.w3.org/css-validator/ css validator] | ||
[[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., 22:40-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;
}
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">Harmadik sor</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 egy adott tag-et formázuuk 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
