Weblapot formázó stílusok 01

• A jelölőelem név után. (pl: h1{font-size: 35px;}


• id egyedi azonosítóval (pl: #azonosító{font-size: 35px;}


• class osztályazonosítóval (pl: .azonosító{font-size: 35px;}


• Szövegfolyamban: (pl: <h1 style="font-size: 35px;">


• Jelölőelemekre, az összes szövegformázásra, és hivatkozásra jellemző stílus, meghatározható.

<footer>
   <address>
    Dokumentumot írta: Zöld Elefánt<br />
    Elérhetőség: 
    <a href="mailto:Valaki@example.com">Valaki@example.com</a>
    <address>
</footer>

• XHTML lapon: <!-- írjuk ide a megjegyzésünket -->
• Stíluslapon: /* írjuk ide a megjegyzésünket */
• JavaScript; PHP:
  // Egysoros megjegyzés
  /*Többsoros megjegyzés*/

Meghatározhatjuk a behúzás mértékét. Szövegrész első sora, mennyivel kezdődjön beljebb.

Meghatározhatjuk a kihúzás mértékét. Szövegrész első sora, mennyivel kezdődjön kijjebb,

<pre>Ez    egy          szöveg.<pre>

Ez    egy          szöveg.

Bővebben, katt ide!

Megjegyzés:Az akronim elem nem támogatott a HTML5-ben.

Idézet szövege.

Aki nem lép egyszerre
Nem kap rétest estére.

Bővebben, katt ide!

• Pozíció viszonyított:
  • {position:relatíve;}
• Pozíció abszolút:
  • {position:absolute;}
• Pozíció rögzített:
  • {position:fixed;} ---- Példa: #fixdiv{position: fixed; width: 250px; top:10px; right:10px; background-color: orange;}
• Pozíció statikus:
  • {position:static;}
• Pozíció öröklés:
  • {position:inherit;}

• Fentre:
  • {top: érték;} -------------- Monitor, azaz, böngésző body ablakának területéhez igazodik.
  • {margin-top: érték;} --- Azon területhez igazodik, melyben az adott elemet elhelyeztük.
  • {padding-top: érték;} -- Általunk meghatározott elem területére vonatkozik.
• Középre:
  • {center} --------------------------------------------- Szöveghez és képekhez.
  • {margin-right: auto; margin-left: auto;} ---- A div és table elemekhez.
• Jobbra:
  • {right: érték;} -------------- Monitor, azaz, böngésző body ablakának területéhez igazodik.
  • {margin-right: érték;} --- Azon területhez igazodik, melyben az adott elemet elhelyeztük.
  • {padding-right: érték;} -- Általunk meghatározott elem területére vonatkozik.
• Lentre:
  • {bottom: érték;} -------------- Monitor, azaz, böngésző body ablakának területéhez igazodik.
  • {margin-bottom: érték;} --- Azon területhez igazodik, melyben az adott elemet elhelyeztük.
  • {padding-bottom: érték;} -- Általunk meghatározott elem területére vonatkozik.
• Balra:
  • {left: érték;} -------------- Monitor, azaz, böngésző body ablakának területéhez igazodik.
  • {margin-left: érték;} --- Azon területhez igazodik, melyben az adott elemet elhelyeztük.
  • {padding-left: érték;} -- Általunk meghatározott elem területére vonatkozik.
• Külső margó: ---- Kiválasztott elemen kivüli területhez.
  • {margin: érték;}
• Belső margó: ---- Kiválasztott elemen bellüli területhez.
  • {padding: érték;}
• Tetszőleges: ------------ Monitor, azaz, böngésző body ablakához
  • {top: érték; left: érték;}
  • {top: érték; right: érték;}
  • {bottom: érték; left: érték;}
  • {bottom: érték; right: érték;}
• Tetszőleges: ------------ Azon elemhez, melyben a tartalmat elhelyeztük.
  • {margin-top: érték; margin-right: érték;}
  • {margin-top: érték; margin-left: érték;}
  • {margin-bottom: érték; margin-left: érték;}
  • {margin-bottom: érték; margin-right: érték;}

Csúsztatásos pozíciók

• Balra:
  • {float: left;}
• Középre:
  • {margin-right: auto; margin-left: auto;}
• Jobbra:
  • {float: right;}
• Nincs:
  • {float: none;}

Mezőkiürítés:

• Balra:
  • {clear: left;}
• Jobbra:
  • {clear: right;}
• Mindkét irányba:
  • {clear: both;}
• Nincs:
  • {clear: none;}

Minden többszintű elem mérete, táblázatok kivételével:
Megadható: százalék %; px; pt; értékkel, és öröklés inherit.

• Legkisebb szélesség:
  • {min-width: 16px;}
• Legkisebb magasság:
  • {min-height: 16px;}
• Legnagyobb szélesség:
  • {max-width: 800px;}

Div szakasz pozíciókról bővebben, kattints ide!

Szöveg pozíciókról bővebben, kattints ide!

• <table alig="center" width="80%" border="1" cellpacing="4" cellpadding="3" summary="..."> </table>


• <table cellpacing="4" cellpadding="3" summary="..." id="tabla">................ </table>
• <table cellpacing="4" cellpadding="3" summary="..." class="tabla">.......... </table>


• Táblázat középre:
  • {margin-right: auto; margin-left: auto;}


• Cella szegély becsukása:
  • { border-collapse: collapse;}


• Cella szegély elválasztása:
  • { border-collapse: separate;}


• Cellatávolság:
  • { border-spacing: 5px;}


• Rövid leírás a táblázat tartalmáról, hangos képernyőfelolvasókhoz:
  • summary="..."


• Hangos képernyőfelolvasókhoz:
  • headars és a scope


• Cellák egyedi szélessége:
  • <th width="33%">


• Cella "Oszlop" szélesség:
  • <td colspan="2">


• Cellasor magasság:
  • <td rowspan="2">


• Üres cella:
  • <td>&nbsp;</td>


• Szöveg igazítás <th> cellákban:
  • Alapértelmezett: Vízszintesen és függőlegesen középre.
  
  
  • Középre fent {vertical-align: top;}
  
  
  • Középre lent {vertical-align: bottom;}
  
  
  • Középre balra {text-align: left;}
  
  
  • Középre jobbra {text-align: right;}
  
  
  • Balra fent {text-align: left; vertical-align: top;}
  
  
  • Balra lent {text-align: left; vertical-align: bottom;}
  
  
  • Jobbra fent {text-align: right; vertical-align: top;}
  
  
  • Jobbra lent {text-align: right; vertical-align: bottom;}


• Szöveg igazítás <td> cellákban:
  • Alapértelmezett: Vízszintesen balra, függőlegesen középre.
  
  
  • Balra fent {vertical-align: top;}
  
  
  • Balra lent {vertical-align: bottom;}
  
  
  • Középre {text-align: center;}
  
  
  • Középre fent {text-align: center; vertical-align: top;}
  
  
  • Középre lent {text-align: center; vertical-align: bottom;}
  
  
  • Jobbra {text-align: right;}
  
  
  • Jobbra fent {text-align: right; vertical-align: top;}
  
  
  • Jobbra lent {text-align: right; vertical-align: bottom;}
  
  


• Mindkét cellában:
  • Fentre: {vertical-align: top;}
  • Lentre: {vertical-align: bottom;}
  • Jobbra: {text-align: right;}

• Táblázat fejléc <th> elemei:
  • thead
  • Egyedi azonosítót is rendelhetünk hozzá,
    ekkor a CSS fájlban határozzuk meg, stílusait.
  • <thead id="thead">



• Táblázat tartalmi <td> elemei:
  • tbody
  • Egyedi azonosítót is rendelhetünk hozzá,
    ekkor a CSS fájlban határozzuk meg, stílusait.
  • <tbody id="tbody">



• Táblázat lábléc elemei:
  • tfoot
  • Egyedi azonosítót is rendelhetünk hozzá,
    ekkor a CSS fájlban határozzuk meg, stílusait.
  • <tfoot id="tfoot">

Példa:
   <table width="90%"  border="2" cellpadding="3" cellspacing="2">
     <thead  style="background-color:red">
       <tr><th>th cella</th><th>th cella</th><th>th cella</th></tr>
     </thead>
     <tbody  style="background-color:lime">
       <tr><td>td cella</td><td>td cella</td><td>td cella</td></tr>
       <tr><td>td cella</td><td>td cella</td><td>td cella</td></tr>
     </tbody>
     <tfoot style="background-color:yellow">
       <tr><td>td cella</td><td>td cella</td><td>td cella</td></tr>
     </tfoot>
   </table>

Meghatározhatjuk minden oszlopra külön-külön.
  <colgroup>
    <col style="background-color:red">
    <col style="background-color:lime">
    <col style="background-color:yellow">
  </colgroup>

 
Meghatározhatjuk több oszlopra is.
  <colgroup>
    <col style="background-color:yellow">
    <col span="2" style="background-color:red">
  </colgroup>

Példa:
   <table width="90%"  border="2" cellpadding="3" cellspacing="2">
     <colgroup>
       <col style="background-color:red">
       <col style="background-color:lime">
       <col style="background-color:yellow">
     </colgroup>
     <tr><th>th cella</th><th>th cella</th><th>th cella</th></tr>
     <tr><td>td cella</td><td>td cella</td><td>td cella</td></tr>
     <tr><td>td cella</td><td>td cella</td><td>td cella</td></tr>
     <tr><td>td cella</td><td>td cella</td><td>td cella</td></tr>
   </table>

TÉMAKÖRRŐL bővebben, kattints ide: Táblázatok!

TÉMAKÖRRŐL bővebben, kattints ide: Táblázatok stílusai bemutató!

• Első szintű stílus:
  • ul{list-style: .........; }
• Másod szintű stílus:
  • ul ul{list-style: .........; }
• Harmad szintű stílus:
  • ul ul ul{list-style: .........; }
• Kezdő sorszám:
  • <ol start="3">
• Alapértelmezett számozott:
  • {list-style: decimal;}
• Teli kör. Alapértelmezett jelképes: ul{list-style: disc;}
  • Üres kör: ul ul{list-style: circle;}
    • Négyzet: ul ul ul{list-style: square;}
• Nincs sorszám, és nincs előjel:
  • {list-style: none;}
• Nagybetűk:
  • {list-style: upper-alpha;}
• Kisbetűk:
  • {list-style: lower-alpha;}
• Római számok nagybetűkkel:
  • {list-style: upper-roman;}
• Római számok kisbetűkkel:
  • {list-style: lower-roman;}
• Arab sorszám 0-val kezdődik:
  • {list-style: decimal-leading-zero;}
• Sorszámozás visszafelé:
  • <ol reversed="reversed">
• Képet adunk meg:
  • ul{list-style: url(képnév.gif);}
• Minden listánál ez jelenjen meg:
  • <style type="/text/css"> ul{list-style: url(képnév.gif);} </style>
• Alapértelemezett, kilógó:
  • {list-style-position: outside;}
• Kilógás nélkülire:
  • {list-style-position: inside;}
• Sorszámozott és behúzott:
  • {list-style: decimal inside;}
• Kijjebb a többitől:
  • listasor_azonosító{text-indent: -20px;}
• dt { font-weight: bold; margin-top: 1em;}
• dd { font-size: small;}
• Listasorok megjelenítés függőlegesen: (A li előjeleket törli.)
  • {display: block;}
• Listasorok megjelenítés egy sorba: (A li előjeleket törli.)
  • {display: inline;}

• li elem
• li elem
• li elem

.linear li {display: inline; color:blue; border:1px solid white;
                margin-left:5px;  padding:3px; }
    <ul style="list-style-type:circle" class="linear">
        <li>li elem</li>
        <li>li elem</li>
        <li>li elem</li>
    </ul>

• li elem
• li elem
• li elem

1. li elem
2. li elem
3. li elem

50. li elem
51. li elem
52. li elem

1. li elem
2. li elem
3. li elem

1. li elem
2. li elem
3. li elem

1. li elem
2. li elem
3. li elem

50. li elem
51. li elem
52. li elem

1. li elem
2. li elem
3. li elem

Listák belső listákba ágyazhatók.
Listaelemek más HTML elemeket is
tartalmazhatnak.
CSS tulajdonságok 
    float:left (úszó: balra) 
    display:inline (vízszintesen)

1. li elem
2. li elem
3. li elem

1. li elem
2. li elem
3. li elem

1. li elem
2. li elem
3. li elem

7. li elem
8. li elem
9. li elem

7. li elem
8. li elem
9. li elem

Listákról bővebben, kattints ide: Lista stílusok!

• Képlekérő parancssor:
  • <img src="képfájlnév.jpg" width="....." height="......" alt="leírás" class="azonosító" />
• Háttérkép megjelenítése:
  • {background: url(kép_elérési_útvonala.jpg);}
• Kép azonosító:
  • Összes képre hatással van: img
  • Ezen azonosítóval ellátott képekre van hatással: class="azonosító"
  • Egyedi azonosítás: id="azonosító"
• Kép szélessége:
  • width=".......px"
• Kép magassága:
  • height=".......px"
• Képet helyettesítő szöveg:
  • alt="szöveg"
• Rövid leírás a képről:
  • title="..........."
• Hosszú leírás, különálló HTML fájlra mutat:
  • longdesc="elérési_út.html"
• Ismétlődés
  • nincs:{background-repeat: no-repeat;
  • Ismétlődés az adott területen: repeat
  • Ismétlődés vízszintesen: repeat-x
  • Ismétlődés függőlegesen: repeat-y
  • Ismétlődés nincs: no-repeat
  • Ismétlődés öröklődik: inherit
• Fotó fényereje:
  • {opacity:0.5; filter:alpha(opacity=10);}
• Melyik terület legyen látható:
  • {clip:rect(0px,50px,50px,0px);}
• Vizjel, háttér-alárendelés:
  • Fix: {background-attachment: fixed;}
  • Gördülő: scroll;
  • Öröklődés: inherit
• Háttérkép pozíció meghatározás:
  • {background-position: center;}
• Háttérkép pozíció:
  • Bal felső: left top
  • Bal közép: left center
  • Bal alsó: left bottom
  • Jobb felső: right top
  • Jobb közép: right center
  • Jobb alsó: right bottom
  • Középpre fent: center top
  • Totál közép: center center
  • Középpre lent: center bottom
  • Pozíció %-ban: x% y%
  • Pozíció px-ben: xpos ypos
  • Öröklődés: inherit
• Mozgó háttérkép:
  • <marquee direction="up"> <p class="hatterkep"> </p></marquee>

Képekről bővebben, kattints ide!

Háttérképekről bővebben, kattints ide!