S Z Ö V E G F O R M Á Z Á S !

1. Leggyakoribb szövegformázó címke és stílus

A html lapon megadható, leggyakoribb szövegformázó parancs:
- a nyitó <p> és záró </p> ( részletesen, lásd a bekezdések formázása témakorben.)
- valamint amit csak a mondat végén alkalmazunk a sorlezáró (sorkizáró) utasítás: <br />

A Css azaz stíluslappon megadható, leggyakoribb szövegformázó és stílusparancs.
A törzsre (body) vonatkozó leggyakoribb szabályok. A body-val sok dolgot végretudunk hajtani a weblapon.
Semmiképp ne hagyjuk ki, a body-hoz megírt meghatározások közül:
- háttérszín. ( Tetszés szerint választható )
- betűtípus. ( Választhatunk többféle betűtípust, de a talp nélküli betűket könnyebb olvasni),
- betűméretet. ( Olvashatósági szempontok miatt állitsuk 100%-ra,)

Megjegyzés: 100% = 1em, 130% =1.3em stb.

A teljes body stílus meghatározása, CSS-lapon azaz a stíluslaon:
Következő példában, a kék színnel kiemelt részeket tetszés szerint megváltoztathatjuk.
body {font-family: Arial, Helvetica, sans-serif; font-size: 100.01%; margin: 0.1px; background-color: #ccc; }

Méretek

{ font-size: 14px; }	- Monitor felbontásának, képpont mérete. - Egy átlag 12-es btűméret kb. 10 - 16 px. - Egy hüvelyk körülbelül. 72 px vagy képpont.
{ font-size: 1em; }	- Böngésző programok alapértelmezett betűmérete.
{ margin: 0.5in; }	- inches, 1in = 2.54cm
{ font-size: 12pt; }	- points, 1pt = 1/72 in
{ font-size: 1pc; }	- picas, 1pc = 12pt
{ line-height: 3cm; }	- centiméter. Egy centiméter, körülbelül. 28.5 - 32 px*/
{ word-spacing: 4mm; }	- miliméter.

Vissza a lap elejére

---

 

2. Bekezdések

Nyitó, azaz kezdő <p> címke, és a záró </p> címke között helyezkednek el.
Az XHTML lapon lévő nyitó <p> és záró </p> közé írt szöveg is formázható.

Első példa:A szöveg jobb oldalon lesz látható. (right)
XHTML -lapon történő meghatározás megírása a kezdő <p> címkében.
- balra : left (Ezt nem kell megadni, a böngésző programok autómatikusan balra helyezik a szöveget.)
- középre : center
- jobbra : right

Az első sorban látható, hogyan kell alkalmazni.
A második sorban kék színnel látható, hogy hova kerül a szöveg, ha helyesen adjuk meg a meghatározást.

<p align="right"> Szöveg igazítása jobbra </p>

Szöveg igazítása jobbra.

Második példa:
A css, azaz stíluslapon megadható, kezdő <p> és záró </p> címkék közötti szöveg formázása.
X = betűméret: helyére írhatunk tizedes számértéket is ( 0.5em, 0.6em, 0.9em stb. tetszés szerint)
Y = betűszín: helyére az általunk megfelelő színnek a kódját írjuk be. ( #000, #ccc, stb.)
text-align: = szöveg-igazítás. Ezután adjuk meg, hogy a szöveg hól helyezkedjen el.

Példa: p { font: Xem Arial ; color: #YYY; text-align: right;}

Vissza a lap elejére

---

 

3. A dőlt és a félkövér betűk.

em = dőlt
A kezdő <em>címke és a záró <em>címke közé írt szavak és mondatok, dőlt betűvel jelennek meg. (ez nem összekeverendő a betűméreteknél használt em értékkel.)
strong = félkövér
A kezdő <strong> címke és a záró <strong> címke közé írt szavak és mondatok, félkövér betűvel jelennek meg.

Megjegyzés:
A fenti példákat, a html - lapunkon megírt mondatoknál kell alkalmazni.
Legtöbb böngésző ezeket így ismeri, de néhány nem.
Ezért, a stíluslapon hozzunk létre az <em> címkére és a <strong> címkére vonatkozó meghatározást, mely minden böngészőre alkalmazható.

Példa.
strong {font-weight: bold;}
em { font-style: italic ; }.

Láthatunk négy meghatározást, normal, dőlt és félkövér.
Amelyik szinpatikus, írjuk be a CSS-lapra azaz stíluslapra.

Normal betűkhöz	p{ font-weight : normal;}	<p>Szöveg megjelenése</p>
Dőlt betűkhöz	em{ font-style: italic;}	<p><em>Szöveg megjelenése</em></p>
Ferde betűkhöz	.ferde{ font-style: oblique;}	<p><span class="ferde">Szöveg megjelenése</span></p>
Félkövér betűkhöz:	strong{font-weight: bold;}	<p><strong>Szöveg megjelenése</strong></p>

A stíluslapon, ezzel a megoldással a kijelölt szövegrészhez pluszként megadható:
- betűszín
- háttérszín
- aláhúzás
- szegély, azaz keretet is.

Nézzünk egy példát:
A normál félkövér ( bold ) betűkhöz: Most adunk hozzá színt ( kéket )és aláhúzási vonalat, mely 2px vastag folytonos vonal ( solid ) és színe fekete (black)
strong {font-weight: bold; color: #33C; border-bottom: 2px solid black;}

Vissza a lap elejére

---

 

4. Hagyjunk, üres sorokat.

Minden bekezdés azaz idézetblokk, a HTML lapon így kezdődik : <p>, és ezzel zárul, </p>

A bekezdéseinket záró </p> címke és a következő bekezdésünknél lévő kezdő <p> címke között, automatikusan üres sort hagynak a böngésző programok.
Röviden: minden záró </p> címke és kezdő <p> címke között, üres sor lesz látható.

Üres sor megjelenítésére használjuk a következő meghatározást is, melyet szintén a kezdő és záró p címkék, közé kell beírni: Szóközt, azaz szünetet a jelek között nem alkalmazunk.
<p>&nbsp;</p>

Sor, vagy szövegrész lezárása utasítás: <br /> vagy <br>
Fő feladata: szöveg, vagy mondat végének lezárása.
Hosszú szövegek írásánál (html lapon), az a célunk, hogy amikor a mondatunkat befejeztük, és ez a mondat nem tölti ki az egész sort, de mi azt akarjuk, hogy a következő mondat új sorban kezdődjön, akkor a mondat végénél be kell írni ezt a parancsot <br />

Megjegyzés:
Sorlezáró utasításból a mondatunk végén kettőt helyezünk el egymás mellett.<br /> <br /> vagy <br> <br>
Az első lezárja a mondatot és azt a sort, ahol a mondatunkat befejeztük.
A második sorlezáró utasítás egy üres sort zár le, melynek hatására a szövegsorok között egy üres sor jön létre.

Vissza a lap elejére

---

 

5. Lábléc ( footer )

Úgy alakítják ki, hogy ne legyen hivalkodó.
Ezért kisebb és világosszürke betűkkel jelenítik meg.

Itt találhatók:
- a jogi tudnivalók,
- a cég adatvédelmi elvei
- szerzői jogi megjegyzések, néha a weblap tervezőjének honlapjára mutató, vagy a webmester e-mail címét előhívó hivatkozás.
A láblécnek nem szentelünk különösebb figyelmet, ha csak nem valamilyen konkrét információt keresünk

Egyszerű példa:
#footer { font-size: 80%; color: #999; border-top: 2px dotted #ccc; margin-top: 4em; }

A footer definíció és felhasználás:
A <footer> címke egy dokumentum vagy táblázati oszlopok számára, egy láblécet definiál.
A <footer> elemnek információkat kell tartalmaznia a dokumentumról vagy tábla oszlop elemről.
Egy dokumentumban, több <footer> elem is szerepelhet.
A <footer> elem belsejében lévő információknak, lehetőleg egy cím, azaz, <address> címkén belül kell lenniük.

A <footer> elem jellemzően, a következőket tartalmazza:

• Szerző információt.
• Szerző jogi információt.
• Elérhetőséget.
• Vissza a dokumentum tetejére linket.
• Kapcsolódó dokumentumok, ha vannak.
• Stb.

Példa egy lábléc, azaz, footer szakaszra, a dokumentumban:

  <footer>
    <address>
      <p>Dokumentumot írta: Zöld Elefánt</p>
      <p>Elérhetőség: <a href="mailto:Valaki@example.com">Valaki@example.com</a>.</p>
    <address>
  </footer>
	

Legtöbb böngésző megjeleníti <footer> elemet, a következő alapértelmezett értékkel:
footer { display: block;}

Megjegyzés: Az Internet Explorer 8 és korábbi verziói nem támogatják a lábléc azaz footer címkét.

Vissza a lap elejére

---

 

6. Sormagasság

Sormagasság utasítás = line-height

HTML lapon, minden bekezdés azaz idézetblokk, ezzel kezdődik <p> és ezzel zárul </p>
Css,azaz stíluslapon megadott sortávolság, az összes bekezdésben megírt szövegsorra, egyformán vonatkozik.

A távolságot megadhatjuk: em, px, vagy százalékos értékben is.
Vegyünk egy példát:
A szövegsorok közötti távolságot állítsuk másfélszeresére.
Ha em - ben adjuk meg akkor 1.5em, ha százalékban, akkor 150% - ra kell beállítani az értékeket.

A css - azaz stíluslapon így néz ki: p { line-height: 150%; }

Vissza a lap elejére

---

 

7. Szövegfolyam és megjegyzésjelek

Szövegfolyam:
Böngésző programok a megírt dokumentumunkat, beleértve a meghatározásokat is, balról jobbra és fentről lefelé olvassák.

Megjegyzésjelek:
Ha dokumentumunkban olyan megjegyzéseket szeretnénk elhelyezni, melyek ne jelenjenek meg a weblapot nézők előtt, de nekünk akár a későbbiekben is fontos információval szolgáljon, akkor ezeket megjegyzésjelek közé írjuk.

Minden címkétől és elemtől független, azaz különálló sorként kell elhelyezni.
Megjegyzésjelek közé írt szöveget a böngésző programok nem veszik figyelembe, azaz nem jelenítik meg.

Megjegyzések megírása:Szóközt, azaz szünetet a jelek között nem alkalmazunk

XHTML lapon: <!-- írjuk ide a megjegyzésünket -->

Stíluslapon: /* írjuk ide a megjegyzésünket */

Vissza a lap elejére

---

 

8. Szöveg igazítása

• Szöveg fentre: text-align: top;
• Szöveg középre: text-align: center;
• Szöveg jobbra: text-align: right;
• Szöveg lentre: text-align: bottom;
• Szöveg balra: text-align: left; (Kivételes esetekben használjuk, a böngésző programok automatikusan a balra igazítást alkalmazzák.)
• Szöveg, tetszés szerint: belső ( padding ) margónak adott em vagy px értékkel határozzuk meg.
• Szöveg sorkizárt: text-align: justify;

 

Egysoros szöveg középre igazítása

Függőlegesen középre pozícionálhatjuk az egysoros szöveget tetszőleges magasságú div szakaszban, a jelölőelem line-height px-es értékének megadásával.
Ebben az esetben:
- Az értéket px - ben határozhatjuk meg.
- A div szakasznak nem adhatunk keretet (border), csak háttérszínt vagy háttérképet.
- A line-height: ...px értékének meg kell egyezni a div szakasz magasságának height: ...px értékével.
Vízszintesen középre, a text-align: center utasítással.

Stílus megírása:
#kozep_kozep {height: 90px; background-color: #999; }
#kozep_kozep p { text-align:center; line-height: 90px;}

 

A sorkizárt szövegrészek "justify".

Első példában normál, a másodikban sorkizárt megjelenítés látható.
Mindkét példában, ugyan azon tartalmi szövegrész olvasható.

1. Normál szövegmegjelenés.

2. Sorkizárt szövegmegjelenés.

 

---

Vissza a lap elejére

---

 

9. Szavak formázása, kiemelése ( span )

Formázni, kiemelni kívánt szavak, a dokumentumunk szövegsoraiban helyezkednek el.
Ilyenkor, a span elemmel jelölhetjük ki a formázandó szavakat.

Példa az XHTML - lapon történő megírásra:
<p> A király, <span class="kiemelem"> Alibaba </span> a ma élő leggazdagabb ember. Tehetség terén nagy vetélytársa a <span class="kiemelem"> Negyven rabló </span></p>

Ebben a példában az Alibaba és a Negyven rabló, szavakat formázhatjuk a css fájl segítségével.
Mindkét szóhoz a kiemelem azonosítót rendeltük, ezért mindkét szöveg,egyforma formátumban jelenik meg.
E két szóhoz, háttérszínnek most zöld színt, a betűknek kék színt adunk, de mindenki tetszés szerinti megjelenési formát készíthet.

A stíluslapon a következő meghatározásokat kell megadni:
.kiemelem {font-weight: bold; color: #009; background-color: lime;}

A következő sorban azt láthatjuk, hogyan jelenik meg a monitoron.
A király, Alibaba a ma élő leggazdagabb ember. Tehetség terén nagy vetélytársa a Negyven rabló.

Vissza a lap elejére

---

 

10. Szövegbetűk, egymástól való távolsága.

Ha azt szeretnénk, hogy szavaink betűi egymástól, egy általunk meghatározott távolságra legyenek.
Akkor a letter - spacing, meghatározás után beírt értékkel, növelhetjük a betűk egymástól való távolságát.

Például: { letter-spacing: 1.8em; }

Példa Betűtávolság

---

 

11. Szavak, szövegrészek egymástól való távolsága.

{word-spacing:20px;}

A szavak - szövegrészek, meghatározott távolságra vannak egymástól

---

 

12. Szöveg dekoráció

• {text-decoration:blink;} Explorer nem ismeri, de Mozilla Firefox ismeri 2008
  • Szöveg villogása.
• {text-decoration: overline;}
  • Vonal a szöveg felett.
• {text-decoration: line-through;}
  • Vonal a szöveget áthúzza.
• {text-decoration: underline;}
  • Vonal a szöveg alatt.
• {text-decoration: none;}
  • Szöveg dekoráció nincs. (Legtöbbször, a hivatkozásoknál alkalmazzuk.)
• <del>Szöveg áthúzva.</del> jelölőelem:
  • Szöveg áthúzva.

Vissza a lap elejére

---

 

13. Mennyivel kezdődjön beljebb, vagy kijjebb az első szövegsor.

{text-indent:60px;}

Ezzel, meghatározhatjuk a behúzás mértékét, azaz a szövegrész első sora, mennyivel kezdődjön beljebb, a további szövegsorok elejétől. Ezen bekezdés első soránál is megfigyelhető, hogy az első sor, a megadott px - értéknek megfelelően beljebb kezdődik, mint a bekezdés további sorai.

{text-indent: -60px; padding-left: 60px;}

Ezzel, meghatározhatjuk a kihúzás mértékét, azaz a szövegrész első sora, mennyivel kezdődjön kijjebb, a további szövegsorok elejétől. Ezen bekezdés első soránál is megfigyelhető, hogy az első sor, a megadott px - értéknek megfelelően kijjebb kezdődik, mint a bekezdés további sorai.

---

 

14. További szövegformázó elem. ( pre )

A <pre> blokszíntű elem.
Sorközökhöz és szavak egymástól való távolságának beállításához használjuk.

Normál esetben, amikor a szóközbillentyűvel egynél több szóközt írunk egymás után, vagy a RETURN (ENTER) billentyűt lenyomva hozunk létre új sort, a böngésző ezeket nem veszi figyelembe.
A pre használatakor, a böngésző programok megtartják a dokumentum szerinti szóközöket és sortöréseket.
A pre elemet, gyakran használják versekhez, és egyszerű keretek nélküli táblázatok készítéséhez, néha a hosszú kódok, jobb olvashatósága végett.
Az így kijelölt szövegrész, minden szava, az általunk meghatározott távolságra lesz.

Most nézzünk három példát a pre címkére:
- Az első bemutatja, hogyan kell a valóságban alkalmazni.
- A második példában ugyan azt a szöveget írtam, de több szóközt alkalmaztam.
- A harmadik példában messzebb írtam a szavakat egymástól, nézzük mi is történik.

Első példa: <pre> itt egy előre formázott szöveg </pre>

Második példa: Szavak közötti távolságot megnöveljük, a szóközbillentyűvel.

     itt egy előre  formázott szöveg  

Harmadik példa: Szavak közötti távolságot tovább növeljük, a szóközbillentyűvel.

     itt       egy       előre        formázott        szöveg     

Vissza a lap elejére

---

 

15. Vonalak megjelenítése

Vonalak típusa:
Normál vonal, linear.
Folytonos vonal, solid
Dupla vonal, double
Pontozott vonal, dotted.
Bemélyített vonal, groove
Kidomborodó vonal, ridge
Kiemelkedő vonal, outset
Süllyesztett vonal, inset

Vonalak vastagsága:
- képpontban ( px ) ez a gyakoribb.
- betűméretben ( em )
- százalékban ( % )
- vagy kulcsszavakkal: vastag - thick, közepes - medium, vékony - thin

Vonal, megjelenési helye.
Címsorokhoz, kijelőlt szöveg, és egyéb részekhez.
Az ( Y ) helyett, írd a megfelelő vonal elnevezését.
- Szöveg fölé: border-top: 2px YYYYYY;
- Szöveg jobb oldalára: border-right: 2px YYYYYY;
- Szöveg aljára: border-bottom: 2px YYYYYY;
- Szöveg bal oldalára: border-left: 2px YYYYYY;
- Körbekeretezés: border: 2px YYYYYY;

Példa:
h4 - es címsor aláhúzása, pontozott vonallal.
Ennek helyes magyar megfelelője = keret-alul: 3px vastag, pontozott vonallal, és a pontok színkódja.
Az ( Y ) helyett, írd a neked megfelelő színkódot.

CSS, azaz stíluslapon, így kell meghatározni: h4 { border-bottom: 3px dotted #YYYYYY; }

 

---

Szövegrészek, és területek vízuális elválasztása
( <hr> ) címkékkel.

A weboldal jobb áttekinthetőségét, egyszerű vonal beillesztésével növelhetjük.
Adott szövegrészeket, vagy területeket választhatunk el, a hr címke beillesztésével.

Az elválasztó vonal stílusát is meghatározhatjuk (hosszát, színét, stb.) :
- A kezdő <hr> címkében
- Egyedi "id"azonosítóhoz.
- A "class" osztályazonosítóhoz

Példa: <hr> Ehhez az elemhez, nem kell záró </hr> címkét alkalmazni.

---

Példa: <hr align="center" width="90%">

---

Példa:
XHTML oldali leírás: <hr id="elvalaszto">
CSS, azaz stílusfájl meghatározás: #elvalaszto{width: 70%; border: 2px solid red;}

---

Példa:
XHTML oldali leírás: <hr class="elvalaszto">
CSS, azaz stílusfájl meghatározás: .elvalaszto{width: 80%; border: 2px dashed green;}

---

Példa:
XHTML oldali leírás: <hr class="elvalaszto" >
CSS, azaz stílusfájl meghatározás: .elvalaszto{width: 60%; border: 2px solid blue;}

---

Vissza a lap elejére

 

---

 

16. Gyors betűméret növelés <big>

1em betűmérettel megemeli a kijelölt szövegrészt
Nem kell külön stílus meghatározást írni, mint például a span jelölőelemhez

Példa:
<h4> Normál megjelenésű betűk, <big> kijelölt szöveg, megnövelt betűméretei </big> </h4>

Normál megjelenésű betűk, kijelölt szöveg, megnövelt betűméretei

Vissza a lap elejére

---

17. Visszafelé olvasható szöveg. <bdo dir="rtl">

[Html4] - Még nem teljesen támogatott. (IE. és MA megjeleníti)

Ha a szöveg olvasása jobbról - balra történik (például a héber), használja ezt a címkét: <bdo>, és az attribútum dir="rtl"

Példa:
<h4> <bdo dir="rtl"> Visszafelé olvasható szöveg </bdo> </h4>

Visszafelé olvasható szöveg

Függőlegesen olvasható szöveg: writing-mode:

Megadja, hogy a szöveg sorai vízszintesen vagy függőlegesen legyenek elrendezve.
.writing1 {writing-mode: horizontal-tb; }
.writing2 {writing-mode: vertical-rl;}

Példa:
<p class="writing1">
Szöveg írása vízszintesen.
<span class="writing2">Szöveg<br>írása és<br />olvasása<br> függőlegesen</span>
Szöveg írása vízszintesen.
<span class="writing2"> Szöveg<br>írása és<br />olvasása<br> függőlegesen</span>
</p>

Szöveg írása vízszintesen.Szöveg
írása és
olvasása
függőlegesenSzöveg írása vízszintesen.Szöveg
írása és
olvasása
függőlegesen

Vissza a lap elejére

---

 

18. Szövegrészek idézőjelekkel történő kijelölése. <q>

Leginkább programok leírásánál alkalmazzuk, hogy a böngészők ne vegyék figyelembe, azaz ne utasításként kezeljék.
De alkalmazhatjuk szövegrészekhez is

Példa:
<p>Szövegün egy adott részének <q>idézőjelekkel történő kijelölése</q> </p>

Szövegün egy adott részének idézőjelekkel történő kijelölése

Megjegyzés a kezdő idézőjelre:
Explorer lentre helyezi.
Mozilla fentre helyezi

Vissza a lap elejére

---

 

19. Betűk stílusa és változata.

Betűk stílusa:
Amelyik szinpatikus, írjuk be a CSS-lapra azaz stíluslapra.

Dőlt ( italic ) betűkhöz: {font-style: italic;}
Normal ( normal ) betűkhöz: {font-style : normal;}

Betű-változat:
Félkövér ( bold ) betűkhöz: {font-weight: bold;}
Normal ( normal vastagságú ) betűkhöz: {font-weight: normal;}

kis-kapitális: {font-variant: small-caps; } (Minden betűt nagybetűvel ír, és a kezdőt enyhén kiemeli )

A stíluslapon ezzel a megoldással, ha úgy gondoljuk, a kijelölt szövegrészhez, pluszként meghatunk színt, és szegélyt, azaz keretet is, vagy aláhúzást.

Vissza a lap elejére

---

 

Szöveg betűinek transzformálása

{text-transform:uppercase;}

Minden betűt, nagybetűre változtat.

{font-variant: small-caps; }

Minden betűt, nagybetűre változtat, de a kezdőt kiemeli.

{text-transform:lowercase;}

Minden betűt, kisbetűre változtat.

{text-transform:capitalize;}

Minden kezdő betűt, nagybetűre változtat.

---

 

Térhatás szövegnél.

text-sadow: Egy vagy több árnyékot ad hozzá, a szöveghez.
box-shadow: Egy vagy több árnyékot ad hozzá, egy területi elemhez. (div; img; table;)

Legegyszerűbb használata, vízszintes és függőleges árnyék nagyságának, megadása.
Megjegyzés: 20px betűméret alatt, zavaró a szöveg olvashatósága.

Vízszintes és függőleges árnyék:
.normal-shadow{text-shadow: 2px 2px;}
.piros-shadow{text-shadow: 2px 2px red;}

Normál shadow, betűméret 20px.

Piros shadow, betűméret 20px.

---

Árnyék homályosítással:
.arnyek-piros{text-shadow: 2px 2px 5px red;}
.feherbetu-fekete-arnyekkal{color: white; text-shadow: 2px 2px 4px black;}

Normál betű, piros árnyék, betűméret 20px.

Fehér betű, fekete árnyékkal, betűméret 20px.

---

Betűk, kontúrvonallal:
.sargabetu-feketecontur{color: yellow; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;}

Sárga betűk, fekete kontúrvonallal, betűméret 20px.

Térhatásokról bővebben, kattints ide!

---

 

Szöveg mozgatása

<marquee>
A mozgatandó szöveget vagy képet,
a kezdő és záró marque jelölőelem közé helyezzük el!
</marquee>

<marquee> A mozgatandó szöveget vagy képet, a kezdő és záró marque jelölőelem közé helyezzük el! Szöveg mozgatása. Nem csak szöveget, képet is beilleszthetünk! </marquee>

---

 

 

Szöveg forgatása

<style>
.trans-rotate{transform: rotate(45deg); transform-origin: 20% 40%;}
.divtrans-rotate{width:70px; margin-left: 150px; padding:5px; border:2px solid red; transform: rotate(45deg); transform-origin: 30px 30px;}
</style>

rotate(XXdeg) = Forgatási fok.(0-tól 360-ig)
transform-origin: 20% 40%; = Szöveg pozíciója. ( Megadható: %-al, px-el. A <br> elemmel, lejebb mozgatható.)

<p class="trans-rotate">Szöveg <br> forgatása.</p>

---

Szöveg
forgatása.

1.Példa: Div területének forgatása, tartalmával együtt:
<div class="divtrans-rotate"> <p>Div<br>területével.<br>Szöveg <br>forgatása.</p> </div>

---

2.Példa: Div területének forgatása, tartalmával együtt:

<style>
#rotate_Div {
  width: 200px;
  height: 80px;
  margin-left:20px;
  padding:5px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: rotate(20deg);  /* IE 9 */
  transform: rotate(20deg);      /* Normál szintaxis */
}
</style>

<br /><br />
<div id="rotate_Div">
Ez a div elem, az óramutató járásával megegyezően, 20 fokkal elforgatva.
</div>
<br /><br />

---

Forgatás jobbra. Katt ide!Forgatás balra. Katt ide!

---

Vissza a lap elejére

 

Felső és alsó index

Felső index jelölése: ^..
Példa:
Négyzetcentiméter = cm² = cm²
Köbméter = m³ = m³
Kettő a négyzeten = 2² = 2²

---

Alső index jelölése: _..
Példa:
viz = H₂O = H₂O
hidrogén-klorid = H₂ + Cl₂ = H₂ + Cl₂

---

Vissza a lap elejére

 

Négyzetgyök

Négyzetgyök jelölésének kódja: &#8730;
Példa egy számhoz:
Négyzetgyök 9 = &#8730;9 = √9

Több számhoz, nem egyértelmű felhasználó számára, a képlet:
Négyzetgyök 1+2*3 = &#8730;1+2*3 = √1+2*3

Képletünk egyértelmű legyen, alkalmazni kell a {text-decoration: overline;} meghatározást is.
Példa:
<style> .fvonal{text-decoration: overline;} </style>
Négyzetgyök 1+2*3 = &#8730;<span class="fvonal">1+2*3</span> = √1+2*3

---

Vissza a lap elejére

 

Egyebek

szöveg normal, stílus meghatározása: {font-weight: normal;}

szöveg bold, stílus meghatározása: {font-weight: bold;}

Továbbiakat nem alkalmazzuk, csak ismertetésre kerülnek

szöveg bolder, stílus meghatározása: {font-weight: bolder;}

szöveg lighter, stílus meghatározása: {font-weight: lighter;}

szöveg 100, stílus meghatározása: {font-weight: 100;}

szöveg 200, stílus meghatározása: {font-weight: 200;}

szöveg 300, stílus meghatározása: {font-weight: 300;}

szöveg 400, stílus meghatározása: {font-weight: 400;}

szöveg 500, stílus meghatározása: {font-weight: 500;}

szöveg 600, stílus meghatározása: {font-weight: 600;}

szöveg 700, stílus meghatározása: {font-weight: 700;}

szöveg 800, stílus meghatározása: {font-weight: 800;}

szöveg 900, stílus meghatározása: {font-weight: 900;}

---

Megjegyzés:
A következő részek megjelenésében, Windows XP; 8.1; és 10-nél, valamint más-más böngészőnél, eltérések vannak.

Teszt szöveg: SzÖVeg BetŰinek formÁzáSa, variálása.

{font-variant-caps: normal;} = SzÖVeg BetŰinek formÁzáSa, variálása.

{font-variant-caps: small-caps;} = SzÖVeg BetŰinek formÁzáSa, variálása.

{font-variant-caps: all-small-caps;} = SzÖVeg BetŰinek formÁzáSa, variálása.

{font-variant-caps: petite-caps;} = SzÖVeg BetŰinek formÁzáSa, variálása.

{font-variant-caps: all-petite-caps;} = SzÖVeg BetŰinek formÁzáSa, variálása.

{font-variant-caps: unicase;} = SzÖVeg BetŰinek formÁzáSa, variálása.

{font-variant-caps: titling-caps;} = SzÖVeg BetŰinek formÁzáSa, variálása.