Hogyan néz ki a dőlt betű? Alapvető HTML-szövegformázó címkék – félkövér és dőlt betűs szöveg kiemelése; méret, szín és betűtípus opciók; bekezdés- és címcímkék

A dőlt betűtípus az egyik legnépszerűbb módja egy szövegrészlet kiemelésének és bizonyos jelentőséget adásának. Ideális idézetekhez, lábjegyzetekhez, címekhez és tulajdonnevekhez. A HTML-ben két speciális címke található a dőlt betűs megjelenítéshez. A CSS-ben a dőlt betűt a font-style tulajdonság szabályozza.

Dőlt vagy dőlt betűtípus?

Ugyanazon betűtípus dőlt betűs megjelenítése eltérő lehet.

A képen három szövegblokk látható ugyanazzal a Playfair Display betűtípussal. Az első normál római stílusban, míg a második és a harmadik dőlt betűs. Ugyanabban a Google Chrome böngészőben vannak megnyitva, de teljesen másképp néznek ki.

A helyzet az, hogy néhány betűtípus saját dőlt karakterkészlettel rendelkezik. Ha a böngésző nem fér hozzá ehhez a készlethez, de olyan szöveggel találkozik, amelyet dőlt betűvel kell megjeleníteni, akkor megpróbálja önállóan ferdíteni.

A második blokkban - éppen egy ilyen böngészővel feldolgozott változat, a harmadikban pedig - a Playfair Display betűtípus eredeti, dőlt változata, amely egyedi stílusú, inkább kézzel írt. A böngésző ezzel szemben egyszerűen megdönti a szöveg egyes karaktereit egy bizonyos szögben, dőlt betűt imitálva.

Amikor kitalálja, hogyan lehet dőlt betűt írni CSS-ben vagy HTML-ben, ne feledje, hogy bizonyos betűtípusok esetén meg kell győződnie arról, hogy a böngésző hozzáfér-e a dőlt betűkészletekhez. Egyes esetekben a böngésző döntési algoritmusainak eredménye nem lehet kielégítő.

HTML kurzív

A HTML-ben két speciális címke található a dőlt szöveghez: i (a dőlt szóból) és em. A leírók bármelyikébe zárt szövegrészlet stílusa ugyanaz lesz.

A különbség a logikai elosztásban rejlik. Az em címke a töredék különleges jelentőségét jelzi. Ez fontos keresőrobotok és képernyőolvasók számára, amelyek intonáció segítségével kiemelik a megadott szöveget.

font-stílusú tulajdonság

A CSS-ben a dőlt betűt a font-style utasítás szabályozza. Három alapérték egyikét veheti fel:

  • normál - normál betűtípus;
  • dőlt - dőlt stílus;
  • ferde - ferde stílus.

Jelenleg a legtöbb modern böngésző ugyanúgy kezeli a ferde és a dőlt értékeket, de eredetileg azt feltételezték, hogy az előbbi speciális böngészőalgoritmusok eredménye, amelyek minden karaktert jobbra döntenek.

Ha a keresett betűtípust nem találja a böngésző, akkor a dőlt betű pontosan ugyanúgy fog kinézni, mint a ferde betűtípus.

Az em címkével ellentétben nem tulajdonít különösebb jelentőséget a kiemelt töredéknek, inkább az i leírónak felel meg.

Példák

Az idézetek gyakran dőlt betűvel vannak kiemelve. Próbáljuk meg szépíteni.

Idézet ( betűstílus: dőlt; bal szegély: 5 képpont, tömör lila; kitöltés balra: 20 képpont; )

A jobb oldali dekoratív szegélyen és a kitöltésen kívül az idézőjelben van egy dőlt betűs betűstílus szabály.

Dőlt CSS-t állít be.

Most megvizsgáljuk a fő címkéket. Kezdjük azzal, hogy milyen címkék szükségesek az oldalon, kialakítva annak szerkezetét.

Blokk . A legegyszerűbb oldal felépítése

A webhely oldala egy egyszerű szöveges fájl a kiterjesztéssel .html. Ebben a fájlban a HTML-oldal szövege a címkékkel együtt tárolva van. Ennek a fájlnak a következő címkékkel kell rendelkeznie: tag , aminek a teljes webhely szövegét kell tartalmaznia (mindent, ami ezen a címkén kívül van, a böngésző figyelmen kívül hagyja), és benne kell lennie még két tagnek: tag oldalszolgáltatás tartalmához és címkéjéhez - a fő szöveghez, amely a böngésző képernyőjén látható.

