Ugrás a főoldalra!

Felhasználónév:

Jelszó:

 :: ".$_ASWC_['NAME']." ".$_ASWC_['VERSION']." ".$_ASWC_['STATUS'];?> - [Látogatók: ]  
- Prológus - Impresszum | Ajánlj minket - DumAblak - Dühöngő - GY.I.K. - FÓRUM | Vajdaság
Freelance Jobs

Témaköreink

[ 3D Studio MAX ]

[ C,C++ ]

[ CSS ]

[ HTML/XHTML ]

[ Online Marketing ]

[ Photoshop ]

[ PHP ]

[ Putra Writer ]

[ Webdesign ]

 

DumAblak


Beleszólok
 

On-line

Dev, Admin: 0
Lektorok, írók: 1
  ÷Magus|BOT
Felhasználók: 0
Vendégek: 1
Tegnap: 0
E havi:
 

Statisztika

Oktatóanyagok száma
 Publikus: 128

Legolvasottabb írónk
 outesticide 366607

Legszorgalmasabb írók
1. balymo 24
2. outesticide 20
3. tipli 19
4. adrob 18
5. akciolap 15

Legolvasottabb címek
1. CSS
Egyszerü vízszintes menü és vízszintes menü legördülő almenükkel [55671]
2. CSS
Bevezetés a CSS alapjaiba [31039]
3. CSS
A pozícionálás, és a z-index [30518]
4. CSS
A felhasználói felület - első rész [24855]
5. CSS
Függőleges menü, legördülő almenüvel [24793]
 

  

CSS -> A betűk

Író: outesticide ( outesticide@netoktato.hu )
  http://vajdasag.rs
Készült: 2005-03-11 18:12:47
Lektorálta: outesticide
Lektorálva:
2006-03-16 23:23:24 [12447]
  <- Előző :: Nyomtatási nézet :: Üzenet az írónak :: Köv. ->
A betű és szöveg formázásában a CSS jóval nagyobb eszköztárat nyújt nekünk mint a HTML.
Ezáltal függetlenebb, átláthatóbb, egyszerűbb kódot, és látványosabb oldalt készíthetünk.

A betűk tulajdonságainak megadására azért lehet szükségünk, hogy az oldalunkon lévő szöveget a felhasználók ugyanúgy láthassák, mint mi.
Ha nem adunk meg oldalunkon semmilyen betűtulajdonságot, akkor annak formázását a felhasználóra hagyjuk, ezzel veszélyeztetve oldalunk egységét, megjelenését.

A betűkészlet kiválasztása



Szintakszisa:
font-family: times

A font-family tulajdonság után meg kell adnunk a betűkészlet nevét. Itt nem kizárólag csak egy betűkészletet adhatunk meg.
Azért érdemes megadni néhány általunk alkalmazott betűkészletet, mert előfordulhat, hogy azok nem találhatóak meg a felhasználó gépén. Célszerű először az általunk használt készletet, majd ahhoz egy, kettő, három nagyon hasonló betűtípust és végül egy általánosat megadni.
font-family: Tahoma, Verdana, Arial, Times;

A fenti kódban több készletet is megadtunk. Ezek nevét vesszővel választjuk el.

A betűkészlet megjelenése - font-style



A betűkészlet stílusát a font-style tulajdonsággal szabhatjuk meg. Ebben az esetben három értéket adhatunk meg (ugyanúgy, mint HTML-ben)

normal: A betűk normál, álló alakúak lesznek. Ez alapértelmezett érték, tehát megadása nem mindig szükséges.
itlaic: A használt készlet dőlt betűit alkalmazza.
oblique: A beállított betűtípust dönti meg, tehát nem dőlt betűket alkalmaz, csak megdönti azokat. Itt figyelembe kell venni az ebből adódó torzulásokat.

Példa:
.szoveg{
      font-style: italic;
}

A "szoveg" osztály minden betűje dőlt lesz.

A betűkészlet megjelenése - font-variant



Az írás normál, és kiskapitális alakra formálását a font-variant: használatával szabhatjuk meg.
A kiskapitális csak olyan fontokra van hatással, amelyek megkülönböztetik a kis, és nagybetűket.

normal: normális betűalak
small-caps: kiskapitális betű

Példa:
.szoveg2{
      font-variant: small-caps;
}

"szoveg2" osztály minden betűje kiskapitális alakú lesz.

A betűkészlet megjelenése - font-stretch



A szöveg betűkészletének szélességét a font-stretch – el határozhatjuk meg.

normal: Alapértelmezett, normális szélesség.
widest: A következő elérhető szélesebb változat.
narrow: A következő rendelkezésre álló keskenyebb változat.
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded: A szélességek értékei a legkeskenyebbtől, a legszélesebbig.


A betűkészlet megjelenése - font-weight



Betűk vastagságát a font-weight tulajdonsággal szabhatjuk meg.
Megadhatjuk az alábbi skála értékei alapján számokkal. Azonban a legtöbb betűkészlet csak 400-as és 700-as vastagságú betűket tartalmaz.

100
200
300
400
500
600
700
800
900
normal: Normál vastagságú font (400).
bold: Félkövér betű (700)
bolder: A készletben lévő legvastagabb betűt (800). Ha nincs ilyen vastagságú betű a font-ban, akkor visszatér a bold értékre.
lighter: Legkeskenyebb betűt határozza meg.

Példa:
.szoveg3{
      font-weight: 300;
}

.szoveg4{
      font-weight: bold;
}

Az első kód a normális betűvastagságtól vékonyabb, a második pedig vastagabb betűt jelenít meg.

A betűkészlet megjelenése - méretek - font-size



Az előző leckében leírtak alapján, tehát itt az abszolút és relatív megadási mód lehetséges.

Az abszolút megadás

Mértékegységben határozzuk meg a szükséges méretet, a hétköznapi egységeket használva. Ezeket például egy oldal nyomtatási képének elkészítésekor használhatjuk.

mm - miliméter
cm - centiméter
in - hüvely (2,54 centiméter)
pt - pont (0.0352 centiméter)


Példa:

.szoveg5{
      font-size: 10pt;
}
.szoveg6{
      font-size: 20mm;
}

A "szoveg5" osztály betűi 10 pont magasak lesznek, a "szoveg6" osztály betűi pedig 20 miliméter magasak lesznek.

A relatív megadás

Egy másik mérethez viszonyítva határozzuk meg a betű méretét.

px: Pixelben (képpont) megadott érték.
em: Az 1em az adott környezet betűméretét jelöli.
Ex: A kijelölt betűkészlet kisbetűinek magassága.

Százalékos értékek
.szoveg32{
      font-size: 12px;
}
.szoveg33{
      font-size: 14em;
}
.szoveg35{
      font-size: 2.7em;
}

Az első 12 pixel magas, második 14em magas, a harmadik 2.7em magas betűket eredményez.
Figyeljünk arra, hogy a számérték és a mértékegység között ne legyen elválasztás, mert az hibához vezethet.


Százalékos formában megadott értékek. Ezek viszonylagosak a többi elemhez képest.
font-size: 120%;

Külső betűkészlet betöltése - importálása



CSS2-ben lehetőség volt a betűkészletek egy adott helyről való betöltésére. CSS2.1-től már nem elérhető ez a lehetőség.
* Minden további kérdéseddel fordulj az anyag írójához.
  <- Előző :: Nyomtatási nézet :: Üzenet az írónak :: Köv. ->

 

Hello Vendég

Az oktatóanyagok olvasásához be kell jelentkezned.

Szeretnék regisztrálni.

Elfelejtettem a jelszavam!
Kiküldöm magamnak!