|
h1-h6 Címsorok formázása
Létezik 6 előre megadott HTML elem amit főként címeknek lehet használni nagyobb hangvételű írásoknál. Ennek a 6 elemnek előre le vannak definiálva bizonyos tulajdonságai de nagyon egyszerűen be tudtuk kódolni őket, egyszerűn elhívhatjuk meg őket és könnyen beleépíthetjük az oldalunkba. Mutatom is őket!
Sziasztok én egy h6-os címsor vagyok!
Sziasztok én egy h5-ös címsor vagyok!
Sziasztok én egy h4-es címsor vagyok!
Sziasztok én egy h3-as címsor vagyok!
Sziasztok én egy h2-es címsor vagyok!
Sziasztok én egy h1-es címsor vagyok!
Mint látjátok a h6 a legkisebb és a h1 a legnagyobb, ezek az elemek főként azért jöttek létre hogy könnyen és egyszerűen tudjuk a cím-alcím rendszereket a weblapokon is használni, az alábbó módon hívhatjuk meg őket (a Gportálos szerkesztőben így is meghívhatjuk őket )
<h6> Sziasztok én egy h6-os címsor vagyok!</h6>
<h5> Sziasztok én egy h5-ös címsor vagyok! </h5>
<h4> Sziasztok én egy h4-es címsor vagyok! </h4>
<h3> Sziasztok én egy h3-as címsor vagyok!</h3>
<h2> Sziasztok én egy h2-es címsor vagyok! </h2>
<h1> Sziasztok én egy h1-es címsor vagyok! </h1>
Ha megfigyeljük vannak ezeknek a címeknek beépített tulajdonságaik. Az első és talán a legfontosabb hogy ezek doboz(block) színtű elemek, így meghívásukkor teljesen külön állnak az őket körbefolyó szövegtől, mint a címek. Szélességük a rendelkezésre álló hely 100%-át kitölti, alapból középre vannak igazítva, és meghatározott mérettel rendelkeznek, és félkövér formázással.
Gportálosok esetében fontos lehet hogy a blogbejegyzés címei alapjáraton egy h2-es címsorba vannak belerakva, így ha szeretnéd használni valamilyen formában az oldaladon ezeket akkor elsőkörben a másik 5-öt használd.
Viszont semmi sem szab gátat annak hogy tetszés szerint formázzuk őket, így remek részei lehetnek akár egy belső menünek, és saját stílusunkhoz szabhatjuk és széleskörben felhasználhatjuk őket. A szöveget igazíthatjuk, állathatunk be nekik hátteret, az összes szövegformázási tulajdonságot érvényesíthetjük, a méretüket is megváltoztathatjuk, sokszor egyszerűbb őket használni mint hasonló feladatokra egy saját elemet létrehozni.
Nézzünk is meg pár formázási lehetőséget, nézzük a <h6></h6>-os avagy a legkisebb címsorunkat egy teljesen új köntösben.
h6 {
Height: 50px;
Text-align: left;
Color: white;
Font-family: tahoma;
Font-style: italic;
Font-size: 23pt;
Background: green; }
Lássuk az új h6-os címsorunkat:
Én is egy h6-os címsor vagyok ám!
Mivel ez egy beépített elem így nincs szükség semmilyen más azonosítóra az elem CSS-ben való formázásához, így simán h6-ként hivatkozhatunk rá, így az oldalon található összes h6-os címsort érinteni fogja a formázás, ha a kört szűkíteni szeretnéd akkor felírhatod a formázást az adott helyen lévő h6-okra is. Pl ( .doboz1 h6 {..})
Mint látjuk a dobozban lévő szöveg igazítására egy pofon egyszerű text-align bőven elegendő, és szintén egyszerűen működnek rákjuk a jól ismert szövegformázások is, és mivel egy dobozról beszélünk, méretet is állíthatunk be neki, és mivel doboz ezért padding margin, border, outline, minden ilyesmi jöhet.
Erre is mutatok egy példát, egy meghatározott méretű címsort szeretnénk létrehozni, legyen mondjuk a h6-os címsorunk 60% széles ( a rendelkezésre álló hely 60%-át töltse ki) ha ezt így definiáljuk a dobozunk jobb oldalon lesz és valóban a teljes szélesség 60%-a lesz. Mivel alapvetően az elem úgy van definiálva hogy benne lévő tartalom van középen, és nem a doboz, ezért került balra a dobozunk. Rakjuk a középre:
H6 {
Width: 60%;
margin: 0 auto; /*a margók segítségével toljuk középre a dobozt*/
}
Ettől függetlenül a Text-align természetesen bármi lehet és könnyen létrehozhatunk ilyet is akár:
h6 {
width: 60%;
margin: 0 auto;
Text-align: left;
Color: white;
outline: 4px double white;
outline-offset: -5px;
Font-family: tahoma;
Font-style: italic;
font-weight: normal;
Font-size: 23pt;
padding: 20px;
Background: green;}
Ugye mennyi mindenre képes egy kis h6-os címsor?
Hellóka, megint én vagyok az a h6-os!
Igazából jelen leírás egy általános doboz formázás leírásnak is elmenne, viszont szerettem volna bemutatni ezeket a pofon egyszerű beépített elemeket, megmutatni a tulajdonságait, és ösztönözni mindenkit arra hogy használja őket, és használja ki őket ha már megalkották őket nekünk.
Már említettem hogy a Gportál blogmoduljában a címek h2-es cím sorok, annyi különbséggel hogy azok be vannak linkelve, így az ott található cím felépítése a következő:
<a href="#"><h2> Cím </h2></a>
A <a></a> tag mint link alap esetben egy inline elem, még a h2 egy doboz, de a fentebb leírt formázásokat nyugodt szívvel használhatjátok rajtuk, csak vigyázzatok mikor melyik tulajdonságnál mire hivatkoztok. Az inline <a></a> elemnek nem tudtok például méretet definiálni, de a h2-es doboznak már igen.
Használjátok őket! Nem kell külön elemet létrehoznotok, használjuk a HTML adta ilyen egyszerű lehetőségeket.
| 
AJÁNLOM AZ OLDALT
Friss bejegyzések
Friss hozzászólások
Archívum