Szövegformázás a Diviben – szavak eltérő formázása
De mi van akkor, ha egyazon címen vagy mondaton belül akarsz egy szót kiemelni más színnel, más mérettel, betűtípussal, stb.?
A Diviben erre is van lehetőség. Kétfélét is megmutatok.
Szavak eltérő formázása szövegen belül
1. Span style módszer


A fenti első képernyőképen láthatod, hogy Szöveg (HTML) módban a kiválasztott szó vagy szavak elé tesszük kacsacsőrök közé a span style -t (kiejtése: szpen sztájl), mögé pedig a lezáró /span -t, szintén kacsacsőrök között.
Az első részbe azután a látható módon beírjuk a formázást. A style után egyenlőségjelet teszünk, majd dupla idézőjelek között megadjuk a formázó elemeket. Az idézőjel lezárása előtt pontosvesszőt írunk. Ha több stíluselem is van, akkor azokat is pontosvesszővel választjuk el egymástól.
Ha háttérszínként a #FFFF00-t választjuk, akkor az eredmény a szövegszerkesztőkből ismert kijelölés lesz:


2. Mark módszer


A mark (kiejtése: márk) módszerrel a kijelölni kívánt szó vagy szavak elé és mögé tesszük kacsacsőrök közé a kezdő mark és a lezáró /mark jelet.
Ez alapból a szövegszerkesztőkből ismert sárga kijelölést eredményezi. (Hasonlót a fenti megoldáshoz.)
Az igazán izgalmas rész viszont csak ezután következik!
Egyrészt itt is megváltoztathatod a kijelölés színét bármilyen más színre. Ha transzparens hátteret választasz, teljesen eltűnik a kijelölés színe. Na, de akkor miért csináltuk ezt az egészet?
Hogy a mark címkét használva egyéni CSS-szel olyanra formázhassuk a kijelölt szavakat, amilyenre csak akarjuk!
Választhatunk akár új betűtípust és/vagy színt, vastagságot; írhatunk kisbetűs szavak között csupa nagybetűvel vagy fordítva, stb. Szuper, ugye? Határt csak a fantáziád szab, illetve a HTML szövegformáló készlete.
Az Egyéni CSS-t hozzáadhatod egy-egy oldal szintjén, de akár az egész weboldalra érvényesen is. Ilyenkor valamennyi mark elemmel kijelölt tartalom azonos módon (a CSS-ben megadott módon) formázódik majd az adott oldalon vagy az egész weboldaladon.
A span style-t kombinálhatod a mark-kal, s akkor még pluszban ott vannak a Diviben rendelkezésre álló beállítások is. Így tényleg egyedi megoldásokat tudsz létrehozni.
Mivel a mark-hoz adott egyedi CSS az egész oldalt alakítaná, tehát a korábbi (sárga hátterű) megjelenést is, itt a span style-lal mutatok egy példát:
INTERNET mindenkinek


Első lépésként beírtam a szöveget. Az INTERNET-et nagybetűkkel, a mindenkinek-et kicsikkel, legalább ezt sem kellett tovább formázni. H2-ként határoztam meg. A Tervezés fül alatt beállítottam hozzá a Gloria Hallelujah betűtípust, ami kézzel írotthoz hasonló.
Utána (az első képernyőképen kívülről befelé haladva) tettem egy sárgás hátteret, némi kitöltéssel. Az INTER-hez Oswald betűtípust választottam. A NET-hez pedig szintén Oswaldot, kék színben.
Így alakult ki a fenti példa.
Használd a span style-t és a mark-ot, alakíts ki velük egyedi, izgalmas megoldásokat a weboldaladon!