CSS tulajdonságok
Ebben a cikkben összeírjuk Nektek a legfontosabb CSS tulajdonságokat, amiket tudtok használni a portálotokon. FONTOS! Ezek csak kód részletek, tehát ezeket hiába illeszted be forráskódba, NEM történik semmi! Ezeket a paramétereket azért írtuk ide össze, hogy aki már ismeri kicsit a CSS kódokat, át tudja benne írni az adatokat, illetve új paramétereket is megadhassanak. Pl. ha a CSS-ben nincs szó betű közti távolságról, akkor itt meg tudja nézni, mely kódrészletet kell megadnia, ahhoz, hogy közelebb/távolabb kerüljenek a betűk egymáshoz. Értelemszerűen a CSS-dben arra a részhez másold be, ahol szeretnéd látni a változást. Pl. ha az előbb említett betű közti távolságot szeretnéd növelni a modulfejlécek címeinél, akkor a CSS-ben a td.modtitle résznél add meg a letter-spacing-t.
Remélem érthető. Ha nem, akkor a Kérdezőben kérdezz rá, hová kell rakni, amit szeretnél megváltoztatni.
Szöveg, betű tulajdonságok |
font-color: #000000; |
szövegszín, írhatod a színek angol nevét, vagy hexa színkódban is megadhatod (ezt látod a példában), illetve simán color-ként is szerepelhet font nélkül |
font-family: verdana; |
betűtípus, lehet még pl. Arial, Tahoma, Comic Sans Ms, Courier New, Times New Roman, Georgia |
font-size: 8pt; |
betűméret; megadhatod pt-ben, %-ban, vagy: xx-small, x-small, small, medium, large, x-large, xx-large |
font-style: italic; |
betűstílus, lehet: normal, ekkor nem történik semmi, s lehet még: italic vagy oblique, mindkettő azt jelenti, hogy dőlt |
font-weight: bold; |
betűvastagság, lehet: normal (normál), bold (félkövér) |
line-height: 9px; |
sortávolság, ajánlot a betűméretnél nagyobb számot megadni, ellenben összecsúsznak a sorok, s ez nem túl esztétikus! |
word-spacing: 10px; |
szavak közötti távolság pixelben megadva |
text-transform: uppercase; |
uppercase: összes betű nagy, capitalize: első betű nagy, lowercase: összes betű kicsi (ezek linkeknél nagyon jók) |
text-decoration: none; |
szöveg dekorációját adhatod meg, jelenleg none, tehát nincs, ha linknél használod, akkor az alapértelmezett aláhúzás eltűnik. Lehet még: underline (aláhúzott), overline (felülhúzott), line-through (áthúzott) |
text-align: center; |
szöveg igazítása, center (középre), left (balra), right (jobbra), justify (sorkizárt) |
letter-spacing: 2px; |
betűk közötti távolság pixelben megadva |
Keretek |
border: #000000 1px solid; |
a border szó jelenti a keretet, szegélyt, a színkód adja meg a keret színét, az 1px a méretét, a solid a stílusát. Ez egy alap, lentebb láthatod szétbontva. |
border-right: #000000 1px solid; |
ez a jobb oldali szegély, a right szó helyére írhatod: left (bal), top (teteje), bottom (alja). Így külön-külön is megadhatod a szegélyek méretét, stílusát, színét. |
border: solid; |
a solid a sima szegélyt jelenti, állíthatod még pontozottra: dotted, és szaggatottra: dashed. |
Háttér |
background |
háttér, lentebb olvashatod, miket adhatsz meg |
background-color: #000000; |
háttérszín, megadhatod hexaszínkódban (ez van a példában), beírhatod a szín angol nevét, de állíthatod átlátszóra is: transparent |
background-image: url ("") |
háttérkép, a zárójelben az idézőjelek közé írd a kép URL címét, ha nem akarsz háttérképet: none, vagy így üresen hagyod |
background-position: top left; |
innen kezdi a háttérképet betölteni, most a bal sarok van beállítva, szerintem ez az ideális. |
background-attachment: scroll; |
a háttérkép gördüljön a tartalommal (scroll) vagy ne mozduljon (fixed) |
background-repeat: repeat; |
Háttérkép ismétlése. Ismételje: repeat; Ne ismételje: no-repeat |
Egyéb |
width: 300px; |
szélesség |
height: 20px; |
magasság |
margin: 10 px; |
margó, megadható oldalanként: margin-left, margin-right, margin-bottom, margin-top |
|