Hogyan lehet szöveget beszúrni HTML oldal? Erre a célra speciális HTML-címkék vannak a szöveghez.

A HTML-ben hat szintű címsor létezik. Hozzáadásuk címkék segítségével történik

-

. Ahol

Ez az első szintű címsor, ez a legnagyobb.

Példa fejlécek létrehozására:

A címsorok semmilyen módon nem függenek egymástól. Bármilyen szintű címsort hozzáadhat, ahol csak szüksége van rá.

A kezdők néha nem tudják kitalálni azt a kérdést, hogy hány első szintű címsor lehet egy oldalon. Az interneten többször találkoztam hiányos és megbízhatatlan információkkal ebben a témában. Ezért úgy döntöttem, hogy részletesen megvizsgálom ezt a kérdést.

A címkék száma oldalanként

nincs hatása. Bármennyit hozzáadhat belőlük. És itt kereső motorok negatívan viszonyulnak ahhoz, hogy egy oldalon több első szintű címsor található. Ezért, ha webhelyét reklámozni kívánja a keresőmotorokban, akkor minden oldalon csak egy első szintű címsor legyen. Következtetés: jobb, ha azonnal hozzászokunk ahhoz, hogy ne helyezzünk el egynél több címkét

az oldalra. Végül is a HTML-nek egész szintjei vannak. Bármilyen oldalelrendezés esetén ez elég a címke kiemeléséhez

csak egy fejléchez.

Bekezdés

Címke

Létrehoz egy bekezdést a szövegből. Felül és alul párnázott, hogy elválasztja az egyik bekezdést a másiktól. Ezen kívül lehetőség van az első sor behúzásának beállítására. Mindezt CSS segítségével vezéreljük.

Címke

Címke Ez egy sorcímke szöveg beszúrására. Általában akkor használják, ha a szöveg egy részét bizonyos módon kell kiemelni.

Például jelöljük ki a szöveg egy részét pirossal.

A szöveg szükséges része a címkén belül található . A címke piros színűvé tételéhez a stílus attribútuma van beállítva, amely meghatározza a stílusokat. Mivel a stílusokkal való munkavégzésről a CSS oktatóanyagban van szó, itt nem magyarázom el, hogyan működik ez az attribútum. Csak adja hozzá a címkéhez a példában leírtak szerint.

Címke

Címke

Olyan speciális szövegtípusokhoz használatos, amelyeknél fontos a formázás megőrzése.  A címkén belüli szöveg pontosan úgy jelenik meg az oldalon, ahogy az oldalkódban.  Megőrzi az összes szóközt és sortörést.  A szöveg egyszóközű betűtípussal jelenik meg, de ez stílusok segítségével módosítható.

Szöveg kiválasztása
A HTML-ben vannak címkék a szöveg kiemelésére.  Címkék És teremt félkövér betűtípus.  Bár ezek a címkék különböznek egymástól, általában ugyanúgy néznek ki az oldalon.  Címkék És emelje ki a szöveget dőlt betűvel.  Van egy címke , ami aláhúzottá teszi a szöveget, de használata nem javasolt.

Példa a szöveg kiválasztására:
21
22
23
24

 Félkövér betűtípus
Félkövér betűtípus
Dőlt betűtípus
Dőlt betűtípus

A szöveg stílusok segítségével kiemelhető.  Mindenki maga dönti el, hogyan emeli ki a szöveget címkék vagy stílusok használatával.
Egyéb címkék
Megnéztük a speciális HTML-címkéket a szöveghez.  De a szöveg sok más címkét is tartalmazhat, amelyek tartalmat adnak az oldalhoz.  Még a címkéken kívülre is beilleszthet szöveget, és az továbbra is megjelenik a képernyőn.  De a gyakorlatban ezt senki nem csinálja, mert a szöveget a címkéken kívül nem lehet manipulálni.  Ezért természetesen minden szövegnek a címkéken belül kell lennie.  És ha megtanulja a CSS-t, akkor képes lesz meghatározni kinézet szöveg.
A CSS ad bőséges lehetőséget a szövegstílussal való működésről.  Befolyásolhatja a szöveg betűtípusát, színét, méretét és egyéb tulajdonságait.
Mivel ez az oldal kezdőknek szól, először idézzük fel az alapvető CSS szintaxist és terminológiát.
Minden egyes CSS szabály választóból és definícióból áll.  A választó általában az a címke, amelyre a stílusunkat alkalmazzuk, a meghatározás pedig maga a stílus.  A definíció egy tulajdonságból és annak értékéből áll.  Például: tulajdonság - szín, érték - piros.
A CSS szintaxisa a következő:
választó (tulajdonság: érték)
Példa CSS-szabályra:
p( szín: kék)
 
