Informatika1-2015/Gyakorlat5

A MathWikiből
(Változatok közti eltérés)
(A CSS fájl tartalma)
1. sor: 1. sor:
[[Informatika1-2015/Gyakorlat4|Előző gyakorlat]] - [[Informatika1-2015#Gyakorlatok|Fel]] - [[Informatika1-2015/Gyakorlat6|Következő gyakorlat]]
 
 
 
== CSS ==
 
== CSS ==
 
A [https://hu.wikipedia.org/wiki/Cascading_Style_Sheets CSS] a [https://hu.wikipedia.org/wiki/HTML 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 [https://hu.wikipedia.org/wiki/Cascading_Style_Sheets CSS] a [https://hu.wikipedia.org/wiki/HTML HTML]-hez tartozó formázási lehetőség. Segítségével szebb honlapokat lehet csinálni, mint kizárólag HTML-el.
62. sor: 60. sor:
 
|italic, bold
 
|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:
 +
<pre>
 +
<body>
 +
<div>Első sor</div>
 +
<div>Második sor</div>
 +
<div>Harmadik sor</div>
 +
</body>
 +
</pre>
 +
Csak a második sort rózsaszínnel akarom szedni:
 +
<pre>
 +
<body>
 +
<div>Első sor</div>
 +
<div class="my_pink_style">Második sor</div>
 +
<div>Harmadik sor</div>
 +
</body>
 +
</pre>
 +
Ezzel együtt a css fájlban:
 +
div.my_pink_style{
 +
  color: pink;
 +
}
 +
Különböző <tt>div</tt>-elet definiálhatunk, mindegyiknek saját formátummal, és bármilyen tag-nek lehet többfajta formátuma, <tt>class</tt>-okkal megkülönböztetve:
 +
<pre>
 +
<a class="kicsi_link" href="index.hu">Index</a>
 +
<a class="fontos_link" href="bme.hu">BME</a>
 +
</pre>
 +
Ahol a css fájlban:
 +
a.kicsi_link{
 +
  color: blue;
 +
  font-size: small;
 +
}
 +
a.fontos_link{
 +
  color: red;
 +
  font-size: large;
 +
}
  
 
[[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., 20:23-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, 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.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;
}

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

Személyes eszközök