Szolgáltatási tartalomban, amely a címke belsejében található , sokféle dolog jön be, de egyelőre csak kettőre van szükségünk. Ez egy címke , amely megadja a böngésző lapon látható oldal címét és a címkét <meta>, amely megadja az oldal kódolását (az attribútumban van beállítva <b>karakterkészlet</b>és általában számít <b>utf-8</b>, erről bővebben a videóban, ami pár bekezdéssel lejjebb lesz).</p> <p>A címke előtt is <html>konstrukciót általában írják <b>doctype</b>, amely megadja a HTML nyelv verzióját, amelyen a webhely készült. A nyelv jelenlegi verziója az ötös számú, és a hozzá tartozó dokumentumtípusnak így kell kinéznie:<!DOCTYPE html> .</p> <p>Tehát nézzük meg az oldal alapvető szerkezetét (a példa böngészőben való futtatásához másolja ki egy szöveges fájlba a kiterjesztéssel <b>.html</b>és nyissa meg a böngészőben, ha problémái vannak ezzel - nézze meg az alábbi videót egy példa):</p> <p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ez a cím címe Ez az oldal fő tartalma.

Hogy néz ki ez a példa a böngészőben, lásd ezt a linket.

Azt hiszem, miután elolvastad az oldal alapvető felépítését, még mindig van némi zavarod a gyakorlatban. Ezért készítettem egy speciális videót, amiben megmutatom, hogyan készítsd el az első HTML oldaladat és futtasd le böngészőben (ebben az oldal címéről, kódolásokról, kódtervezésről is szó lesz). Nézze meg, és csak ezután folytassa a további olvasást:

Nos, most, miután megtanultuk a legegyszerűbb oldalak létrehozását, áttérünk a címkén belül használható hasznos címkék megtanulására. . Ezek a bekezdések, címsorok, listák, hivatkozások és egyéb hasznos dolgok címkéi lesznek. Tehát kezdjük.

Blokk . bekezdések

Az oldal egyik fő eleme az bekezdések. Összehasonlíthatóak egy könyv bekezdéseivel - minden bekezdés új sorban kezdődik, és van egy úgynevezett piros vonala (ekkor a bekezdés szövegének első sora kissé jobbra behúzódik). Alapértelmezés szerint nincs piros vonal, de könnyű megtenni (erről később).

A bekezdés egy címke használatával jön létre

És így:

Ez a cím címe

Ez egy bekezdés.

Ez egy másik bekezdés.

És még egy bekezdés.



Ez egy bekezdés.

Ez egy másik bekezdés.

És még egy bekezdés.

Blokk . A h1, h2, h3, h4, h5, h6 címsorok

A bekezdések mellett fontosak az oldalon főcímek. Összehasonlíthatóak egy könyv címsoraival is – minden fejezetnek megvan a maga címe (a fejezet címe), és bekezdésekre van osztva, amelyeknek szintén megvannak a saját címsorai. Nos, az oldal fő szövege bekezdésekben van.

Hírek létrehozása folyamatban van címkék segítségével

,

,

,

,

,
. Változó fontosságúak. A címben h1 kellett volna a teljes HTML oldal címe, V h2- Név blokkok oldalak, be h3- alblokkok neve és így tovább.

Alapértelmezés szerint minden címsor félkövér, és eltérő méretű (ez CSS-en keresztül módosítható, de erről később). Lásd a példát:

Ez a cím címe

Címsor h1

címsor h2

címsor h3

címsor h4

címsor h5
címsor h6

Ez az első bekezdés.

Ez a második bekezdés.

Ez a harmadik bekezdés.



Így fog kinézni a kód a böngészőben:

Címsor h1

címsor h2

címsor h3

címsor h4

címsor h5
címsor h6

Ez az első bekezdés.

Ez a második bekezdés.

Ez a harmadik bekezdés.

Blokk . Zsíros

Már tudja, mik az alapértelmezett fejlécek zsíros. Az egyszerű szöveget azonban félkövérre is szedheti – csak helyezze el egy címkébe . Lásd a példát:

Ez a cím címe

Ez sima szöveg és ez zsíros szöveg.



Így fog kinézni a kód a böngészőben:

Ez sima szöveg és ez zsíros szöveg.

más címkén belül kell használni, például egy bekezdésben. Ebben az esetben a bekezdések hozzák létre az oldal általános szerkezetét (bekezdések és címsorok), valamint a címkét b Az egyes szövegrészeket félkövérré teszi.

Blokk . Dőlt betűs

A zsíros mellett azt is megteheti dőlt betűvel a címke segítségével :

Ez a cím címe

Ez sima szöveg és ez dőlt szöveg.



Így fog kinézni a kód a böngészőben:

Blokk . Listák

A bekezdések és címsorok mellett van még egy fontos eleme az oldalnak - ez listákon. Az ilyen elemek valószínűleg minden internetfelhasználó számára ismerősek. Valaminek (egy listának) pontról pontra történő felsorolását képviselik. Minden listaelem mellett általában egy kitöltött kör található (úgy hívják jelző lista).

A listák címkével jönnek létre