Szöveg megjelenítése kék színben.  Egy szelektornak több párja is lehet (tulajdonság: érték).
p( szín: kék;  betűméret: 10 pont)
Ebben a példában a szabály címkére van beállítva 
Szöveg megjelenítése kékkel és 10 ponttal.  Vagyis itt két pár (tulajdonság: érték) van alkalmazva egy választóra, jelen esetben a bekezdéscímkére 
A jövőben, amikor a tulajdonság és az érték szavak jelennek meg a szövegben, a CSS-szabályban a szelektor definícióját kell érteni.
 
Betűtípus tulajdonságai
Ha nem adja meg ezt a tulajdonságot a CSS-ben, a böngésző az alapértelmezett betűtípussal jeleníti meg a szöveget.  Ez általában a Times New Roman.
A font-family értékben szereplő betűtípusok listája egy vagy több nevet tartalmazhat, vesszővel elválasztva.  Ha a betűtípus neve szóközt tartalmaz, például Trebuchet MS, akkor azt idézőjelek közé kell tenni, egyszeres vagy dupla.
A böngésző egyenként ellenőrzi, hogy vannak-e betűtípusok a felhasználó számítógépén található listából.  Ha a listában az első betűtípus szerepel, akkor azt használja, ellenkező esetben a böngésző ellenőrzi a lista második betűtípusának meglétét.  Ha egyik sem szerepel, a rendszer az alapértelmezett betűtípust használja.  A lista végén általában egy kulcsszót írnak, amely leírja a kívánt betűtípust - serif, sans-serif, fantasy, cursive vagy monospace.
Univerzális betűtípuscsaládok:
serif - antik betűtípusok (serif betűtípusok), például Times;
sans-serif - sans-serif betűtípusok (serif nélküli vagy sans serif betűtípusok), tipikus képviselője az Arial;
monospace - monospace betűtípusok, az ilyen család minden karakterének szélessége azonos (Courier font).
fantázia - dekoratív betűtípusok családja;
kurzív – dőlt betűcsalád;
Példa a következő használatára:

 


 
 


 
Címsor h1
 
Címsor h2


A következő tulajdonság:
Példakód, ebben a példában stílusokat ágyazunk be a címkébe a segítségével stílus attribútum.

 


 


Példa egy normál betűtípusra.
Dőlt példa.
Példa dőlt betűtípusra.


Látható, hogy a dőlt betű megjelenésében nem különbözik a dőlt betűtípustól.
A következő tulajdonság:
A nagybetű az olyan szöveg neve a tipográfiában, amelyben a kisbetűk kicsinyített nagybetűnek tűnnek.  Különbséget kell tenni a kis nagybetűk és az egyszerűen kicsinyített nagybetűk között.  A nagybetűk valamivel magasabbak, mint a kisbetűk, és általában kissé kiterjesztett arányokkal rendelkeznek.

 


 


 
Egyszerű szöveg. Szöveg kisbetűvel.
 
Ismét rendes szöveg.


