Informatika1-2015/Gyakorlat5

A MathWikiből

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 class="kozepre" 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>

Ehhez a css-ben:

td, th {
 border: 1px solid black;
}
table {
 border-collapse: collapse;
}
td.kozepre {
 text-align: center;
}

Így lesz szegélye a táblázatnak. Figyeljük meg a középre igazítást is.

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.

Lehet megadni olyan stílus osztályt, ami nem egy konkrét tag-re vonatkozik. A css fájlban:

.kozepre {
  text-align: center;
}

Ekkor az index.html-ben így tudjuk használni:

<h1  class="kozepre">ez a cím középen van</h1>
<div class="kozepre">ez a szöveg középen van</div>
<a   class="kozepre" href="math.bme.hu">ez a link is középen van</a>

segíts magadon

  • Nézzük meg a többi hallgató vagy tanár oldalát, ha tetszik valamelyik honlap, akkor próbáljuk meg a forrás alapján lemásolni.
  • leírás css-ről
  • css validator

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

Személyes eszközök