Oldal kiválasztása

Szövegformázás a Diviben – szavak eltérő formázása

2019.08.20.

Az alapoknál már szó volt arról, hogy a szövegtörzset, illetve a H1 jelölésű címet és a H2-H6 alcímeket  külön tudjuk formázni.

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!