Informatika1-2015/Gyakorlat5

A MathWikiből
(Változatok közti eltérés)
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., 21: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

Előző gyakorlat - Fel - Következő gyakorlat

Személyes eszközök