A következő tulajdonság:
A font-weight tulajdonság beállítja a betűtípus súlyát.  Ehhez a következő kulcsszavakat használjuk a jelentésben: félkövér - félkövér stílus, normál - normál stílus.  Az érték 100-tól 900-ig terjedő tartományban állítható be 100-as lépésekben. A böngésző által megjeleníthető extra kis betűsúly 100, az extra félkövér betűméret pedig 900. A normál betűsúly (ami az alapértelmezett) 400, a normál félkövér szöveg félkövér , - értéke 700.
A böngészők általában nem tudják pontosan megjeleníteni a kívánt betűméretet, ezért váltanak félkövér, normál és könnyebb között.  A gyakorlatban a legtöbb böngésző stílusa általában csak két lehetőségre korlátozódik: normál stílusra és félkövér stílusra.
A világosabb és vastagabb értékek megváltoztatják a betű súlyát a szülő súlyához képest, lefelé, illetve lefelé.

 


 


 
Egyszerű szöveg. félkövér szöveg.
 
Ismét rendes szöveg.


A következő tulajdonság:
A font-size tulajdonság az elem betűméretét határozza meg.  A betűméret többféleképpen állítható be.
Az abszolút betűméret a következő kulcsszavakkal állítható be: xx-small (rendkívül kicsi), kicsi (kicsi), közepes (közepes (alapértelmezett érték), nagy (nagy), x-large (nagyon nagy), xx-large (extrémen) nagy).  Az abszolút betűméretek a böngésző és az operációs rendszer beállításaitól függenek, így nem teljesen abszolútak.
A szöveg szülőhöz viszonyított méretének megváltoztatásához egy másik konstanskészletet használnak (nagyobb - növeli a méretet a szülőhöz képest, kisebb - csökkenti a méretet).

 


 


 
Egyszerű szöveg.
 
Szöveg xx-small. Szöveg nagyobb.
 
Szöveg kicsi.
 
Szöveg médium.
 
Szöveg nagy.
 
Szöveg x-nagy.
 
Szöveg xx-nagy.
 
Ismét rendes szöveg.
 
Szöveg 150%.
 
Szöveg 15px. Szöveg nagyobb.


 
Szöveg tulajdonságai
A betűtípusokkal való munka mellett a CSS számos eszközt biztosít magának a szövegnek a tulajdonságaival való munkavégzéshez.
Nézzük az első tulajdonságot:
A sorköz beállításakor a jelentés a betűtípus alapsorától indul.  Alapértelmezés szerint a szövegsorok közötti távolság a betűtípus típusától és méretétől függ, és a böngészők automatikusan meghatározzák.  A negatív kezdőértékek nem megengedettek.

 


 


 
Egyszerű szöveg.  Első sor. 
Második sor. 
Harmadik sor.
 
Módosított szöveg.  Első sor. 
Második sor. 
Harmadik sor.


Százalék írásakor a betűmagasság 100%.
A következő tulajdonság:
A definíciót használva ( szöveg-dekoráció: nincs) A hivatkozásokról eltávolíthatja az aláhúzást, amely alapértelmezés szerint telepítve van a böngészőkben.

 


 
 


 
Keresőmotor Google.



A következő tulajdonság:
A text-transform tulajdonság szabályozza a betűk megjelenítését, a kiválasztott értéktől függően nagy- vagy kisbetűket állíthat be.
text-transform tulajdonság 
Ingatlan
Jelentése
 
Leírás
 
Példa
szöveg-átalakítás
 
egyik sem 
nagybetűvel írjuk 
nagybetűs 
kisbetűvel
 
Távolítsa el az összes effektust 
Kezdje a nagybetűkkel 
TELJES TŐKE 
csupa kisbetű
 
szöveg-transzformáció: nagybetűk
Használati példa:

 


 


 
Nincs szöveg.
 
A szöveg nagybetűvel írható.
 
Nagybetűs szöveg.
 
Szöveg kisbetűvel.


Hasonlítsa össze a html kódban található szöveget a böngészőablak szövegével.
A következő tulajdonság:
A text-align tulajdonság a szöveg vízszintes igazítására szolgál abban a böngészőablakban vagy tárolóban, amelyben a szövegblokk található.
text-align tulajdonság 
Ingatlan
Jelentése
 
Leírás
 
Példa
szöveg igazítás
 
