Informatika1-2016/Gyakorlat5

A MathWikiből
(Változatok közti eltérés)
(A CSS fájl tartalma)
 
58. sor: 58. sor:
 
|-
 
|-
 
!font-style
 
!font-style
|italic, bold
+
|italic
 +
|-
 +
!font-weight
 +
|bold
 
|}
 
|}
  

A lap jelenlegi, 2016. október 4., 11:11-kori változata

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

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övektezõ 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. (9. előadás)
  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. (9. előadás)
  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. előadás)
  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. (9. előadás)
  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. (9. előadás)
  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.
Személyes eszközök