Informatika1-2019/Gyakorlat5

A MathWikiből
A lap korábbi változatát látod, amilyen Merdelyi (vitalap | szerkesztései) 2019. október 15., 15:15-kor történt szerkesztése után volt.
(eltér) ←Régebbi változat | Aktuális változat (eltér) | Újabb változat→ (eltér)

Előző - Fel - Következő

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

A fő oldalnak 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://sandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/minta_css

honlapot és a hozzá tartozó

http://sandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/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. Sima html-ben így lenne: <html background=white>...</html>

Vagyis a honlap háttere fehér lesz.

a{
 color: blue;
}

Ennek hatására a honlap összes a tagje (linkek) kék lesz (<a color=blue>...</a>)

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
font-weight 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>

Dobozok

Tagolás gyanánt használjunk div, p és span tag-eket. A div és a p új sort nyit a tartalmának, a p még ki is hagy előtte-utána helyet. A span nem tartalmazhat div-et vagy p-t, egy soron belül különít el egy részletet.

Arra jó, hogy ilyen tag-ek közé zárjuk a honlapunk bizonyos részeit, hogy utána (egyedileg vagy együttesen) hivatkozni tudjunk rájuk és formázni őket. Tagoló szerepük van.

  <div id="scissors">
    <p>This is <span class="paper">crazy</span></p>
  </div>

Minden html elemnek a következő attribútumai vannak, amelyek az elhelyezkedését határozzák meg: [1]

Például

div {
    padding: 25px;
    border: 25px solid navy;
}

És ezek mindegyikének van -left, -right, -top, -bottom változata, például:

div {
    padding: 25px;
    padding-top: 20px;
    border-top: 25px solid navy;
    border-left: 25px solid navy;
}

Hasznos linkek

Ha még nincs oldalatok

A mai gyakorlat a múlthetire épít, így ha ez valakinek nincs meg, akkor mentse a következő file-okat a public_html mappájába:

Feladatok

Készítsetek egy új file-t a public_html mappátokba style.css névvel, mellette nyissátok meg az index.html-t is.

  1. Először csak inline írjunk CSS kódot az index.html-ünkbe, valahol változtassátok meg a betűk méretét ( style = "font-size:large" )
  2. Írjatok pár span-t az index.html-be, és adjátok őket valamilyen névvel hozzá egy osztályhoz. ( class = "kiemelt" )
  3. A style.css-t kapcsoljátok be az index.html-be és az orarend.html-be is. ( <link rel="stylesheet" href="style.css"> a head-be )
  4. A style.css segítségével érjétek el, hogy a 2. pontban definiált osztályba tartozó span-ek dőlt betűvel legyenek.
  5. Most érjétek el, hogy az összes p-ben levő szövegetek dőlt betűvel legyen.
  6. Mivel így már nem látszik mely szövegrészek voltak a kiemelt span-ben, így változtassátok meg, hogy a kiemeltek ne legyenek dőltek, legyenek félkövérek.
  7. Próbáljátok a szövegetek adott részeit máshova igazítani, pl a címet középre. Használjatok a címhez id-t, ne class-t.
  8. Térjünk át az órarendre. Érjétek el, hogy jelentős margója legyen a táblázatotok head (th) celláinak. Arra vigyázzatok, hogy ilyenkor a border="1"-et ki kell venni a html kódból.
  9. Csináljatok szép keretet a táblázatnak, ne fekete legyen, próbáljátok meg hogy néz ki a dupla, esetleg ha vastagabb.
  10. Térjünk vissza az index.html-re. Érjétek el, hogy ne a hagyományos módon legyen kiírva a listátok, mondjuk gyémántok legyenek a jelölők, vagy római számok a számok.
  11. Változtassátok meg a linkeket, pl ne legyenek aláhúzva, vagy más színnel legyenek. (pl: a:link {font-size:small;}, van még a:visited, a:hover, a:active)
  12. Éljétek ki magatokat, tegyétek olyanná az oldalt amilyenné szeretnétek.

Előző - Fel - Következő

Személyes eszközök