bal 
jobb 
központ 
igazolni
 
Szöveg igazítása
 
szöveg igazítása: jobbra
Az értékek részletes leírása:
középre – a szöveg középre igazodik.
 
indokolja - szélességi igazítás, valójában egyszerre jobbra és balra igazodik; a szöveg szavai között üres terek keletkeznek, amelyeket a böngésző szóközzel tölt ki.
 
balra - igazítás a bal szélhez.  Ez az alapértelmezett érték.
 
jobb - jobb igazítás.
Egy példa ennek a tulajdonságnak a használatára kombinálódik a következő tulajdonság példájával.
A következő tulajdonság:
A text-indent tulajdonság egy szövegblokk első sorának behúzási értékének létrehozására szolgál (például egy bekezdéshez 
Ez a tulajdonság negatív értéket tesz lehetővé, ebben az esetben az első sor túlnyúlása jön létre.
szöveg-behúzás tulajdonság 
Ingatlan
Jelentése
 
Leírás
 
Példa
szöveg-behúzás
 
jelentése 
%

 
Első sor behúzás
 
szöveg-behúzás: 15px; 
szöveg-behúzás: 10%
 


 
 


Munka a szövegigazítás és a szöveg behúzás tulajdonságaival.  A kód működésének jobb megértéséhez nyissa meg az oldalt egy új ablakban, és csökkentse a méretét.


A szöveg képernyőn való megjelenése csak a címkéktől függ, szóközöktől vagy sortörésektől nem.
A HTML-dokumentumok minden tervezési eleme két típusra oszlik: inline és block.
A soron belüli elemek lehetnek egy sor részei, de a blokkelemek mindig külön helyet foglalnak el a weboldalon, és mindig a következővel kezdődnek: új sor.  A blokkelemek természetesen tartalmazhatnak más blokkelemeket és inline elemeket is.  Nyilvánvaló okokból a soron belüli elemek nem tartalmazhatnak blokkelemeket.
A weboldal elemeinek blokkokba való egyesítése lehetővé teszi, hogy egyetlen tervet alkalmazzon rájuk, és elrendezést hajtson végre.  Elegendő lesz megváltoztatni a blokk helyét egyetlen egyesítő címke megváltoztatásával.  Ez természetesen kényelmesebb, mint a weboldal egyes elemeinek helyének egyenkénti megváltoztatása.
A szövegközi elemeket címkék veszik körül ...
.
A blokk típusú elemek keretezéséhez egy pár 
...

.

Böngészők keret div blokkjai sortöréssel.
Blokk 
nem helyezhető el egy blokkon belül .

Példa
 


 
 


Első szövegblokk
Második szövegblokk.


Alapvető szövegformázó címkék
Példa
 


 
 


Cím 
első szint
Második szintű címsor
Harmadik szintű címsor
Negyedik szintű címsor
5. szintű címsor
Hatos szintű címsor

Bekezdéspróba


Teremt szöveges fájl, mint a példában.  Mentse el kiterjesztéssel html.
A mappában a nevére duplán kattintva elindítja az alapértelmezett böngészőt, és a HTML dokumentum már betöltődik is.
Kiemelés a szövegben
Példa
 A szöveg félkövér lehet. A szöveg lehet dőlt betűs.

A szöveg aláhúzható. A szöveg áthúzható.
A szöveg lehet felső index.  A szöveg lehet alsó index.
Idézetek, változók, címek
...


 
A dokumentum szerzőjének megadására szolgál Elérhetőség hogy bárki felvehesse a kapcsolatot az anyag szerzőjével.  Általában dőlt betűvel jelenik meg.  Blokk elem.


 
Idézetek kiemelése.  Blokk elem.
...

 
Idézetek kiemelése.  Általában dőlt betűvel jelenik meg.
...

 
Szöveg megjelenítése rögzített szélességű betűtípussal.  Általában egy kis programkódrészlet megjelenítésére szolgál (nagy listák esetén a címke 
).

...

 
Fontos szövegrészletek kiemelése.  Általában dőlt betűvel jelenik meg.
...

 

...

 
Szöveg megjelenítése rögzített szélességű betűtípussal.
...

 
Fontos szövegrészletek erőteljes kiemelése.  Általában félkövér betűtípussal jelenik meg.
...

 
Változónevek jelölésére szolgál.  Általában dőlt betűvel jelenik meg.

HTML-címkék, amelyek meghatározzák a szöveg igazítását és behúzását
 
Tipográfiában használt sorkizárt szöveg
 
Az alábbi példa bemutatja, hogyan kell igazítani szöveg szélességben oldalak:
 
align="left"
 
align="jobbra"


 
A szolgáltatási szektorban és az információterjesztésben foglalkoztatottak száma napról napra nő.  Ha az elmúlt évszázadok jelképe a gazdaság és a gyár volt, akkor a jelenlegi 21. század szimbóluma az információáramláshoz hozzáférő számítógépekkel felszerelt iroda.

align="justify"
 
align="center"
A szolgáltatási szektorban és az információterjesztésben foglalkoztatottak száma napról napra nő.  Ha az elmúlt évszázadok jelképe a gazdaság és a gyár volt, akkor a jelenlegi 21. század szimbóluma az információáramláshoz hozzáférő számítógépekkel felszerelt iroda.

 
A szolgáltatási szektorban és az információterjesztésben foglalkoztatottak száma napról napra nő.  Ha az elmúlt évszázadok jelképe a gazdaság és a gyár volt, akkor a jelenlegi 21. század szimbóluma az információáramláshoz hozzáférő számítógépekkel felszerelt iroda.

Az indokolási érték biztosítja az egységességet igazítsa a szöveget jobbra és balra, vagyis szélességében.  Ezt a módszert széles körben használják a nyomtatásban.
 
Szöveg igazítása a HTML-ben középre és szélességre
 
Igazítsa a szöveget HTML-ben középre, a szöveget jobbra:
 
Eredmény:
 
Tulajdonságok és értékek
 
align="left" - meghatározza bal oldali szövegigazítás(alapértelmezett).
 
align="center" - középre igazítja a szöveget.
 
align="right" - jobbra igazítja a szöveget.
Igazítás |  HTML szöveg behúzás
 
HTML szövegés annak behúzása az oldal bal oldalán
 
Mi fogunk termelni szöveg behúzása bal oldalon kétféleképpen:
 
Eredmény:
 

 
Megtekintés új ablakban.
A html-ben a betűméret fontos szerepet játszik.  Lehetővé teszi, hogy felhívja a felhasználó figyelmét fontos információ, közzétéve a webhely oldalán.  Bár nem csak a betűk mérete a fontos, hanem a színük, vastagságuk, sőt családjuk is.
 
Címkék és attribútumok html betűtípusokkal végzett munka során
A hipertext nyelv számos eszközzel rendelkezik a betűtípusokkal való munkavégzéshez.  Hiszen a szöveg formázása a html fő feladata.
A teremtés oka HTML nyelv Probléma lépett fel a szövegformázási szabályokat megjelenítő böngészőkkel.

Nézzük meg azokat a címkéket, amelyek a HTML-ben a betűtípusokkal és azok attribútumaival dolgoznak.  A fő a címke .  Attribútumainak értékeivel beállíthatja a betűtípus számos jellemzőjét:

color – beállítja a szöveg színét;
méret – betűméret hagyományos mértékegységekben.
1 és 7 közötti pozitív attribútumértékek támogatottak.
arc – a címkén belüli betűtípuscsalád beállítására szolgál .  Számos érték támogatott, vesszővel elválasztva.


Csak a részek között található szöveg formázódik címkepár betűtípus. A szöveg többi része a szabványos alapértelmezett betűtípussal jelenik meg.

A html-ben is számos párosított címke található, amelyek csak egy formázási szabályt határoznak meg.  Ezek tartalmazzák:
— félkövér betűtípust állít be a html-ben.  Címke működésében hasonló az előzőhöz;

— a méret nagyobb, mint az alapértelmezett;

— kisebb betűméret;

— dőlt szöveg (dőlt betű).  Hasonló címke ;

— aláhúzott szöveg;
- kihúzott;
— csak kisbetűvel jelenítse meg a szöveget;
- nagybetűvel.
Egyszerű szöveg

Miniatűr
Miniatűr
Több, mint máskor
A szokásosnál kevesebb
Dőlt betűs
Dőlt betűs
Aláhúzással
Kihúzott

Stílus attribútumok képességei
A leírt címkéken kívül még számos más mód van a html betűtípus megváltoztatására.  Az egyik az általános stílus attribútum használata.  Tulajdonságai értékeinek felhasználásával beállíthatja a betűtípusok megjelenítési stílusát:
1) font-family – a tulajdonság beállítja a betűtípuscsaládot.  Több érték felsorolása is lehetséges. 
A html betűtípusának módosítása erre következő érték megtörténik, ha az előző család nem kerül be operációs rendszer felhasználó.
Írás szintaxisa:
font-family: font-name [, font-name[, ...]]
2) font-size – a méret 1 és 7 között van beállítva. Ez az egyik fő módja a HTML betűtípusának növelésének. 
Írás szintaxisa:
font-size: abszolút méret |  relatív méret |  jelentése |  kamat |  örököl
A betűméretet is beállíthatja:
pixelben;
Abszolút értelemben ( xx-kicsi, x-kicsi, kicsi, közepes, nagy);
százalékban;
Pontokban (pt).
Betűméret:7
Betűméret: 24 képpont
Betűméret: x-nagy
Betűméret: 200%
Betűméret: 24 pt

