CSS-el a különböző címsor stílusokat is megváltoztathatjátok. Biztos ti is ismeritek ezeket wordben szokás használni, meg általában weblapszerkesztésben. Most ezeknek az egyedi megformálásáról lesz szó.

 

Először is, elmagyaráznám annak, aki nem ismerné, HTML kódban a <h1>…<h6> tagekkel lehet ezeket megjeleníteni. Zárótagjei a </h1>…</h6>. Lássunk egy példát:

<h1>Cherry Universe</h1>

Ez nálam így néz ki:

Cherry Universe

Egyébként stíluskészlet formázás nélkül csak különböző nagyságú címeket tudtok vele létrehozni, de nagyszerű elválasztóként is szolgál, ha egy kicsit megformázzuk őket teljesen egyedire.

 

Először is, alapbeállításként illesszétek be ezt a részt a CSS állományotokba. Ez lesz a címsorok alapstílusa, ami az összes méretre vonatkozik.

h1,h2,h3,h4,h5,h6{ /*címsor alap stílus*/
overflow: hidden; /*ne töröld*/
background: url(képurlje); /*háttérkép urlje, illesszd be*/
margin: 5px 2px 5px 2px; /*távolság a szöveg többi részétől*/
padding: 2px 5px; /*címsor paddingja*/
color: #ffffff; /*betű színe*/
font-weight: bold; /*betűstílus, félkövér*/
font-family: tahoma; /*betűtípus*/
text-align: left; /*szöveg elhelyezkedése*/
line-height: 25px; /*címsor vastagsága*/
-moz-border-radius: 15px; /*vonal lekerekítettsége mozzillban*/
-webkit-border-radius: 15px; /*vonal lekerekítettsége máshol*/
padding-left: 10px; /*szöveg távolsága a vonal bal szélétől*/
}

Még több dolgot is be lehetne állítani, de egyenlőre ennyi elég lesz. Írd át saját kívánságod szerint, illessz be egy háttérképet, vagy adj meg színt. Ha színt állítasz be, az esetben ezt írd be a background helyére:

background-color: #000000; /*háttérszín*/

Ha beállítottad az alap stílust ízlésed szerint, most akkor jöhetnek a különböző méretű címsorok eltérései. Tulajdonképpen, itt csak a méretet érdemes beállítani, ha már az alap stílusban minden megjelent. Mind a hat címsor méreteit állítsd be kedved szerint.

h1{
font-size: 16px;
}

h2{
font-size: 15px;
}

h3{
font-size: 14px;
}

h4{
font-size: 13px;
}

h5{
font-size: 12px;
}

h6{
font-size: 11px;
}

Ha ez megvan, akkor készen is vagyunk a címsorokkal, ezután kedvedre formálhatod a szöveget a HTML tagekkel, de egyszerűbb dolgod van, ha a szövegszerkesztődben alapból lehet címsorméreteket beállítani. Ne felejtsd el, a h1 az első szintű címsor, vagyis a legnagyobb, a h6 pedig a legkisebb. Egyszerű formálni, csak egy kis css alapismeretre van szükséged. Sok szerencsét hozzá :) Kérdéseket, mint mindig, hozzászólásban felteheted.

 


Kérdésed van? Írj bátran!









Hozzászólásod csak jóváhagyás után fog megjelenni.

Ellenőrző kód *