3) font-style – beállítja a betűtípus írási stílusát.  Szintaxis:
betűstílus: normál |  dőlt |  ferde |  örököl
Értékek:
normál – normál helyesírás;
dőlt – dőlt;
ferde – jobbra ferde betűtípus;
inherit – örökli a szülőelem helyesírását.
Példa a betűtípus megváltoztatására html-ben ezzel a tulajdonsággal:
font-style: inherit
font-style:dőlt
font-style:normal
font-style:ferde

4) font-variant – minden nagybetűt nagybetűvé alakít.  Szintaxis:
font-variáns: normál |  kisbetűs |  örököl
Példa arra, hogyan lehet megváltoztatni a betűtípust html-ben ezzel a tulajdonsággal:
font-variant: inherit
font-variant:normal
font-variant:small-caps

5) font-weight – lehetővé teszi a szöveg vastagságának (telítettség) beállítását.  Szintaxis:
betűsúly: félkövér|félkövérebb|világosabb|normál|100|200|300|400|500|600|700|800|900
Értékek:
félkövér – a html betűtípust félkövérre állítja;
merészebb – a normálhoz képest merészebb;
világosabb – a normálhoz képest kevésbé telített;
normál – normál helyesírás;
100-900 – a betűvastagságot numerikus egyenértékben állítja be.
font-weight:bold
font-weight:bolder
font-weight:lighter
font-weight:normal
betűsúly: 900
betűsúly: 100

HTML betűtípus tulajdonság és betűszín
A Font egy másik konténertulajdonság.  Önmagában több, a betűtípusok megváltoztatására szolgáló tulajdonság értékeit egyesítette.  betűtípus szintaxis:
font: font-size font-family |  örököl
Az érték beállítható a rendszer által a különféle vezérlők címkéiben használt betűtípusokra is:
felirat – a gombokhoz;
ikon – ikonokhoz;
menü - menü;
message-box – párbeszédpanelekhez;
kis felirat – kis vezérlőkhöz;
status bar – állapotsor betűtípusa.
font:icon
font:caption
font:menu
font:message-box
kis-felirat
font:status-bar
font:italic 50px félkövér "Times New Roman", Times, serif

A betűtípus színének beállításához HTML-ben használhatja a color tulajdonságot.  Segítségével beállíthatja a színt kulcsszó, és be rgb formátumban.  És hexadecimális kódban is.